@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-app-switcher.mjs

@@ -1,117 +1,325 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Overlay } from '@angular/cdk/overlay';
+import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, input, booleanAttribute, InjectionToken, viewChild, QueryList, ViewChildren, EventEmitter, output, numberAttribute, Output, Directive, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$2 from '@angular/forms';
+import { inject, Injectable, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, model, InjectionToken, viewChild, viewChildren, QueryList, EventEmitter, signal, Directive, NgModule } from '@angular/core';
+import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@koobiq/components/badge';
 import { KbqBadgeModule } from '@koobiq/components/badge';
-import * as i9 from '@koobiq/components/core';
-import { KbqAnimationCurves, KbqAnimationDurations, KBQ_TITLE_TEXT_REF, KbqHighlightBackgroundPipe, ruRULocaleData, KbqPopUp, KBQ_LOCALE_SERVICE, FocusKeyManager, applyPopupMargins, ESCAPE, DOWN_ARROW, TAB, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, UP_ARROW, KbqOptionModule, KbqPopUpTrigger, PopUpSizes, PopUpPlacements, PopUpTriggers, POSITION_TO_CSS_MAP, kbqSiblingPopupProvider, EmptyFocusTrapStrategy } from '@koobiq/components/core';
-import * as i5 from '@koobiq/components/divider';
+import * as i1$2 from '@koobiq/components/core';
+import { KBQ_TITLE_TEXT_REF, KbqHighlightBackgroundPipe, PopUpPlacements, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqPopUp, KbqLocaleOverridesDirective, kbqQueryListFrom, FocusKeyManager, applyPopupMargins, ESCAPE, DOWN_ARROW, TAB, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, UP_ARROW, KbqOptionModule, KbqPopUpTrigger, PopUpSizes, PopUpTriggers, kbqOptionalNumberAttribute, POSITION_TO_CSS_MAP, kbqSiblingPopupProvider } from '@koobiq/components/core';
+import * as i6 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
-import * as i7 from '@koobiq/components/dropdown';
+import * as i8 from '@koobiq/components/dropdown';
 import { KbqDropdownItem, KbqDropdownModule } from '@koobiq/components/dropdown';
 import * as i1$1 from '@koobiq/components/icon';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
-import * as i2 from '@koobiq/components/input';
+import * as i3 from '@koobiq/components/input';
 import { KbqInput, KbqInputModule } from '@koobiq/components/input';
 import { defaultOffsetYWithArrow } from '@koobiq/components/popover';
-import * as i8 from '@koobiq/components/scrollbar';
-import { KbqScrollbarModule } from '@koobiq/components/scrollbar';
+import { KbqScrollbar } from '@koobiq/components/scrollbar';
 import { merge } from 'rxjs';
-import { startWith } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { NgOptimizedImage } from '@angular/common';
+import { startWith, distinctUntilChanged, auditTime, filter } from 'rxjs/operators';
+import { DOCUMENT, NgOptimizedImage } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i3 from '@koobiq/components/form-field';
-import { ConfigurableFocusTrapFactory, FocusTrapFactory, FOCUS_TRAP_INERT_STRATEGY } from '@angular/cdk/a11y';
+import * as i4 from '@koobiq/components/form-field';
 
-/** @docs-private */
-const kbqAppSwitcherAnimations = {
-    /** Animation that transitions a tooltip in and out. */
-    state: trigger('state', [
-        state('initial', style({
-            opacity: 0,
-            transform: 'scale(1, 0.8)'
-        })),
-        transition('* => visible', animate(`120ms ${KbqAnimationCurves.DecelerationCurve}`, style({
-            opacity: 1,
-            transform: 'scale(1, 1)'
-        }))),
-        transition('* => hidden', animate(`${KbqAnimationDurations.Rapid} linear`, style({ opacity: 0 })))
-    ])
-};
+/**
+ * SVG elements allowed inside `KbqAppSwitcherApp.icon`/`KbqAppSwitcherSite.icon`.
+ *
+ * Everything else is dropped, which is what neutralises the dangerous markup: `script` (inline JS),
+ * `foreignObject` (re-opens an HTML parsing context inside the SVG), `style` (CSS-based exfiltration and
+ * the classic mXSS vector), `a` (navigation) and every HTML element such as `img` or `iframe`.
+ * Keys are lower-cased because SVG tag names are case-sensitive (`clipPath`, `linearGradient`, …).
+ */
+const ALLOWED_ELEMENTS = new Set([
+    'circle',
+    'clippath',
+    'defs',
+    'desc',
+    'ellipse',
+    'feblend',
+    'fecolormatrix',
+    'fecomposite',
+    'fedropshadow',
+    'feflood',
+    'fegaussianblur',
+    'femerge',
+    'femergenode',
+    'feoffset',
+    'filter',
+    'g',
+    'lineargradient',
+    'line',
+    'marker',
+    'mask',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialgradient',
+    'rect',
+    'stop',
+    'svg',
+    'symbol',
+    'text',
+    'textpath',
+    'title',
+    'tspan',
+    'use'
+]);
+/**
+ * Attributes allowed on the elements above — geometry, presentation and a few a11y hooks.
+ * Anything absent from this list is removed, which covers every `on*` event handler.
+ *
+ * Note the asymmetry with `UNSAFE_STYLE_VALUE` below: `url(...)` is rejected inside `style`, but the paint
+ * attributes that legitimately take it (`fill`, `stroke`, `filter`, `mask`, `clip-path`) are kept as-is,
+ * because `fill="url(#gradient)"` is how an inline icon references its own gradient. That is safe in practice
+ * — browsers resolve those references only within the same document, so an external URL there neither loads
+ * nor renders anything.
+ */
+const ALLOWED_ATTRIBUTES = new Set([
+    'aria-hidden',
+    'aria-label',
+    'baseline-shift',
+    'class',
+    'clip-path',
+    'clip-rule',
+    'color',
+    'cx',
+    'cy',
+    'd',
+    'display',
+    'dominant-baseline',
+    'dx',
+    'dy',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'filter',
+    'filterunits',
+    'flood-color',
+    'flood-opacity',
+    'focusable',
+    'font-family',
+    'font-size',
+    'font-style',
+    'font-weight',
+    'fx',
+    'fy',
+    'gradienttransform',
+    'gradientunits',
+    'height',
+    'href',
+    'id',
+    'in',
+    'in2',
+    'letter-spacing',
+    'marker-end',
+    'marker-mid',
+    'marker-start',
+    'markerheight',
+    'markerwidth',
+    'mask',
+    'maskunits',
+    'mode',
+    'offset',
+    'opacity',
+    'orient',
+    'overflow',
+    'pathlength',
+    'patterncontentunits',
+    'patternunits',
+    'points',
+    'preserveaspectratio',
+    'primitiveunits',
+    'r',
+    'refx',
+    'refy',
+    'result',
+    'role',
+    'rx',
+    'ry',
+    'shape-rendering',
+    'spreadmethod',
+    'stddeviation',
+    'stop-color',
+    'stop-opacity',
+    'stroke',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+    'style',
+    'text-anchor',
+    'transform',
+    'type',
+    'values',
+    'vector-effect',
+    'viewbox',
+    'visibility',
+    'width',
+    'x',
+    'x1',
+    'x2',
+    'xlink:href',
+    'xmlns',
+    'xmlns:xlink',
+    'y',
+    'y1',
+    'y2'
+]);
+/** Attributes carrying a URL: only same-document fragment references (`#gradient-1`) survive. */
+const URL_ATTRIBUTES = new Set(['href', 'xlink:href']);
+/** Inline styles that can load or execute something are dropped rather than parsed. */
+const UNSAFE_STYLE_VALUE = /url\s*\(|expression\s*\(|javascript\s*:/i;
+/**
+ * Turns the caller-supplied inline SVG of an app-switcher icon into markup that is safe to hand to
+ * `[innerHtml]`.
+ *
+ * Angular's own HTML sanitizer cannot be used here: its allow-list contains no SVG elements at all, so it
+ * would strip every icon. Instead the markup is parsed inert (inside a `<template>`, where no request is
+ * issued and no script runs), filtered against a strict SVG allow-list, and only then marked as trusted.
+ */
+class KbqAppSwitcherIconSanitizer {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.domSanitizer = inject(DomSanitizer);
+    }
+    /**
+     * Sanitizes inline SVG markup and wraps it as `SafeHtml`. Returns `null` for empty input, so callers can
+     * use the result directly as the `@if` condition of the icon element.
+     */
+    sanitize(icon) {
+        if (!icon)
+            return null;
+        const sanitized = this.filter(icon);
+        if (!sanitized)
+            return null;
+        // Second pass: `[innerHtml]` re-parses our serialized output, and mutation-XSS works by making that
+        // second parse differ from the first. Benign markup is already normalised by pass one, so a
+        // difference here means the input was crafted to change shape on re-parse - drop it entirely.
+        if (this.filter(sanitized) !== sanitized)
+            return null;
+        return this.domSanitizer.bypassSecurityTrustHtml(sanitized);
+    }
+    /** Parses the markup inertly, strips everything outside the allow-lists and serializes it back. */
+    filter(markup) {
+        const template = this.document.createElement('template');
+        template.innerHTML = markup;
+        this.sanitizeChildren(template.content);
+        return template.innerHTML;
+    }
+    sanitizeChildren(node) {
+        // Snapshot the list: removing a node while iterating a live NodeList skips its sibling.
+        for (const child of Array.from(node.childNodes)) {
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                const element = child;
+                if (ALLOWED_ELEMENTS.has(element.localName.toLowerCase())) {
+                    this.sanitizeAttributes(element);
+                    this.sanitizeChildren(element);
+                    continue;
+                }
+            }
+            else if (child.nodeType === Node.TEXT_NODE) {
+                continue;
+            }
+            // Disallowed elements, comments and CDATA sections (a known mXSS carrier) all go.
+            child.parentNode?.removeChild(child);
+        }
+    }
+    sanitizeAttributes(element) {
+        for (const { name, value } of Array.from(element.attributes)) {
+            const attribute = name.toLowerCase();
+            const allowed = ALLOWED_ATTRIBUTES.has(attribute) &&
+                (!URL_ATTRIBUTES.has(attribute) || value.trim().startsWith('#')) &&
+                (attribute !== 'style' || !UNSAFE_STYLE_VALUE.test(value));
+            if (!allowed) {
+                element.removeAttribute(name);
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherIconSanitizer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherIconSanitizer, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherIconSanitizer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /** @docs-private */
 class KbqAppSwitcherDropdownApp extends KbqDropdownItem {
     constructor() {
         super(...arguments);
-        this.sanitizer = inject(DomSanitizer);
+        this.iconSanitizer = inject(KbqAppSwitcherIconSanitizer);
+        /** Application (or synthetic app group) rendered by this flyout row. */
+        this.app = input.required({ ...(ngDevMode ? { debugName: "app" } : /* istanbul ignore next */ {}), alias: 'kbq-app-switcher-dropdown-app' });
+        /** Inline SVG of the app icon, sanitized against an SVG allow-list. See `KbqAppSwitcherListItem.safeIcon`. */
+        this.safeIcon = computed(() => this.iconSanitizer.sanitize(this.app().icon), ...(ngDevMode ? [{ debugName: "safeIcon" }] : /* istanbul ignore next */ []));
     }
-    getIcon(icon) {
-        return this.sanitizer.bypassSecurityTrustHtml(icon || '');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherDropdownApp, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqAppSwitcherDropdownApp, isStandalone: true, selector: "[kbq-app-switcher-dropdown-app]", inputs: { app: ["kbq-app-switcher-dropdown-app", "app"] }, host: { attributes: { "role": "menuitem" }, properties: { "class.kbq-dropdown-item": "false", "attr.tabindex": "getTabIndex()", "attr.aria-haspopup": "isNested ? 'menu' : null" }, classAttribute: "kbq-app-switcher-dropdown-app" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherDropdownApp, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqAppSwitcherDropdownApp, isStandalone: true, selector: "[kbq-app-switcher-dropdown-app]", inputs: { app: { classPropertyName: "app", publicName: "kbq-app-switcher-dropdown-app", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "class.kbq-dropdown-item": "false", "attr.aria-haspopup": "isNested ? 'menu' : null" }, classAttribute: "kbq-app-switcher-dropdown-app" }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqAppSwitcherDropdownApp },
             { provide: KbqDropdownItem, useExisting: KbqAppSwitcherDropdownApp }
         ], exportAs: ["kbqAppSwitcherDropdownApp"], usesInheritance: true, ngImport: i0, template: `
-        <i class="kbq kbq-icon" [className]=""></i>
-        @if (app.icon) {
-            <span class="kbq-app-switcher-dropdown-app__icon" [innerHtml]="getIcon(app.icon)"></span>
-        } @else if (app.iconSrc) {
-            <span class="kbq-app-switcher-dropdown-app__icon">
-                <img alt="{{ app.type }}" width="24" height="24" [ngSrc]="app.iconSrc" />
+        @if (safeIcon(); as icon) {
+            <span class="kbq-app-switcher-dropdown-app__icon" aria-hidden="true" [innerHtml]="icon"></span>
+        } @else if (app().iconSrc; as iconSrc) {
+            <span class="kbq-app-switcher-dropdown-app__icon" aria-hidden="true">
+                <img alt="" width="24" height="24" [ngSrc]="iconSrc" />
             </span>
         }
 
         <div class="kbq-app-switcher-dropdown-app__container">
             <div class="kbq-app-switcher-dropdown-app__name">
-                <span>{{ app.name }}</span>
+                <span>{{ app().name }}</span>
 
                 @if (isNested) {
                     <i
                         kbq-icon="kbq-chevron-right-s_16"
+                        aria-hidden="true"
                         class="kbq-app-switcher-dropdown-item-trigger__icon"
                         [color]="componentColors.ContrastFade"
                     ></i>
                 }
             </div>
-            @if (app.caption) {
-                <div class="kbq-app-switcher-dropdown-app__caption">{{ app.caption }}</div>
+            @if (app().caption; as caption) {
+                <div class="kbq-app-switcher-dropdown-app__caption">{{ caption }}</div>
             }
         </div>
-    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-dropdown-app{display:flex;flex-direction:row;width:100%;min-height:50px;border-radius:var(--kbq-size-xs);border:var(--kbq-size-3xs) solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container{width:100%;align-self:center}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__name{display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__caption{margin-left:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-item-trigger__icon{margin-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-app.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-app:hover,.kbq-app-switcher-dropdown-app.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-app:active,.kbq-app-switcher-dropdown-app.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-app-switcher-dropdown-app{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-app{display:flex;flex-direction:row;width:100%;min-height:var(--kbq-app-switcher-size-dropdown-app-height-min, 50px);border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher-dropdown-app{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher-dropdown-app{border:var(--kbq-size-3xs) solid transparent;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container{width:100%;align-self:center}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__name{display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__caption{margin-left:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-item-trigger__icon{margin-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-app.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-app:hover,.kbq-app-switcher-dropdown-app.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-app:active,.kbq-app-switcher-dropdown-app.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-app-switcher-dropdown-app{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherDropdownApp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherDropdownApp, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-app-switcher-dropdown-app]', imports: [KbqIcon, NgOptimizedImage], template: `
-        <i class="kbq kbq-icon" [className]=""></i>
-        @if (app.icon) {
-            <span class="kbq-app-switcher-dropdown-app__icon" [innerHtml]="getIcon(app.icon)"></span>
-        } @else if (app.iconSrc) {
-            <span class="kbq-app-switcher-dropdown-app__icon">
-                <img alt="{{ app.type }}" width="24" height="24" [ngSrc]="app.iconSrc" />
+        @if (safeIcon(); as icon) {
+            <span class="kbq-app-switcher-dropdown-app__icon" aria-hidden="true" [innerHtml]="icon"></span>
+        } @else if (app().iconSrc; as iconSrc) {
+            <span class="kbq-app-switcher-dropdown-app__icon" aria-hidden="true">
+                <img alt="" width="24" height="24" [ngSrc]="iconSrc" />
             </span>
         }
 
         <div class="kbq-app-switcher-dropdown-app__container">
             <div class="kbq-app-switcher-dropdown-app__name">
-                <span>{{ app.name }}</span>
+                <span>{{ app().name }}</span>
 
                 @if (isNested) {
                     <i
                         kbq-icon="kbq-chevron-right-s_16"
+                        aria-hidden="true"
                         class="kbq-app-switcher-dropdown-item-trigger__icon"
                         [color]="componentColors.ContrastFade"
                     ></i>
                 }
             </div>
-            @if (app.caption) {
-                <div class="kbq-app-switcher-dropdown-app__caption">{{ app.caption }}</div>
+            @if (app().caption; as caption) {
+                <div class="kbq-app-switcher-dropdown-app__caption">{{ caption }}</div>
             }
         </div>
     `, providers: [
@@ -121,51 +329,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-app-switcher-dropdown-app',
                         role: 'menuitem',
                         '[class.kbq-dropdown-item]': 'false',
-                        '[attr.tabindex]': 'getTabIndex()',
+                        // `tabindex` comes from `KbqDropdownItem`: a second binding here would read its signal again after the others.
                         '[attr.aria-haspopup]': "isNested ? 'menu' : null"
-                    }, exportAs: 'kbqAppSwitcherDropdownApp', styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-dropdown-app{display:flex;flex-direction:row;width:100%;min-height:50px;border-radius:var(--kbq-size-xs);border:var(--kbq-size-3xs) solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container{width:100%;align-self:center}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__name{display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__caption{margin-left:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-item-trigger__icon{margin-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-app.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-app:hover,.kbq-app-switcher-dropdown-app.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-app:active,.kbq-app-switcher-dropdown-app.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-app-switcher-dropdown-app{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
-        }], propDecorators: { app: [{
-                type: Input,
-                args: ['kbq-app-switcher-dropdown-app']
-            }] } });
+                    }, exportAs: 'kbqAppSwitcherDropdownApp', styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-app{display:flex;flex-direction:row;width:100%;min-height:var(--kbq-app-switcher-size-dropdown-app-height-min, 50px);border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher-dropdown-app{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher-dropdown-app{border:var(--kbq-size-3xs) solid transparent;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container{width:100%;align-self:center}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__name{display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__container .kbq-app-switcher-dropdown-app__caption{margin-left:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-item-trigger__icon{margin-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-app{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-app.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-app:hover,.kbq-app-switcher-dropdown-app.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-app:active,.kbq-app-switcher-dropdown-app.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-app-switcher-dropdown-app{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-dropdown-app .kbq-app-switcher-dropdown-app__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
+        }], propDecorators: { app: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-app-switcher-dropdown-app", required: true }] }] } });
 
 /** @docs-private */
 class KbqAppSwitcherDropdownSite extends KbqDropdownItem {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherDropdownSite, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqAppSwitcherDropdownSite, isStandalone: true, selector: "[kbq-app-switcher-dropdown-site]", inputs: { site: ["kbq-app-switcher-dropdown-site", "site"] }, host: { attributes: { "role": "menuitem" }, properties: { "class.kbq-dropdown-item": "false", "attr.tabindex": "getTabIndex()", "attr.aria-haspopup": "isNested ? 'menu' : null" }, classAttribute: "kbq-app-switcher-dropdown-site" }, providers: [
+    constructor() {
+        super(...arguments);
+        /** Site rendered by this row. */
+        this.site = input.required({ ...(ngDevMode ? { debugName: "site" } : /* istanbul ignore next */ {}), alias: 'kbq-app-switcher-dropdown-site' });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherDropdownSite, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqAppSwitcherDropdownSite, isStandalone: true, selector: "[kbq-app-switcher-dropdown-site]", inputs: { site: { classPropertyName: "site", publicName: "kbq-app-switcher-dropdown-site", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "class.kbq-dropdown-item": "false", "attr.aria-haspopup": "isNested ? 'menu' : null" }, classAttribute: "kbq-app-switcher-dropdown-site" }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqAppSwitcherDropdownSite },
             { provide: KbqDropdownItem, useExisting: KbqAppSwitcherDropdownSite }
         ], exportAs: ["kbqAppSwitcherDropdownSite"], usesInheritance: true, ngImport: i0, template: `
-        <span class="kbq-app-switcher-dropdown-site__name">{{ site.name }}</span>
+        <span class="kbq-app-switcher-dropdown-site__name">{{ site().name }}</span>
 
-        @if (site.status) {
-            <kbq-badge class="kbq-app-switcher-dropdown-site__badge" [compact]="true">{{ site.status }}</kbq-badge>
+        @if (site().status; as status) {
+            <kbq-badge class="kbq-app-switcher-dropdown-site__badge" [compact]="true">{{ status }}</kbq-badge>
         }
 
         @if (isNested) {
             <i
                 kbq-icon="kbq-chevron-right-s_16"
+                aria-hidden="true"
                 class="kbq-app-switcher-dropdown-item-trigger__icon"
                 [color]="componentColors.ContrastFade"
             ></i>
         }
-    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-dropdown-site{justify-content:space-between;width:100%;min-height:var(--kbq-size-3xl);text-decoration:none;border-radius:var(--kbq-size-xs);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-app-switcher-dropdown-site .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-app-switcher-dropdown-site .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-app-switcher-dropdown-site .kbq-list-text:empty{display:none}.kbq-app-switcher-dropdown-site .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-site{padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-site .kbq-app-switcher-dropdown-item-trigger__icon,.kbq-app-switcher-dropdown-site .kbq-badge{margin-top:var(--kbq-size-3xs);align-self:flex-start}.kbq-app-switcher-dropdown-site{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-site.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-site:hover,.kbq-app-switcher-dropdown-site.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-site:active,.kbq-app-switcher-dropdown-site.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-site{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-height:var(--kbq-size-3xl);text-decoration:none;border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher-dropdown-site{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher-dropdown-site{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-app-switcher-dropdown-site .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-app-switcher-dropdown-site .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-app-switcher-dropdown-site .kbq-list-text:empty{display:none}.kbq-app-switcher-dropdown-site .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-site{padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-site .kbq-app-switcher-dropdown-item-trigger__icon,.kbq-app-switcher-dropdown-site .kbq-badge{margin-top:var(--kbq-size-3xs);align-self:flex-start}.kbq-app-switcher-dropdown-site{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-site.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-site:hover,.kbq-app-switcher-dropdown-site.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-site:active,.kbq-app-switcher-dropdown-site.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-site{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherDropdownSite, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherDropdownSite, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-app-switcher-dropdown-site]', imports: [
                         KbqIcon,
                         KbqBadgeModule
                     ], template: `
-        <span class="kbq-app-switcher-dropdown-site__name">{{ site.name }}</span>
+        <span class="kbq-app-switcher-dropdown-site__name">{{ site().name }}</span>
 
-        @if (site.status) {
-            <kbq-badge class="kbq-app-switcher-dropdown-site__badge" [compact]="true">{{ site.status }}</kbq-badge>
+        @if (site().status; as status) {
+            <kbq-badge class="kbq-app-switcher-dropdown-site__badge" [compact]="true">{{ status }}</kbq-badge>
         }
 
         @if (isNested) {
             <i
                 kbq-icon="kbq-chevron-right-s_16"
+                aria-hidden="true"
                 class="kbq-app-switcher-dropdown-item-trigger__icon"
                 [color]="componentColors.ContrastFade"
             ></i>
@@ -177,94 +389,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-app-switcher-dropdown-site',
                         role: 'menuitem',
                         '[class.kbq-dropdown-item]': 'false',
-                        '[attr.tabindex]': 'getTabIndex()',
+                        // `tabindex` comes from `KbqDropdownItem`: a second binding here would read its signal again after the others.
                         '[attr.aria-haspopup]': "isNested ? 'menu' : null"
-                    }, exportAs: 'kbqAppSwitcherDropdownSite', styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-dropdown-site{justify-content:space-between;width:100%;min-height:var(--kbq-size-3xl);text-decoration:none;border-radius:var(--kbq-size-xs);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-app-switcher-dropdown-site .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-app-switcher-dropdown-site .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-app-switcher-dropdown-site .kbq-list-text:empty{display:none}.kbq-app-switcher-dropdown-site .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-site{padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-site .kbq-app-switcher-dropdown-item-trigger__icon,.kbq-app-switcher-dropdown-site .kbq-badge{margin-top:var(--kbq-size-3xs);align-self:flex-start}.kbq-app-switcher-dropdown-site{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-site.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-site:hover,.kbq-app-switcher-dropdown-site.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-site:active,.kbq-app-switcher-dropdown-site.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-site{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
-        }], propDecorators: { site: [{
-                type: Input,
-                args: ['kbq-app-switcher-dropdown-site']
-            }] } });
+                    }, exportAs: 'kbqAppSwitcherDropdownSite', styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-height:var(--kbq-size-3xl);text-decoration:none;border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher-dropdown-site{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher-dropdown-site{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-app-switcher-dropdown-site .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-app-switcher-dropdown-site .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-app-switcher-dropdown-site .kbq-list-text:empty{display:none}.kbq-app-switcher-dropdown-site .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-dropdown-site .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-app-switcher-dropdown-site{padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-app-switcher-dropdown-site .kbq-app-switcher-dropdown-item-trigger__icon,.kbq-app-switcher-dropdown-site .kbq-badge{margin-top:var(--kbq-size-3xs);align-self:flex-start}.kbq-app-switcher-dropdown-site{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-dropdown-site.kbq-dropdown-item_highlighted,.kbq-app-switcher-dropdown-site:hover,.kbq-app-switcher-dropdown-site.cdk-keyboard-focused{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-dropdown-site:active,.kbq-app-switcher-dropdown-site.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-dropdown-site{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
+        }], propDecorators: { site: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-app-switcher-dropdown-site", required: true }] }] } });
 
 /** @docs-private */
 class KbqAppSwitcherListItem extends KbqDropdownItem {
     constructor() {
         super(...arguments);
-        this.sanitizer = inject(DomSanitizer);
-        this.toggle = input(false, ...(ngDevMode ? [{ debugName: "toggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.iconSanitizer = inject(KbqAppSwitcherIconSanitizer);
+        /** Application (or synthetic app group) rendered by this row. */
+        this.app = input.required(...(ngDevMode ? [{ debugName: "app" }] : /* istanbul ignore next */ []));
+        /** Whether the row is a group header carrying the expand/collapse toggle. */
+        this.toggle = input(false, { ...(ngDevMode ? { debugName: "toggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Search query to highlight within the app name. */
-        this.highlightText = input('', ...(ngDevMode ? [{ debugName: "highlightText" }] : []));
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.collapsed = false;
+        this.highlightText = input('', ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
+        /** Whether the group's aliases are hidden. */
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /**
+         * Inline SVG of the app icon, sanitized against an SVG allow-list.
+         *
+         * Computed from the `app` input instead of being called from the template, so the `SafeHtml` is produced
+         * once per app rather than on every change-detection pass — a fresh object would make `[innerHtml]`
+         * re-parse the SVG each time.
+         */
+        this.safeIcon = computed(() => this.iconSanitizer.sanitize(this.app().icon), ...(ngDevMode ? [{ debugName: "safeIcon" }] : /* istanbul ignore next */ []));
     }
+    /** Toggles the group when this row is a group header; plain rows keep their link behaviour. */
     clickHandler(event) {
         if (this.toggle()) {
             event.stopPropagation();
             event.preventDefault();
-            this.collapsed = !this.collapsed;
+            this.collapsed.set(!this.collapsed());
         }
     }
-    getIcon(icon) {
-        return this.sanitizer.bypassSecurityTrustHtml(icon || '');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherListItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqAppSwitcherListItem, isStandalone: true, selector: "[kbq-app-switcher-list-item]", inputs: { app: { classPropertyName: "app", publicName: "app", isSignal: false, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "clickHandler($event)" }, properties: { "class.kbq-dropdown-item": "false", "attr.tabindex": "getTabIndex()", "attr.aria-expanded": "toggle() ? !collapsed : null" }, classAttribute: "kbq-app-switcher-list-item" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherListItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqAppSwitcherListItem, isStandalone: true, selector: "[kbq-app-switcher-list-item]", inputs: { app: { classPropertyName: "app", publicName: "app", isSignal: true, isRequired: true, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "clickHandler($event)" }, properties: { "class.kbq-dropdown-item": "false", "attr.aria-expanded": "toggle() ? !collapsed() : null" }, classAttribute: "kbq-app-switcher-list-item" }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqAppSwitcherListItem },
             { provide: KbqDropdownItem, useExisting: KbqAppSwitcherListItem }
         ], exportAs: ["kbqAppSwitcherApp"], usesInheritance: true, ngImport: i0, template: `
-        @if (app.icon) {
-            <span class="kbq-app-switcher-list-item__icon" [innerHtml]="getIcon(app.icon)"></span>
-        } @else if (app.iconSrc) {
-            <span class="kbq-app-switcher-list-item__icon">
-                <img alt="{{ app.type }}" width="24" height="24" [ngSrc]="app.iconSrc" />
+        @if (safeIcon(); as icon) {
+            <span class="kbq-app-switcher-list-item__icon" aria-hidden="true" [innerHtml]="icon"></span>
+        } @else if (app().iconSrc; as iconSrc) {
+            <span class="kbq-app-switcher-list-item__icon" aria-hidden="true">
+                <img alt="" width="24" height="24" [ngSrc]="iconSrc" />
             </span>
         }
 
         <div class="kbq-app-switcher-list-item__container">
             <div
                 class="kbq-app-switcher-list-item__name"
-                [innerHTML]="app.name | kbqHighlightBackground: highlightText()"
+                [innerHTML]="app().name | kbqHighlightBackground: highlightText()"
             ></div>
-            @if (app.caption) {
-                <div class="kbq-app-switcher-list-item__caption">{{ app.caption }}</div>
+            @if (app().caption; as caption) {
+                <div class="kbq-app-switcher-list-item__caption">{{ caption }}</div>
             }
         </div>
 
         @if (toggle()) {
-            <div class="kbq-app-switcher-list-item__toggle" [class.kbq-expanded]="!collapsed">
-                <i kbq-icon="kbq-chevron-down-s_16" [color]="'contrast-fade'"></i>
+            <div class="kbq-app-switcher-list-item__toggle" [class.kbq-expanded]="!collapsed()">
+                <i kbq-icon="kbq-chevron-down-s_16" aria-hidden="true" [color]="'contrast-fade'"></i>
             </div>
         }
-    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-list-item{position:relative;display:flex;flex-direction:row;max-width:100%;min-height:38px;border-radius:var(--kbq-size-s);padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-xs) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested{margin-left:var(--kbq-size-xxl);border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:after{content:\"\";position:absolute;left:-1px;top:0;height:100%;border-left-width:1px;border-left-style:solid}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{border-bottom-left-radius:var(--kbq-size-s)}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)):after,.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child:after{top:0;width:var(--kbq-size-m);height:var(--kbq-size-xxl);border-bottom-left-radius:var(--kbq-size-s);border-bottom-width:1px;border-bottom-style:solid}.kbq-app-switcher-list-item__toggle{position:absolute;display:none;align-items:center;justify-content:center;top:var(--kbq-size-m);left:var(--kbq-size-m);width:var(--kbq-size-xxl);height:var(--kbq-size-xxl);border-radius:var(--kbq-size-xxs)}.kbq-app-switcher-list-item__toggle .kbq-icon{transform:rotate(0)}.kbq-app-switcher-list-item__toggle.kbq-expanded .kbq-icon{transform:rotate(180deg)}.kbq-app-switcher-list-item__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-list-item__container{max-width:100%;min-width:0;align-self:center}.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__name,.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-site_nested:after{border-left-color:var(--kbq-line-contrast-less);border-bottom-color:var(--kbq-line-contrast-less)}.kbq-app-switcher-list-item__caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher-list-item:hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.cdk-keyboard-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-focused .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:hover,.kbq-app-switcher-list-item.kbq-hover,.kbq-app-switcher-list-item.cdk-keyboard-focused,.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-list-item:active,.kbq-app-switcher-list-item.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-list-item.kbq-selected{background:var(--kbq-background-theme-less)}.kbq-app-switcher-list-item.kbq-selected:hover,.kbq-app-switcher-list-item.kbq-selected.kbq-hover,.kbq-app-switcher-list-item.kbq-selected.cdk-keyboard-focused{background:var(--kbq-states-background-theme-less-hover)}.kbq-app-switcher-list-item.kbq-selected:active,.kbq-app-switcher-list-item.kbq-selected.kbq-active{background:var(--kbq-states-background-theme-less-active)}.kbq-app-switcher-list-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-list-item__name{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-app-switcher-list-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-list-item{position:relative;display:flex;flex-direction:row;max-width:100%;min-height:var(--kbq-app-switcher-size-list-item-height-min, 38px);border-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-app-switcher-list-item{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-xs) var(--kbq-size-m);-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested{margin-left:var(--kbq-size-xxl);border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:after{content:\"\";position:absolute;left:-1px;top:0;height:100%;border-left-width:1px;border-left-style:solid}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{border-bottom-left-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{corner-shape:squircle;border-bottom-left-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)):after,.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child:after{top:0;width:var(--kbq-size-m);height:var(--kbq-size-xxl);border-bottom-left-radius:var(--kbq-size-s);border-bottom-width:1px;border-bottom-style:solid}.kbq-app-switcher-list-item__toggle{position:absolute;display:none;align-items:center;justify-content:center;top:var(--kbq-size-m);left:var(--kbq-size-m);width:var(--kbq-size-xxl);height:var(--kbq-size-xxl);border-radius:var(--kbq-size-xxs)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item__toggle{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xxs) * 1.85,var(--kbq-size-xxs) * 2.3 - 3.6px,var(--kbq-size-xxs) * 2)}}.kbq-app-switcher-list-item__toggle .kbq-icon{transform:rotate(0)}.kbq-app-switcher-list-item__toggle.kbq-expanded .kbq-icon{transform:rotate(180deg)}@media(hover:none){.kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}}.kbq-app-switcher-list-item__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-list-item__container{max-width:100%;min-width:0;align-self:center}.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__name,.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-site_nested:after{border-left-color:var(--kbq-line-contrast-less);border-bottom-color:var(--kbq-line-contrast-less)}.kbq-app-switcher-list-item__caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher-list-item:hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.cdk-keyboard-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-focused .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:hover,.kbq-app-switcher-list-item.kbq-hover,.kbq-app-switcher-list-item.cdk-keyboard-focused,.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-list-item:active,.kbq-app-switcher-list-item.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-list-item.kbq-selected{background:var(--kbq-background-theme-less)}.kbq-app-switcher-list-item.kbq-selected:hover,.kbq-app-switcher-list-item.kbq-selected.kbq-hover,.kbq-app-switcher-list-item.kbq-selected.cdk-keyboard-focused{background:var(--kbq-states-background-theme-less-hover)}.kbq-app-switcher-list-item.kbq-selected:active,.kbq-app-switcher-list-item.kbq-selected.kbq-active{background:var(--kbq-states-background-theme-less-active)}.kbq-app-switcher-list-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-list-item__name{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-app-switcher-list-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherListItem, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-app-switcher-list-item]', imports: [
                         KbqIconModule,
                         NgOptimizedImage,
                         KbqHighlightBackgroundPipe
                     ], template: `
-        @if (app.icon) {
-            <span class="kbq-app-switcher-list-item__icon" [innerHtml]="getIcon(app.icon)"></span>
-        } @else if (app.iconSrc) {
-            <span class="kbq-app-switcher-list-item__icon">
-                <img alt="{{ app.type }}" width="24" height="24" [ngSrc]="app.iconSrc" />
+        @if (safeIcon(); as icon) {
+            <span class="kbq-app-switcher-list-item__icon" aria-hidden="true" [innerHtml]="icon"></span>
+        } @else if (app().iconSrc; as iconSrc) {
+            <span class="kbq-app-switcher-list-item__icon" aria-hidden="true">
+                <img alt="" width="24" height="24" [ngSrc]="iconSrc" />
             </span>
         }
 
         <div class="kbq-app-switcher-list-item__container">
             <div
                 class="kbq-app-switcher-list-item__name"
-                [innerHTML]="app.name | kbqHighlightBackground: highlightText()"
+                [innerHTML]="app().name | kbqHighlightBackground: highlightText()"
             ></div>
-            @if (app.caption) {
-                <div class="kbq-app-switcher-list-item__caption">{{ app.caption }}</div>
+            @if (app().caption; as caption) {
+                <div class="kbq-app-switcher-list-item__caption">{{ caption }}</div>
             }
         </div>
 
         @if (toggle()) {
-            <div class="kbq-app-switcher-list-item__toggle" [class.kbq-expanded]="!collapsed">
-                <i kbq-icon="kbq-chevron-down-s_16" [color]="'contrast-fade'"></i>
+            <div class="kbq-app-switcher-list-item__toggle" [class.kbq-expanded]="!collapsed()">
+                <i kbq-icon="kbq-chevron-down-s_16" aria-hidden="true" [color]="'contrast-fade'"></i>
             </div>
         }
     `, providers: [
@@ -274,16 +491,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-app-switcher-list-item',
                         role: 'menuitem',
                         '[class.kbq-dropdown-item]': 'false',
-                        '[attr.tabindex]': 'getTabIndex()',
-                        '[attr.aria-expanded]': 'toggle() ? !collapsed : null',
+                        // `tabindex` comes from `KbqDropdownItem`: a second binding here would read its signal again after the others.
+                        '[attr.aria-expanded]': 'toggle() ? !collapsed() : null',
                         '(click)': 'clickHandler($event)'
-                    }, exportAs: 'kbqAppSwitcherApp', styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-app-switcher-list-item{position:relative;display:flex;flex-direction:row;max-width:100%;min-height:38px;border-radius:var(--kbq-size-s);padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-xs) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested{margin-left:var(--kbq-size-xxl);border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:after{content:\"\";position:absolute;left:-1px;top:0;height:100%;border-left-width:1px;border-left-style:solid}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{border-bottom-left-radius:var(--kbq-size-s)}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)):after,.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child:after{top:0;width:var(--kbq-size-m);height:var(--kbq-size-xxl);border-bottom-left-radius:var(--kbq-size-s);border-bottom-width:1px;border-bottom-style:solid}.kbq-app-switcher-list-item__toggle{position:absolute;display:none;align-items:center;justify-content:center;top:var(--kbq-size-m);left:var(--kbq-size-m);width:var(--kbq-size-xxl);height:var(--kbq-size-xxl);border-radius:var(--kbq-size-xxs)}.kbq-app-switcher-list-item__toggle .kbq-icon{transform:rotate(0)}.kbq-app-switcher-list-item__toggle.kbq-expanded .kbq-icon{transform:rotate(180deg)}.kbq-app-switcher-list-item__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-list-item__container{max-width:100%;min-width:0;align-self:center}.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__name,.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-site_nested:after{border-left-color:var(--kbq-line-contrast-less);border-bottom-color:var(--kbq-line-contrast-less)}.kbq-app-switcher-list-item__caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher-list-item:hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.cdk-keyboard-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-focused .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:hover,.kbq-app-switcher-list-item.kbq-hover,.kbq-app-switcher-list-item.cdk-keyboard-focused,.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-list-item:active,.kbq-app-switcher-list-item.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-list-item.kbq-selected{background:var(--kbq-background-theme-less)}.kbq-app-switcher-list-item.kbq-selected:hover,.kbq-app-switcher-list-item.kbq-selected.kbq-hover,.kbq-app-switcher-list-item.kbq-selected.cdk-keyboard-focused{background:var(--kbq-states-background-theme-less-hover)}.kbq-app-switcher-list-item.kbq-selected:active,.kbq-app-switcher-list-item.kbq-selected.kbq-active{background:var(--kbq-states-background-theme-less-active)}.kbq-app-switcher-list-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-list-item__name{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-app-switcher-list-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
-        }], propDecorators: { app: [{
-                type: Input
-            }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], collapsed: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                    }, exportAs: 'kbqAppSwitcherApp', styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-list-item{position:relative;display:flex;flex-direction:row;max-width:100%;min-height:var(--kbq-app-switcher-size-list-item-height-min, 38px);border-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-app-switcher-list-item{padding:var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-xs) var(--kbq-size-m);-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested{margin-left:var(--kbq-size-xxl);border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:after{content:\"\";position:absolute;left:-1px;top:0;height:100%;border-left-width:1px;border-left-style:solid}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{border-bottom-left-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)),.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child{corner-shape:squircle;border-bottom-left-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:has(+:not(.kbq-app-switcher-site_nested)):after,.kbq-app-switcher-list-item.kbq-app-switcher-site_nested:last-child:after{top:0;width:var(--kbq-size-m);height:var(--kbq-size-xxl);border-bottom-left-radius:var(--kbq-size-s);border-bottom-width:1px;border-bottom-style:solid}.kbq-app-switcher-list-item__toggle{position:absolute;display:none;align-items:center;justify-content:center;top:var(--kbq-size-m);left:var(--kbq-size-m);width:var(--kbq-size-xxl);height:var(--kbq-size-xxl);border-radius:var(--kbq-size-xxs)}@supports (corner-shape: squircle){.kbq-app-switcher-list-item__toggle{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xxs) * 1.85,var(--kbq-size-xxs) * 2.3 - 3.6px,var(--kbq-size-xxs) * 2)}}.kbq-app-switcher-list-item__toggle .kbq-icon{transform:rotate(0)}.kbq-app-switcher-list-item__toggle.kbq-expanded .kbq-icon{transform:rotate(180deg)}@media(hover:none){.kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}}.kbq-app-switcher-list-item__icon{padding-top:var(--kbq-size-s);padding-right:var(--kbq-size-m)}.kbq-app-switcher-list-item__container{max-width:100%;min-width:0;align-self:center}.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__name,.kbq-app-switcher-list-item__container .kbq-app-switcher-list-item__caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-app-switcher-site_nested:after{border-left-color:var(--kbq-line-contrast-less);border-bottom-color:var(--kbq-line-contrast-less)}.kbq-app-switcher-list-item__caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher-list-item:hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-hover:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.kbq-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon,.kbq-app-switcher-list-item.cdk-keyboard-focused:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon{visibility:hidden}.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-focused .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{display:flex}.kbq-app-switcher-list-item:hover,.kbq-app-switcher-list-item.kbq-hover,.kbq-app-switcher-list-item.cdk-keyboard-focused,.kbq-app-switcher-list-item:hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.kbq-hover .kbq-app-switcher-list-item__toggle,.kbq-app-switcher-list-item.cdk-keyboard-focused .kbq-app-switcher-list-item__toggle{background:var(--kbq-states-background-transparent-hover)}.kbq-app-switcher-list-item:active,.kbq-app-switcher-list-item.kbq-active{background:var(--kbq-states-background-transparent-active)}.kbq-app-switcher-list-item.kbq-selected{background:var(--kbq-background-theme-less)}.kbq-app-switcher-list-item.kbq-selected:hover,.kbq-app-switcher-list-item.kbq-selected.kbq-hover,.kbq-app-switcher-list-item.kbq-selected.cdk-keyboard-focused{background:var(--kbq-states-background-theme-less-hover)}.kbq-app-switcher-list-item.kbq-selected:active,.kbq-app-switcher-list-item.kbq-selected.kbq-active{background:var(--kbq-states-background-theme-less-active)}.kbq-app-switcher-list-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-app-switcher-list-item__name{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-app-switcher-list-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
+        }], propDecorators: { app: [{ type: i0.Input, args: [{ isSignal: true, alias: "app", required: true }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
 
 /** @docs-private */
 function defaultGroupBy(app, groups, untyped) {
@@ -301,13 +513,52 @@ function defaultGroupBy(app, groups, untyped) {
                 aliases: [app],
                 icon: app.icon,
                 iconSrc: app.iconSrc,
-                id: ''
+                // The type name, not an empty string: the rendered rows are tracked by `id`, and a falsy one
+                // would make every group fall back to the name-based key.
+                id: appType
             };
         }
     }
 }
+/**
+ * Runs `groupBy` over `apps` and returns the rendered order: synthetic groups big enough to be collapsible
+ * first, then every remaining application as a plain row.
+ *
+ * A group is kept only when it holds strictly more than `minAppsForGrouping` applications; smaller groups are
+ * flattened back into plain rows.
+ */
+function makeGroupsForApps(apps, minAppsForGrouping, groupBy = defaultGroupBy) {
+    const groups = {};
+    const untyped = [];
+    const groupedApps = [];
+    apps.forEach((app) => groupBy(app, groups, untyped));
+    Object.values(groups).forEach((group) => {
+        const { aliases } = group;
+        if (!aliases?.length) {
+            // A custom `groupBy` is free to emit a group without aliases - render it as a plain row. An empty
+            // array has to be dropped too: the template gates the group header on the presence of `aliases`,
+            // and `[]` is truthy, so it would render a toggle that expands to nothing.
+            untyped.push(aliases ? { ...group, aliases: undefined } : group);
+        }
+        else if (aliases.length > minAppsForGrouping) {
+            groupedApps.push(group);
+        }
+        else {
+            untyped.push(...aliases);
+        }
+    });
+    groupedApps.push(...untyped);
+    return groupedApps;
+}
 const KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_SEARCH = 7;
 const KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING = 3;
+/**
+ * `hideIfNotInViewPort` reads layout (`getBoundingClientRect`) and hangs off `CdkScrollable.elementScrolled()`,
+ * which - unlike `ScrollDispatcher.scrolled()` - is not audited by the CDK; coalesce it to roughly one frame.
+ */
+const SCROLL_GEOMETRY_THROTTLE = 16;
+const defaultPlacement = PopUpPlacements.BottomLeft;
+const defaultBackdropClass = 'cdk-overlay-transparent-backdrop';
 /** @docs-private */
 const KBQ_APP_SWITCHER_SCROLL_STRATEGY = new InjectionToken('kbq-app-switcher-scroll-strategy');
 /** @docs-private */
@@ -322,35 +573,75 @@ const KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 };
 /** default configuration of app-switcher */
 /** @docs-private */
-const KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION = ruRULocaleData.appSwitcher;
-/** Injection Token for providing configuration of app-switcher */
-/** @docs-private */
-const KBQ_APP_SWITCHER_CONFIGURATION = new InjectionToken('KbqAppSwitcherConfiguration');
+const KBQ_APP_SWITCHER_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.appSwitcher;
+/** Injection Token for providing the default configuration of app-switcher */
 /** @docs-private */
+const KBQ_APP_SWITCHER_LOCALE_CONFIGURATION = new InjectionToken('KbqAppSwitcherLocaleConfiguration', { factory: () => KBQ_APP_SWITCHER_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_APP_SWITCHER_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the rest
+ * keep following the active locale.
+ */
+const kbqAppSwitcherLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('appSwitcher', configuration);
+/** @deprecated Use {@link KBQ_APP_SWITCHER_DEFAULT_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION = KBQ_APP_SWITCHER_DEFAULT_LOCALE_CONFIGURATION;
+/** @deprecated Use {@link KBQ_APP_SWITCHER_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_APP_SWITCHER_CONFIGURATION = KBQ_APP_SWITCHER_LOCALE_CONFIGURATION;
+/**
+ * Providers used by the app-switcher. `KbqAppSwitcherModule` applies them for `NgModule` consumers;
+ * standalone consumers that import `KbqAppSwitcherTrigger` directly may add them to their application (or
+ * route) providers.
+ *
+ * Providing them is optional: the only entry is the scroll strategy, and the directive falls back to the
+ * default repositioning strategy when the token is absent. The app-switcher renders no focus trap, so - unlike
+ * `KbqPopoverModule` and `KbqNotificationCenterModule`, whose templates bind `[cdkTrapFocus]` - it must not
+ * swap `FOCUS_TRAP_INERT_STRATEGY`/`FocusTrapFactory`: those are injector-wide and would disable the CDK
+ * inert strategy for every other focus trap in the same scope.
+ */
+function kbqAppSwitcherProvider() {
+    return [KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER];
+}
+/**
+ * Popup rendered by `KbqAppSwitcherTrigger`. The trigger attaches it to a CDK overlay itself (see
+ * `getOverlayHandleComponentType`) and assigns `trigger` on the created instance, so consumers never place
+ * `<kbq-app-switcher>` in a template - `[kbqAppSwitcher]` on the trigger element is the whole public surface.
+ */
 class KbqAppSwitcherComponent extends KbqPopUp {
-    /** localized data
-     * @docs-private */
-    get localeData() {
-        return this.configuration;
+    /** @docs-private */
+    get allItems() {
+        return this.allItemsList();
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['triggerInput']) {
+            const trigger = this.triggerInput();
+            if (trigger !== undefined)
+                this.trigger = trigger;
+        }
     }
     constructor() {
         super();
-        /** @docs-private */
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        this.externalConfiguration = inject(KBQ_APP_SWITCHER_CONFIGURATION, { optional: true });
+        /** Strings currently rendered by the popup. */
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('appSwitcher', KBQ_APP_SWITCHER_LOCALE_CONFIGURATION);
         /** @docs-private */
         this.searchControl = new FormControl('');
         /** @docs-private */
-        this.prefix = 'kbq-app-switcher';
-        /** @docs-private */
-        this.isTrapFocus = false;
-        /** @docs-private */
-        this.input = viewChild(KbqInput, ...(ngDevMode ? [{ debugName: "input" }] : []));
+        this.filteredSites = [];
         /** @docs-private */
-        this.otherSites = viewChild.required('otherSites');
+        this.prefix = 'kbq-app-switcher';
         /** @docs-private */
+        this.input = viewChild(KbqInput, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+        /**
+         * The other-sites flyout, closed whenever the pointer moves back over the main list.
+         *
+         * Not `required`: it only exists in multi-site mode, and reading a required query with no match throws -
+         * which a single-site switcher with a search field would do on the first `mouseenter`.
+         *
+         * @docs-private
+         */
+        this.otherSites = viewChild('otherSites', ...(ngDevMode ? [{ debugName: "otherSites" }] : /* istanbul ignore next */ []));
+        this.allItemsQuery = viewChildren(KbqDropdownItem, ...(ngDevMode ? [{ debugName: "allItemsQuery" }] : /* istanbul ignore next */ []));
+        this.allItemsList = kbqQueryListFrom(this.allItemsQuery);
         this.menuItems = new QueryList();
-        /** @docs-private */
         this.dir = inject(Directionality, { optional: true });
         /**
          * CSS class marking a nested alias row, bound in the template (see app-switcher.html). Kept as a
@@ -358,14 +649,8 @@ class KbqAppSwitcherComponent extends KbqPopUp {
          * classList check can't silently drift from the template's class binding if the class is renamed.
          */
         this.nestedAliasClass = 'kbq-app-switcher-site_nested';
-        this.updateLocaleParams = () => {
-            this.configuration = this.externalConfiguration || this.localeService?.getParams('appSwitcher');
-            this.changeDetectorRef.markForCheck();
-        };
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
-        if (!this.localeService) {
-            this.initDefaultParams();
-        }
+        /** @docs-private */
+        this.triggerInput = input(undefined, { ...(ngDevMode ? { debugName: "triggerInput" } : /* istanbul ignore next */ {}), alias: 'trigger' });
     }
     ngAfterViewInit() {
         const input = this.input();
@@ -394,18 +679,26 @@ class KbqAppSwitcherComponent extends KbqPopUp {
         if (input) {
             input.focus();
         }
-        this.visibleChange.subscribe((state) => {
-            if (this.offset !== null && state) {
-                applyPopupMargins(this.renderer, this.elementRef.nativeElement, this.prefix, `${this.offset.toString()}px`);
-            }
+        this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
+            // Not memoized on `offset`: `applyPopupMargins` picks the margin side from the current
+            // `kbq-app-switcher_placement-*` classes, so the write depends on the placement too.
+            if (!state || this.offset === null)
+                return;
+            applyPopupMargins(this.renderer, this.elementRef.nativeElement, this.prefix, `${this.offset}px`);
         });
-        this.searchControl.valueChanges.subscribe((value) => {
+        this.searchControl.valueChanges
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
             this.filteredSites = this.filterSites(value);
             // Switching between the flat list and the search results swaps the rendered items;
             // drop any stale active item so navigation restarts from the top.
             this.keyManager?.setActiveItem(-1);
         });
     }
+    ngAfterViewChecked() {
+        // Syncs the list here so `changes` emits once this view is checked.
+        this.allItemsList();
+    }
     /** Releases the internal roving-focus menu QueryList. */
     ngOnDestroy() {
         this.menuItems.destroy();
@@ -416,18 +709,20 @@ class KbqAppSwitcherComponent extends KbqPopUp {
         super.updateClassMap(placement, customClass, { [`${this.prefix}_${size}`]: !!size });
     }
     /** @docs-private */
-    updateTrapFocus(isTrapFocus) {
-        this.isTrapFocus = isTrapFocus;
-    }
-    /** @docs-private */
     escapeHandler() {
         this.hide(0);
     }
-    /** Handles keyboard navigation across the app-switcher menu items.
-     * @docs-private */
+    /**
+     * Handles keyboard navigation across the app-switcher menu items.
+     *
+     * @docs-private
+     */
     keydownHandler(event) {
         const keyCode = event.keyCode;
         if (keyCode === ESCAPE) {
+            // Spent by a control inside, such as a tooltip closing on it: one key closes one layer.
+            if (event.defaultPrevented)
+                return;
             // Stop here so Escape closes only this popup instead of bubbling into overlays opened
             // earlier (mirrors KbqDropdown.handleKeydown).
             event.preventDefault();
@@ -468,8 +763,7 @@ class KbqAppSwitcherComponent extends KbqPopUp {
             event.preventDefault();
             // A group header toggles its aliases; any other item activates its underlying link.
             if (activeItem instanceof KbqAppSwitcherListItem && activeItem.toggle()) {
-                activeItem.collapsed = !activeItem.collapsed;
-                this.markForCheck();
+                activeItem.collapsed.set(!activeItem.collapsed());
             }
             else {
                 activeItem.getHostElement().click();
@@ -497,14 +791,12 @@ class KbqAppSwitcherComponent extends KbqPopUp {
         const expandKey = rtl ? LEFT_ARROW : RIGHT_ARROW;
         const collapseKey = rtl ? RIGHT_ARROW : LEFT_ARROW;
         if (activeItem.toggle()) {
-            if (keyCode === expandKey && activeItem.collapsed) {
-                activeItem.collapsed = false;
-                this.markForCheck();
+            if (keyCode === expandKey && activeItem.collapsed()) {
+                activeItem.collapsed.set(false);
                 return true;
             }
-            if (keyCode === collapseKey && !activeItem.collapsed) {
-                activeItem.collapsed = true;
-                this.markForCheck();
+            if (keyCode === collapseKey && !activeItem.collapsed()) {
+                activeItem.collapsed.set(true);
                 return true;
             }
             return false;
@@ -526,19 +818,25 @@ class KbqAppSwitcherComponent extends KbqPopUp {
     eventFromInput(event) {
         return !!event.target?.attributes.getNamedItem('kbqinput');
     }
-    /** Syncs the key manager's active item with focus that arrives via Tab, click or a closing flyout.
+    /**
+     * Syncs the key manager's active item with focus that arrives via Tab, click or a closing flyout.
      * Clears the active item (index -1) when focus lands on a focusable element that isn't one of
      * `menuItems` (e.g. the search field's clear button) - otherwise a stale `activeItem` from before
      * the focus move would keep receiving Enter/Space/arrow-key actions meant for the new target.
-     * @docs-private */
+     *
+     * @docs-private
+     */
     focusinHandler(event) {
         if (!this.keyManager)
             return;
         const index = this.menuItems.toArray().findIndex((item) => item.getHostElement() === event.target);
         this.keyManager.updateActiveItem(index);
     }
-    /** Closes the popup once focus leaves the menu and its site flyouts, mirroring the dropdown.
-     * @docs-private */
+    /**
+     * Closes the popup once focus leaves the menu and its site flyouts, mirroring the dropdown.
+     *
+     * @docs-private
+     */
     focusoutHandler(event) {
         const next = event.relatedTarget;
         // Keep open while focus stays inside the popup or moves into a site flyout overlay
@@ -550,33 +848,33 @@ class KbqAppSwitcherComponent extends KbqPopUp {
             this.trigger.focus();
         }
     }
-    /** @docs-private */
+    /**
+     * Selects an application belonging to one of the other sites.
+     *
+     * @docs-private
+     */
     selectAppInSite(site, app) {
-        this.trigger.selectedSite = site;
-        this.trigger.selectedApp = app;
-        this.trigger.selectedSiteChange.emit(site);
-        this.trigger.selectedAppChange.emit(app);
+        if (!site)
+            return;
+        this.trigger.selectedSite.set(site);
+        this.trigger.selectedApp.set(app);
     }
     filterSites(query) {
-        const filteredSites = structuredClone(this.trigger.originalSites);
-        return query
-            ? filteredSites.filter((site) => {
-                const filteredApps = site.apps.filter((app) => app.name.toLowerCase().includes(query.toLowerCase()));
-                if (filteredApps.length) {
-                    site.apps = filteredApps;
-                    return true;
-                }
-                return false;
-            })
-            : filteredSites;
-    }
-    initDefaultParams() {
-        this.configuration = KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION;
+        const sites = this.trigger.originalSites;
+        if (!query)
+            return sites;
+        const search = query.toLowerCase();
+        const matches = (app) => app.name.toLowerCase().includes(search) || !!app.caption?.toLowerCase().includes(search);
+        // Shallow copies only: a `structuredClone` of every site would be an O(all apps) deep copy per
+        // keystroke, and would also hand `@for` brand-new app objects to re-render on every character.
+        return sites
+            .map((site) => ({ ...site, apps: site.apps.filter(matches) }))
+            .filter((site) => site.apps.length > 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqAppSwitcherComponent, isStandalone: true, selector: "kbq-app-switcher", inputs: { trigger: "trigger" }, host: { listeners: { "keydown": "keydownHandler($event)", "focusin": "focusinHandler($event)", "focusout": "focusoutHandler($event)" }, classAttribute: "kbq-app-switcher" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true, isSignal: true }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: true, isSignal: true }, { propertyName: "allItems", predicate: KbqDropdownItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<div kbq-scrollbar role=\"menu\" aria-orientation=\"vertical\">\n    @if (!searchControl.getRawValue()) {\n        <div class=\"kbq-app-switcher__app-container\" (mouseenter)=\"otherSites()?.close()\">\n            @if (trigger.sitesMode) {\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite?.name }}</div>\n                    @if (trigger.selectedSite?.status) {\n                        <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                            {{ trigger.selectedSite.status }}\n                        </kbq-badge>\n                    }\n                </div>\n            }\n\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (app of trigger.currentApps; track app) {\n                        @if (!app.aliases) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [class.kbq-selected]=\"app.id === trigger.selectedApp?.id\"\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></a>\n                        } @else {\n                            <div\n                                #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></div>\n\n                            @if (!appSwitcherApp.collapsed) {\n                                @for (alias of app.aliases; track alias) {\n                                    <a\n                                        href=\"{{ alias.link }}\"\n                                        kbq-app-switcher-list-item\n                                        [class]=\"nestedAliasClass\"\n                                        [class.kbq-selected]=\"alias.id === trigger.selectedApp?.id\"\n                                        [app]=\"alias\"\n                                    ></a>\n                                }\n                            }\n                        }\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n\n        @if (trigger.sitesMode) {\n            <kbq-divider />\n\n            <div class=\"kbq-app-switcher__sites-container\">\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ localeData.sitesHeader }}</div>\n                </div>\n\n                <kbq-dropdown #otherSites=\"kbqDropdown\">\n                    <div kbqDropdownStaticContent class=\"kbq-app-switcher-sites\">\n                        @for (site of trigger.sites; track site) {\n                            @if (site.id !== trigger.selectedSite?.id) {\n                                <div\n                                    #siteFlyoutTrigger=\"kbqDropdownTrigger\"\n                                    [kbq-app-switcher-dropdown-site]=\"site\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                    [offsetX]=\"0\"\n                                    [attr.aria-expanded]=\"siteFlyoutTrigger.opened\"\n                                    (mouseenter)=\"activeSite = site\"\n                                    (focus)=\"activeSite = site\"\n                                ></div>\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (app of activeSite?.apps; track app) {\n                    @if (app.aliases) {\n                        <div\n                            #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                            [offsetX]=\"0\"\n                            [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            [attr.aria-expanded]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            (mouseenter)=\"activeApp = app\"\n                            (focus)=\"activeApp = app\"\n                        ></div>\n                    } @else {\n                        <a\n                            href=\"{{ app.link }}\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            (click)=\"selectAppInSite(activeSite, app)\"\n                        ></a>\n                    }\n                }\n            </kbq-dropdown>\n\n            <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (alias of activeApp?.aliases; track alias) {\n                    <a\n                        href=\"{{ alias.link }}\"\n                        [kbq-app-switcher-dropdown-app]=\"alias\"\n                        (click)=\"selectAppInSite(activeSite, alias)\"\n                    ></a>\n                }\n            </kbq-dropdown>\n        }\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (site of filteredSites; track site) {\n                        @if (trigger.sitesMode && site.apps) {\n                            <kbq-optgroup label=\"{{ site.name }}\" />\n                        }\n\n                        @for (app of site.apps; track app) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [highlightText]=\"searchControl.getRawValue() ?? ''\"\n                            ></a>\n                        }\n                    } @empty {\n                        <div class=\"kbq-app-switcher__empty-search-result\">{{ localeData.searchEmptyResult }}</div>\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n    }\n</div>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:320px;border-radius:var(--kbq-size-xs);box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:320px;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:96px}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}.kbq-app-switch-tree-option__text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i2.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i3.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i5.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i7.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "directive", type: i7.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: i7.KbqDropdownStaticContent, selector: "[kbqDropdownStaticContent]" }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i8.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9.KbqOptgroup, selector: "kbq-optgroup", inputs: ["label", "disabled"], exportAs: ["kbqOptgroup"] }, { kind: "component", type: KbqAppSwitcherDropdownApp, selector: "[kbq-app-switcher-dropdown-app]", inputs: ["kbq-app-switcher-dropdown-app"], exportAs: ["kbqAppSwitcherDropdownApp"] }, { kind: "component", type: KbqAppSwitcherDropdownSite, selector: "[kbq-app-switcher-dropdown-site]", inputs: ["kbq-app-switcher-dropdown-site"], exportAs: ["kbqAppSwitcherDropdownSite"] }, { kind: "component", type: KbqAppSwitcherListItem, selector: "[kbq-app-switcher-list-item]", inputs: ["app", "toggle", "highlightText", "collapsed"], exportAs: ["kbqAppSwitcherApp"] }], animations: [kbqAppSwitcherAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqAppSwitcherComponent, isStandalone: true, selector: "kbq-app-switcher", inputs: { triggerInput: { classPropertyName: "triggerInput", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "keydownHandler($event)", "focusin": "focusinHandler($event)", "focusout": "focusoutHandler($event)" }, classAttribute: "kbq-app-switcher" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true, isSignal: true }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: true, isSignal: true }, { propertyName: "allItemsQuery", predicate: KbqDropdownItem, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1$2.KbqLocaleOverridesDirective }], ngImport: i0, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" aria-hidden=\"true\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeConfiguration().searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"localeConfiguration().searchPlaceholder\"\n                [formControl]=\"searchControl\"\n            />\n            <!-- `kbq-cleaner` is a button with a localized default name; here it clears the search specifically. -->\n            <kbq-cleaner [aria-label]=\"localeConfiguration().clearSearch\" />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<!--\n    Everything between `role=\"menu\"` and the `role=\"menuitem\"` rows is marked `role=\"none\"`: the menu role\n    requires its owned elements to be menu items, and the layout wrappers (and the dropdown host that provides\n    the panel styling) would otherwise break that ownership chain. The scrollbar host cannot carry the menu\n    role for the same reason - it injects its own focusable viewport element in between.\n-->\n<kbq-scrollbar>\n    @if (!searchControl.getRawValue()) {\n        <div role=\"menu\" aria-orientation=\"vertical\">\n            <div class=\"kbq-app-switcher__app-container\" role=\"none\" (mouseenter)=\"otherSites()?.close()\">\n                @if (trigger.sitesMode) {\n                    <div class=\"kbq-app-switcher-group-header\" role=\"none\">\n                        <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite()?.name }}</div>\n                        @if (trigger.selectedSite()?.status; as status) {\n                            <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                                {{ status }}\n                            </kbq-badge>\n                        }\n                    </div>\n                }\n\n                <kbq-dropdown role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-site\">\n                        @for (app of trigger.currentApps; track app.id || app.name) {\n                            @if (!app.aliases) {\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    kbq-app-switcher-list-item\n                                    [attr.href]=\"app.link ?? null\"\n                                    [attr.aria-current]=\"app.id === trigger.selectedApp()?.id ? 'true' : null\"\n                                    [class.kbq-selected]=\"app.id === trigger.selectedApp()?.id\"\n                                    [app]=\"app\"\n                                    [toggle]=\"!!app.aliases\"\n                                ></a>\n                            } @else {\n                                <div\n                                    #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                    kbq-app-switcher-list-item\n                                    [app]=\"app\"\n                                    [toggle]=\"!!app.aliases\"\n                                ></div>\n\n                                @if (!appSwitcherApp.collapsed()) {\n                                    @for (alias of app.aliases; track alias.id) {\n                                        <a\n                                            rel=\"noopener noreferrer\"\n                                            kbq-app-switcher-list-item\n                                            [attr.href]=\"alias.link ?? null\"\n                                            [attr.aria-current]=\"alias.id === trigger.selectedApp()?.id ? 'true' : null\"\n                                            [class]=\"nestedAliasClass\"\n                                            [class.kbq-selected]=\"alias.id === trigger.selectedApp()?.id\"\n                                            [app]=\"alias\"\n                                        ></a>\n                                    }\n                                }\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            @if (trigger.sitesMode) {\n                <kbq-divider />\n\n                <div class=\"kbq-app-switcher__sites-container\" role=\"none\">\n                    <div class=\"kbq-app-switcher-group-header\" role=\"none\">\n                        <div class=\"kbq-app-switcher-group-header__text\">{{ localeConfiguration().sitesHeader }}</div>\n                    </div>\n\n                    <kbq-dropdown #otherSites=\"kbqDropdown\" role=\"none\">\n                        <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-sites\">\n                            @for (site of trigger.sites; track site.id) {\n                                @if (site.id !== trigger.selectedSite()?.id) {\n                                    <div\n                                        [kbq-app-switcher-dropdown-site]=\"site\"\n                                        [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                        [kbqDropdownTriggerData]=\"{ site }\"\n                                        [offsetX]=\"0\"\n                                    ></div>\n                                }\n                            }\n                        </div>\n                    </kbq-dropdown>\n                </div>\n\n                <!--\n                    The flyout panels must stay in the same view as the triggers above: a template reference\n                    variable is only visible inside the view that declares it. Their hosts render empty (the\n                    content moves into an overlay when opened), so `role=\"none\"` keeps the menu ownership\n                    chain intact.\n\n                    Each panel is shared by its triggers, so it renders the data of the trigger that opened it\n                    (`kbqDropdownTriggerData`), not of the last hovered row: the safe area keeps a panel open\n                    while the pointer crosses other triggers.\n                -->\n                <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <ng-template let-site=\"site\" kbqDropdownContent>\n                        @for (app of site.apps; track app.id || app.name) {\n                            @if (app.aliases) {\n                                <div\n                                    #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                                    [kbq-app-switcher-dropdown-app]=\"app\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                                    [kbqDropdownTriggerData]=\"{ site, app }\"\n                                    [offsetX]=\"0\"\n                                    [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                                ></div>\n                            } @else {\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    [attr.href]=\"app.link ?? null\"\n                                    [kbq-app-switcher-dropdown-app]=\"app\"\n                                    (click)=\"selectAppInSite(site, app)\"\n                                ></a>\n                            }\n                        }\n                    </ng-template>\n                </kbq-dropdown>\n\n                <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <ng-template let-site=\"site\" let-app=\"app\" kbqDropdownContent>\n                        @for (alias of app.aliases; track alias.id) {\n                            <a\n                                rel=\"noopener noreferrer\"\n                                [attr.href]=\"alias.link ?? null\"\n                                [kbq-app-switcher-dropdown-app]=\"alias\"\n                                (click)=\"selectAppInSite(site, alias)\"\n                            ></a>\n                        }\n                    </ng-template>\n                </kbq-dropdown>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            @if (filteredSites.length) {\n                <div role=\"menu\" aria-orientation=\"vertical\">\n                    <kbq-dropdown role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                        <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-site\">\n                            @for (site of filteredSites; track site.id) {\n                                @if (trigger.sitesMode && site.apps) {\n                                    <kbq-optgroup label=\"{{ site.name }}\" role=\"none\" />\n                                }\n\n                                @for (app of site.apps; track app.id || app.name) {\n                                    <a\n                                        rel=\"noopener noreferrer\"\n                                        kbq-app-switcher-list-item\n                                        [attr.href]=\"app.link ?? null\"\n                                        [app]=\"app\"\n                                        [highlightText]=\"searchControl.getRawValue() ?? ''\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </kbq-dropdown>\n                </div>\n            }\n\n            <!--\n                Outside the menu: a status message is not a menu item. The live region itself stays mounted\n                while the query changes, so the message is announced once it appears - a region inserted into\n                the DOM together with its text is announced unreliably. It collapses while there are results\n                (`:empty`, see app-switcher.scss).\n            -->\n            <div class=\"kbq-app-switcher__empty-search-result\" role=\"status\">\n                @if (!filteredSites.length) {\n                    {{ localeConfiguration().searchEmptyResult }}\n                }\n            </div>\n        </div>\n    }\n</kbq-scrollbar>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:var(--kbq-app-switcher-size-container-width, 320px);border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher{box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:var(--kbq-app-switcher-size-container-width, 320px);min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:var(--kbq-app-switcher-size-empty-search-result-height, 96px)}.kbq-app-switcher__empty-search-result:empty{display:none}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}\n", ".kbq-app-switcher,.kbq-app-switcher-sites{--kbq-app-switcher-size-container-width: 320px;--kbq-app-switcher-size-empty-search-result-height: 96px;--kbq-app-switcher-size-list-item-height-min: 38px;--kbq-app-switcher-size-dropdown-app-height-min: 50px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i4.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i4.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i4.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i4.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i6.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings", "decorative", "length"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i8.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "closed"], exportAs: ["kbqDropdown"] }, { kind: "directive", type: i8.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: i8.KbqDropdownContent, selector: "ng-template[kbqDropdownContent]" }, { kind: "directive", type: i8.KbqDropdownStaticContent, selector: "[kbqDropdownStaticContent]" }, { kind: "component", type: KbqScrollbar, selector: "kbq-scrollbar", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i1$2.KbqOptgroup, selector: "kbq-optgroup", inputs: ["label", "disabled"], exportAs: ["kbqOptgroup"] }, { kind: "component", type: KbqAppSwitcherDropdownApp, selector: "[kbq-app-switcher-dropdown-app]", inputs: ["kbq-app-switcher-dropdown-app"], exportAs: ["kbqAppSwitcherDropdownApp"] }, { kind: "component", type: KbqAppSwitcherDropdownSite, selector: "[kbq-app-switcher-dropdown-site]", inputs: ["kbq-app-switcher-dropdown-site"], exportAs: ["kbqAppSwitcherDropdownSite"] }, { kind: "component", type: KbqAppSwitcherListItem, selector: "[kbq-app-switcher-list-item]", inputs: ["app", "toggle", "highlightText", "collapsed"], outputs: ["collapsedChange"], exportAs: ["kbqAppSwitcherApp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-app-switcher', imports: [
                         FormsModule,
@@ -586,7 +884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqDividerModule,
                         KbqBadgeModule,
                         KbqDropdownModule,
-                        KbqScrollbarModule,
+                        KbqScrollbar,
                         KbqOptionModule,
                         KbqAppSwitcherDropdownApp,
                         KbqAppSwitcherDropdownSite,
@@ -596,51 +894,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '(keydown)': 'keydownHandler($event)',
                         '(focusin)': 'focusinHandler($event)',
                         '(focusout)': 'focusoutHandler($event)'
-                    }, animations: [kbqAppSwitcherAnimations.state], preserveWhitespaces: false, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<div kbq-scrollbar role=\"menu\" aria-orientation=\"vertical\">\n    @if (!searchControl.getRawValue()) {\n        <div class=\"kbq-app-switcher__app-container\" (mouseenter)=\"otherSites()?.close()\">\n            @if (trigger.sitesMode) {\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite?.name }}</div>\n                    @if (trigger.selectedSite?.status) {\n                        <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                            {{ trigger.selectedSite.status }}\n                        </kbq-badge>\n                    }\n                </div>\n            }\n\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (app of trigger.currentApps; track app) {\n                        @if (!app.aliases) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [class.kbq-selected]=\"app.id === trigger.selectedApp?.id\"\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></a>\n                        } @else {\n                            <div\n                                #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></div>\n\n                            @if (!appSwitcherApp.collapsed) {\n                                @for (alias of app.aliases; track alias) {\n                                    <a\n                                        href=\"{{ alias.link }}\"\n                                        kbq-app-switcher-list-item\n                                        [class]=\"nestedAliasClass\"\n                                        [class.kbq-selected]=\"alias.id === trigger.selectedApp?.id\"\n                                        [app]=\"alias\"\n                                    ></a>\n                                }\n                            }\n                        }\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n\n        @if (trigger.sitesMode) {\n            <kbq-divider />\n\n            <div class=\"kbq-app-switcher__sites-container\">\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ localeData.sitesHeader }}</div>\n                </div>\n\n                <kbq-dropdown #otherSites=\"kbqDropdown\">\n                    <div kbqDropdownStaticContent class=\"kbq-app-switcher-sites\">\n                        @for (site of trigger.sites; track site) {\n                            @if (site.id !== trigger.selectedSite?.id) {\n                                <div\n                                    #siteFlyoutTrigger=\"kbqDropdownTrigger\"\n                                    [kbq-app-switcher-dropdown-site]=\"site\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                    [offsetX]=\"0\"\n                                    [attr.aria-expanded]=\"siteFlyoutTrigger.opened\"\n                                    (mouseenter)=\"activeSite = site\"\n                                    (focus)=\"activeSite = site\"\n                                ></div>\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (app of activeSite?.apps; track app) {\n                    @if (app.aliases) {\n                        <div\n                            #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                            [offsetX]=\"0\"\n                            [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            [attr.aria-expanded]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            (mouseenter)=\"activeApp = app\"\n                            (focus)=\"activeApp = app\"\n                        ></div>\n                    } @else {\n                        <a\n                            href=\"{{ app.link }}\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            (click)=\"selectAppInSite(activeSite, app)\"\n                        ></a>\n                    }\n                }\n            </kbq-dropdown>\n\n            <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (alias of activeApp?.aliases; track alias) {\n                    <a\n                        href=\"{{ alias.link }}\"\n                        [kbq-app-switcher-dropdown-app]=\"alias\"\n                        (click)=\"selectAppInSite(activeSite, alias)\"\n                    ></a>\n                }\n            </kbq-dropdown>\n        }\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (site of filteredSites; track site) {\n                        @if (trigger.sitesMode && site.apps) {\n                            <kbq-optgroup label=\"{{ site.name }}\" />\n                        }\n\n                        @for (app of site.apps; track app) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [highlightText]=\"searchControl.getRawValue() ?? ''\"\n                            ></a>\n                        }\n                    } @empty {\n                        <div class=\"kbq-app-switcher__empty-search-result\">{{ localeData.searchEmptyResult }}</div>\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n    }\n</div>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:320px;border-radius:var(--kbq-size-xs);box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:320px;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:96px}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}.kbq-app-switch-tree-option__text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{
-                type: Input
-            }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqInput), { isSignal: true }] }], otherSites: [{ type: i0.ViewChild, args: ['otherSites', { isSignal: true }] }], allItems: [{
-                type: ViewChildren,
-                args: [KbqDropdownItem]
-            }] } });
+                    }, hostDirectives: [KbqLocaleOverridesDirective], preserveWhitespaces: false, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" aria-hidden=\"true\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeConfiguration().searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"localeConfiguration().searchPlaceholder\"\n                [formControl]=\"searchControl\"\n            />\n            <!-- `kbq-cleaner` is a button with a localized default name; here it clears the search specifically. -->\n            <kbq-cleaner [aria-label]=\"localeConfiguration().clearSearch\" />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<!--\n    Everything between `role=\"menu\"` and the `role=\"menuitem\"` rows is marked `role=\"none\"`: the menu role\n    requires its owned elements to be menu items, and the layout wrappers (and the dropdown host that provides\n    the panel styling) would otherwise break that ownership chain. The scrollbar host cannot carry the menu\n    role for the same reason - it injects its own focusable viewport element in between.\n-->\n<kbq-scrollbar>\n    @if (!searchControl.getRawValue()) {\n        <div role=\"menu\" aria-orientation=\"vertical\">\n            <div class=\"kbq-app-switcher__app-container\" role=\"none\" (mouseenter)=\"otherSites()?.close()\">\n                @if (trigger.sitesMode) {\n                    <div class=\"kbq-app-switcher-group-header\" role=\"none\">\n                        <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite()?.name }}</div>\n                        @if (trigger.selectedSite()?.status; as status) {\n                            <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                                {{ status }}\n                            </kbq-badge>\n                        }\n                    </div>\n                }\n\n                <kbq-dropdown role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-site\">\n                        @for (app of trigger.currentApps; track app.id || app.name) {\n                            @if (!app.aliases) {\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    kbq-app-switcher-list-item\n                                    [attr.href]=\"app.link ?? null\"\n                                    [attr.aria-current]=\"app.id === trigger.selectedApp()?.id ? 'true' : null\"\n                                    [class.kbq-selected]=\"app.id === trigger.selectedApp()?.id\"\n                                    [app]=\"app\"\n                                    [toggle]=\"!!app.aliases\"\n                                ></a>\n                            } @else {\n                                <div\n                                    #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                    kbq-app-switcher-list-item\n                                    [app]=\"app\"\n                                    [toggle]=\"!!app.aliases\"\n                                ></div>\n\n                                @if (!appSwitcherApp.collapsed()) {\n                                    @for (alias of app.aliases; track alias.id) {\n                                        <a\n                                            rel=\"noopener noreferrer\"\n                                            kbq-app-switcher-list-item\n                                            [attr.href]=\"alias.link ?? null\"\n                                            [attr.aria-current]=\"alias.id === trigger.selectedApp()?.id ? 'true' : null\"\n                                            [class]=\"nestedAliasClass\"\n                                            [class.kbq-selected]=\"alias.id === trigger.selectedApp()?.id\"\n                                            [app]=\"alias\"\n                                        ></a>\n                                    }\n                                }\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            @if (trigger.sitesMode) {\n                <kbq-divider />\n\n                <div class=\"kbq-app-switcher__sites-container\" role=\"none\">\n                    <div class=\"kbq-app-switcher-group-header\" role=\"none\">\n                        <div class=\"kbq-app-switcher-group-header__text\">{{ localeConfiguration().sitesHeader }}</div>\n                    </div>\n\n                    <kbq-dropdown #otherSites=\"kbqDropdown\" role=\"none\">\n                        <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-sites\">\n                            @for (site of trigger.sites; track site.id) {\n                                @if (site.id !== trigger.selectedSite()?.id) {\n                                    <div\n                                        [kbq-app-switcher-dropdown-site]=\"site\"\n                                        [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                        [kbqDropdownTriggerData]=\"{ site }\"\n                                        [offsetX]=\"0\"\n                                    ></div>\n                                }\n                            }\n                        </div>\n                    </kbq-dropdown>\n                </div>\n\n                <!--\n                    The flyout panels must stay in the same view as the triggers above: a template reference\n                    variable is only visible inside the view that declares it. Their hosts render empty (the\n                    content moves into an overlay when opened), so `role=\"none\"` keeps the menu ownership\n                    chain intact.\n\n                    Each panel is shared by its triggers, so it renders the data of the trigger that opened it\n                    (`kbqDropdownTriggerData`), not of the last hovered row: the safe area keeps a panel open\n                    while the pointer crosses other triggers.\n                -->\n                <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <ng-template let-site=\"site\" kbqDropdownContent>\n                        @for (app of site.apps; track app.id || app.name) {\n                            @if (app.aliases) {\n                                <div\n                                    #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                                    [kbq-app-switcher-dropdown-app]=\"app\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                                    [kbqDropdownTriggerData]=\"{ site, app }\"\n                                    [offsetX]=\"0\"\n                                    [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                                ></div>\n                            } @else {\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    [attr.href]=\"app.link ?? null\"\n                                    [kbq-app-switcher-dropdown-app]=\"app\"\n                                    (click)=\"selectAppInSite(site, app)\"\n                                ></a>\n                            }\n                        }\n                    </ng-template>\n                </kbq-dropdown>\n\n                <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                    <ng-template let-site=\"site\" let-app=\"app\" kbqDropdownContent>\n                        @for (alias of app.aliases; track alias.id) {\n                            <a\n                                rel=\"noopener noreferrer\"\n                                [attr.href]=\"alias.link ?? null\"\n                                [kbq-app-switcher-dropdown-app]=\"alias\"\n                                (click)=\"selectAppInSite(site, alias)\"\n                            ></a>\n                        }\n                    </ng-template>\n                </kbq-dropdown>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            @if (filteredSites.length) {\n                <div role=\"menu\" aria-orientation=\"vertical\">\n                    <kbq-dropdown role=\"none\" [class]=\"'kbq-app-switcher-sites'\">\n                        <div kbqDropdownStaticContent role=\"none\" class=\"kbq-app-switcher-site\">\n                            @for (site of filteredSites; track site.id) {\n                                @if (trigger.sitesMode && site.apps) {\n                                    <kbq-optgroup label=\"{{ site.name }}\" role=\"none\" />\n                                }\n\n                                @for (app of site.apps; track app.id || app.name) {\n                                    <a\n                                        rel=\"noopener noreferrer\"\n                                        kbq-app-switcher-list-item\n                                        [attr.href]=\"app.link ?? null\"\n                                        [app]=\"app\"\n                                        [highlightText]=\"searchControl.getRawValue() ?? ''\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </kbq-dropdown>\n                </div>\n            }\n\n            <!--\n                Outside the menu: a status message is not a menu item. The live region itself stays mounted\n                while the query changes, so the message is announced once it appears - a region inserted into\n                the DOM together with its text is announced unreliably. It collapses while there are results\n                (`:empty`, see app-switcher.scss).\n            -->\n            <div class=\"kbq-app-switcher__empty-search-result\" role=\"status\">\n                @if (!filteredSites.length) {\n                    {{ localeConfiguration().searchEmptyResult }}\n                }\n            </div>\n        </div>\n    }\n</kbq-scrollbar>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:var(--kbq-app-switcher-size-container-width, 320px);border-radius:var(--kbq-size-xs)}@supports (corner-shape: squircle){.kbq-app-switcher{corner-shape:squircle;border-radius:clamp(var(--kbq-size-xs) * 1.85,var(--kbq-size-xs) * 2.3 - 3.6px,var(--kbq-size-xs) * 2)}}.kbq-app-switcher{box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:var(--kbq-app-switcher-size-container-width, 320px);min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:var(--kbq-app-switcher-size-empty-search-result-height, 96px)}.kbq-app-switcher__empty-search-result:empty{display:none}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}\n", ".kbq-app-switcher,.kbq-app-switcher-sites{--kbq-app-switcher-size-container-width: 320px;--kbq-app-switcher-size-empty-search-result-height: 96px;--kbq-app-switcher-size-list-item-height-min: 38px;--kbq-app-switcher-size-dropdown-app-height-min: 50px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqInput), { isSignal: true }] }], otherSites: [{ type: i0.ViewChild, args: ['otherSites', { isSignal: true }] }], allItemsQuery: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqDropdownItem), { isSignal: true }] }], triggerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
 class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     constructor() {
         super(...arguments);
-        /** @docs-private */
-        this.scrollStrategy = inject(KBQ_APP_SWITCHER_SCROLL_STRATEGY);
-        // not used
+        /**
+         * Optional so a standalone consumer works without `kbqAppSwitcherProvider()`; an application-level
+         * provider for `KBQ_APP_SWITCHER_SCROLL_STRATEGY` still wins over this fallback.
+         *
+         * @docs-private
+         */
+        this.scrollStrategy = inject(KBQ_APP_SWITCHER_SCROLL_STRATEGY, { optional: true }) ??
+            kbqAppSwitcherScrollStrategyFactory(this.overlay);
+        // Abstract members of `KbqPopUp`/`KbqPopUpTrigger` that the app-switcher has no use for: its content is
+        // fixed (the app list), it never draws an arrow and it never renders a backdrop.
         /** @docs-private */
         this.arrow = false;
-        /** @docs-private */
         this.hasBackdrop = false;
-        /** @docs-private */
         this.size = PopUpSizes.Medium;
+        /** Selected application */
+        this.selectedApp = model(undefined, ...(ngDevMode ? [{ debugName: "selectedApp" }] : /* istanbul ignore next */ []));
         /** Placement of popUp */
-        // TODO: Skipped for migration because:
-        //  This input overrides a field from a superclass, while the superclass field
-        //  is not migrated.
-        this.placement = PopUpPlacements.BottomLeft;
+        this.placement = defaultPlacement;
         /** Class that will be used in the background */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
-        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        this.backdropClass = defaultBackdropClass;
         /** Offset of popUp */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
         this.offset = defaultOffsetYWithArrow;
-        this._groupBy = defaultGroupBy;
+        /** Selected site */
+        this.selectedSite = model(undefined, ...(ngDevMode ? [{ debugName: "selectedSite" }] : /* istanbul ignore next */ []));
+        /**
+         * `selectedSite` with its applications grouped for rendering.
+         *
+         * Looked up by id among the parsed sites, so re-selecting a site never regroups it again. Falls back to
+         * the raw value when the id is unknown (a stale id, or `selectedSite` set before `sites`) instead of
+         * throwing.
+         *
+         * @docs-private
+         */
+        this.parsedSelectedSite = computed(() => {
+            const value = this.selectedSite();
+            return value && (this.parsedSitesById().get(value.id) ?? value);
+        }, ...(ngDevMode ? [{ debugName: "parsedSelectedSite" }] : /* istanbul ignore next */ []));
         /** Emits a change event whenever the placement state changes. */
         this.placementChange = new EventEmitter();
+        /** @docs-private */
+        this.placementChangeOutput = outputFromObservable(this.placementChange, { alias: 'kbqPlacementChange' });
         /** Emits a change event whenever the visible state changes. */
         this.visibleChange = new EventEmitter();
         /** @docs-private */
-        this.selectedSiteChange = output();
-        /** @docs-private */
-        this.selectedAppChange = output();
-        /** @docs-private */
+        this.visibleChangeOutput = outputFromObservable(this.visibleChange, { alias: 'kbqVisibleChange' });
+        /**
+         * Space-separated list of DOM events that open the popup (`KbqPopUpTrigger.trigger`).
+         *
+         * Not to be confused with `KbqAppSwitcherComponent.trigger`, which is the back-reference from the popup to
+         * this directive.
+         *
+         * @docs-private
+         */
         this.trigger = `${PopUpTriggers.Click}, ${PopUpTriggers.Keydown}`;
         /** @docs-private */
         this.originSelector = '.kbq-app-switcher';
+        this.originalSitesSignal = signal([], ...(ngDevMode ? [{ debugName: "originalSitesSignal" }] : /* istanbul ignore next */ []));
+        this.groupBySignal = signal(defaultGroupBy, ...(ngDevMode ? [{ debugName: "groupBySignal" }] : /* istanbul ignore next */ []));
+        /**
+         * Sites with their applications grouped, keyed by site id.
+         *
+         * Grouping runs once per `sites`/`groupBy` change instead of once per `selectedSite` assignment, and the
+         * parsed objects keep their identity so `@for` can reuse the rendered rows.
+         */
+        this.parsedSitesById = computed(() => {
+            const groupBy = this.groupBySignal();
+            return new Map(this.originalSitesSignal().map((site) => [
+                site.id,
+                {
+                    ...site,
+                    apps: makeGroupsForApps(site.apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING, groupBy)
+                }
+            ]));
+        }, ...(ngDevMode ? [{ debugName: "parsedSitesById" }] : /* istanbul ignore next */ []));
+        this.parsedSites = computed(() => [...this.parsedSitesById().values()], ...(ngDevMode ? [{ debugName: "parsedSites" }] : /* istanbul ignore next */ []));
+        this.appsCountComputed = computed(() => this.originalSitesSignal().reduce((acc, site) => acc + site.apps.length, 0), ...(ngDevMode ? [{ debugName: "appsCountComputed" }] : /* istanbul ignore next */ []));
+        this.sitesModeComputed = computed(() => this.originalSitesSignal().length > 1, ...(ngDevMode ? [{ debugName: "sitesModeComputed" }] : /* istanbul ignore next */ []));
+        this.currentAppsComputed = computed(() => this.sitesModeComputed()
+            ? // A multi-site switcher can be opened before a site is selected; render nothing rather than crash.
+                (this.parsedSelectedSite()?.apps ?? [])
+            : (this.parsedSites()[0]?.apps ?? []), ...(ngDevMode ? [{ debugName: "currentAppsComputed" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.placementInput = input(undefined, { ...(ngDevMode ? { debugName: "placementInput" } : /* istanbul ignore next */ {}), alias: 'kbqAppSwitcherPlacement' });
+        /** @docs-private */
+        this.backdropClassInput = input(undefined, { ...(ngDevMode ? { debugName: "backdropClassInput" } : /* istanbul ignore next */ {}), alias: 'backdropClass' });
+        /** @docs-private */
+        this.offsetInput = input(undefined, { ...(ngDevMode ? { debugName: "offsetInput" } : /* istanbul ignore next */ {}), alias: 'offset',
+            transform: kbqOptionalNumberAttribute });
+        /** @docs-private */
+        this.sitesInput = input(undefined, { ...(ngDevMode ? { debugName: "sitesInput" } : /* istanbul ignore next */ {}), alias: 'sites' });
+        /** @docs-private */
+        this.groupByInput = input(undefined, { ...(ngDevMode ? { debugName: "groupByInput" } : /* istanbul ignore next */ {}), alias: 'groupBy' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         this.hideIfNotInViewPort = () => {
             if (!this.scrollable)
                 return;
@@ -658,86 +1011,48 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     get withSearch() {
         return this.appsCount > KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_SEARCH;
     }
-    /** Number of applications to choose from
-     * @docs-private */
+    /**
+     * Number of applications to choose from
+     *
+     * @docs-private
+     */
     get appsCount() {
-        return this.originalSites.reduce((acc, site) => acc + site.apps.length, 0);
+        return this.appsCountComputed();
     }
-    /** Whether the sites are used or not
-     * @docs-private */
+    /**
+     * Whether the sites are used or not
+     *
+     * @docs-private
+     */
     get sitesMode() {
-        return this.originalSites.length > 1;
+        return this.sitesModeComputed();
     }
-    /** @docs-private */
+    /**
+     * Applications of the currently selected site, grouped for rendering.
+     *
+     * @docs-private
+     */
     get currentApps() {
-        return this.sitesMode ? this.selectedSite.apps : this._parsedApps;
+        return this.currentAppsComputed();
     }
-    /** Array of sites */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Array of sites, with the applications of each site grouped for rendering. */
     get sites() {
-        return this._parsedSites;
+        return this.parsedSites();
     }
     set sites(value) {
         this.originalSites = value;
-        if (this.originalSites.length === 1) {
-            this._parsedApps = this.makeGroupsForApps(this.originalSites[0].apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
-        }
-        else {
-            this._parsedSites = [];
-            value.forEach((site) => {
-                const newSite = { ...site, apps: [] };
-                newSite.apps = this.makeGroupsForApps(site.apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
-                this._parsedSites.push(newSite);
-            });
-        }
-    }
-    makeGroupsForApps(apps, minAppsForGrouping) {
-        const groups = {};
-        const untyped = [];
-        const groupedApps = [];
-        apps.forEach((app) => {
-            this.groupBy(app, groups, untyped);
-        });
-        Object.values(groups).forEach((group) => {
-            if (group.aliases && group.aliases.length > minAppsForGrouping) {
-                groupedApps.push(group);
-            }
-            else {
-                untyped.push(...group.aliases);
-            }
-        });
-        groupedApps.push(...untyped);
-        return groupedApps;
     }
-    /** Function to group the apps by type. The first argument is an app object with type.
-     * The second is a groups object and third is an array for untyped apps */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Function to group the apps by type. The first argument is an app object with type.
+     * The second is a groups object and third is an array for untyped apps
+     */
     get groupBy() {
-        return this._groupBy;
+        return this.groupBySignal();
     }
     set groupBy(fn) {
-        if (typeof fn !== 'function') {
-            throw new Error('The argument must be a function');
-        }
-        this._groupBy = fn;
-    }
-    /** Selected site */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get selectedSite() {
-        return this._parsedSelectedSite;
-    }
-    set selectedSite(value) {
-        const originValue = this.originalSites.find((site) => value.id === site.id);
-        const newSite = { ...originValue, apps: [] };
-        newSite.apps = this.makeGroupsForApps(originValue.apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
-        this._parsedSelectedSite = newSite;
+        this.groupBySignal.set(fn);
     }
     /** Whether the trigger is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -751,6 +1066,17 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     get hasClickTrigger() {
         return this.trigger.includes(PopUpTriggers.Click);
     }
+    /**
+     * Sites exactly as supplied through `sites`, without grouping.
+     *
+     * @docs-private
+     */
+    get originalSites() {
+        return this.originalSitesSignal();
+    }
+    set originalSites(value) {
+        this.originalSitesSignal.set(value ?? []);
+    }
     /** @docs-private */
     get overlayConfig() {
         return {
@@ -759,37 +1085,58 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
             backdropClass: this.backdropClass
         };
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, a bound `undefined` as the member's default; unbound, it leaves
+        // what code wrote.
+        if (changes['placementInput']) {
+            this.placement = this.placementInput() ?? defaultPlacement;
+        }
+        if (changes['backdropClassInput']) {
+            this.backdropClass = this.backdropClassInput() ?? defaultBackdropClass;
+        }
+        if (changes['offsetInput']) {
+            this.offset = this.offsetInput() ?? defaultOffsetYWithArrow;
+        }
+        if (changes['sitesInput']) {
+            this.sites = this.sitesInput() ?? [];
+        }
+        if (changes['groupByInput']) {
+            this.groupBy = this.groupByInput() ?? defaultGroupBy;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
     ngOnInit() {
         super.ngOnInit();
         this.scrollable
             ?.elementScrolled()
-            .pipe(takeUntilDestroyed(this.destroyRef))
+            .pipe(auditTime(SCROLL_GEOMETRY_THROTTLE), takeUntilDestroyed(this.destroyRef))
             .subscribe(this.hideIfNotInViewPort);
     }
     ngAfterContentInit() {
-        if (this.closeOnScroll === null) {
-            this.scrollDispatcher.scrolled().subscribe((scrollable) => {
-                if (!scrollable?.getElementRef().nativeElement.classList.contains('kbq-hide-nested-popup'))
-                    return;
-                const parentRects = scrollable.getElementRef().nativeElement.getBoundingClientRect();
-                const childRects = this.elementRef.nativeElement.getBoundingClientRect();
-                if (childRects.bottom < parentRects.top || childRects.top > parentRects.bottom) {
-                    this.hide();
-                }
-            });
-        }
-        this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
-            if (visible) {
-                // eslint-disable-next-line rxjs-x/no-nested-subscribe
-                this.preventClosingByInnerScrollSubscription = this.closingActions().subscribe((event) => {
-                    if (event['scrollDispatcher']) {
-                        event['kbqPopoverPreventHide'] = true;
-                        event['type'] = 'click';
-                    }
-                });
+        // Hide the popup once it scrolls out of an ancestor that opted in with `kbq-hide-nested-popup`
+        // (e.g. a tab body), mirroring `KbqPopover`. No extra throttle: `ScrollDispatcher.scrolled()`
+        // already audits its output (20ms by default).
+        this.scrollDispatcher
+            .scrolled()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((scrollable) => {
+            if (!scrollable?.getElementRef().nativeElement.classList.contains('kbq-hide-nested-popup'))
+                return;
+            const parentRects = scrollable.getElementRef().nativeElement.getBoundingClientRect();
+            const childRects = this.elementRef.nativeElement.getBoundingClientRect();
+            if (childRects.bottom < parentRects.top || childRects.top > parentRects.bottom) {
+                this.hide();
             }
-            else {
-                this.preventClosingByInnerScrollSubscription.unsubscribe();
+        });
+        // On close, return focus to the trigger. Inner-scroll close suppression lives in
+        // `closingActions()` (it filters scrolls originating inside the popup), so no per-visibility
+        // subscription is needed here.
+        this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
+            if (!visible) {
                 this.focus();
             }
         });
@@ -798,27 +1145,14 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     updateData() {
         if (!this.instance)
             return;
-        this.instance.header = this.header;
         this.instance.content = this.content;
         this.instance.arrow = this.arrow;
         this.instance.offset = this.offset;
-        this.instance.footer = this.footer;
-        this.instance.updateTrapFocus(this.trigger !== PopUpTriggers.Focus);
+        this.instance.detectChanges();
         if (this.isOpen) {
             this.updatePosition(true);
         }
     }
-    /** Updates the current position.
-     * @docs-private */
-    updatePosition(reapplyPosition = false) {
-        this.overlayRef = this.createOverlay();
-        const position = this.overlayRef.getConfig().positionStrategy
-            .withPositions(this.getAdjustedPositions())
-            .withPush(true);
-        if (reapplyPosition) {
-            setTimeout(() => position.reapplyLastPosition());
-        }
-    }
     /** @docs-private */
     getOverlayHandleComponentType() {
         return KbqAppSwitcherComponent;
@@ -828,16 +1162,25 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
         if (!this.instance)
             return;
         this.instance.updateClassMap(POSITION_TO_CSS_MAP[newPlacement], this.customClass, this.size);
-        this.instance.markForCheck();
     }
     /** @docs-private */
     closingActions() {
-        return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), this.scrollDispatcher.scrolled());
+        return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), 
+        // Only an outer/ancestor scroll that moves the popup out of view should close it. Scrolling
+        // the popup's own content must not: its `KbqScrollbar` viewport is a `CdkScrollable`, so it
+        // reaches the root `ScrollDispatcher`, and keyboard navigation scrolls the focused item into
+        // view through that viewport - without this filter every arrow key would close the panel.
+        this.scrollDispatcher.scrolled().pipe(filter((scrollable) => !this.isInnerScroll(scrollable))));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqAppSwitcherTrigger, isStandalone: true, selector: "[kbqAppSwitcher]", inputs: { selectedApp: "selectedApp", placement: ["kbqAppSwitcherPlacement", "placement"], backdropClass: "backdropClass", offset: ["offset", "offset", numberAttribute], sites: "sites", groupBy: "groupBy", selectedSite: "selectedSite", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { placementChange: "kbqPlacementChange", visibleChange: "kbqVisibleChange", selectedSiteChange: "selectedSiteChange", selectedAppChange: "selectedAppChange" }, host: { listeners: { "keydown": "keydownHandler($event)", "touchend": "touchendHandler()" }, properties: { "class.kbq-app-switcher_open": "isOpen", "class.kbq-active": "hasClickTrigger && isOpen" } }, providers: [kbqSiblingPopupProvider(KbqAppSwitcherTrigger)], exportAs: ["kbqAppSwitcher"], usesInheritance: true, ngImport: i0 }); }
+    /** Whether a `ScrollDispatcher` emission originates from inside this popup's own scrollable content. */
+    isInnerScroll(scrollable) {
+        return (scrollable instanceof CdkScrollable &&
+            !!scrollable.getElementRef().nativeElement.closest('.kbq-app-switcher, .kbq-app-switcher-sites'));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqAppSwitcherTrigger, isStandalone: true, selector: "[kbqAppSwitcher]", inputs: { selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: true, isRequired: false, transformFunction: null }, selectedSite: { classPropertyName: "selectedSite", publicName: "selectedSite", isSignal: true, isRequired: false, transformFunction: null }, placementInput: { classPropertyName: "placementInput", publicName: "kbqAppSwitcherPlacement", isSignal: true, isRequired: false, transformFunction: null }, backdropClassInput: { classPropertyName: "backdropClassInput", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, offsetInput: { classPropertyName: "offsetInput", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, sitesInput: { classPropertyName: "sitesInput", publicName: "sites", isSignal: true, isRequired: false, transformFunction: null }, groupByInput: { classPropertyName: "groupByInput", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedApp: "selectedAppChange", selectedSite: "selectedSiteChange", placementChangeOutput: "kbqPlacementChange", visibleChangeOutput: "kbqVisibleChange" }, host: { listeners: { "keydown": "keydownHandler($event)", "touchend": "touchendHandler()" }, properties: { "class.kbq-app-switcher_open": "isOpen", "class.kbq-active": "hasClickTrigger && isOpen" } }, providers: [kbqSiblingPopupProvider(KbqAppSwitcherTrigger)], exportAs: ["kbqAppSwitcher"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAppSwitcher]',
@@ -850,50 +1193,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     },
                     exportAs: 'kbqAppSwitcher'
                 }]
-        }], propDecorators: { selectedApp: [{
-                type: Input
-            }], placement: [{
-                type: Input,
-                args: ['kbqAppSwitcherPlacement']
-            }], backdropClass: [{
-                type: Input
-            }], offset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], sites: [{
-                type: Input
-            }], groupBy: [{
-                type: Input
-            }], selectedSite: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], placementChange: [{
-                type: Output,
-                args: ['kbqPlacementChange']
-            }], visibleChange: [{
-                type: Output,
-                args: ['kbqVisibleChange']
-            }], selectedSiteChange: [{ type: i0.Output, args: ["selectedSiteChange"] }], selectedAppChange: [{ type: i0.Output, args: ["selectedAppChange"] }] } });
+        }], propDecorators: { selectedApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedApp", required: false }] }, { type: i0.Output, args: ["selectedAppChange"] }], selectedSite: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSite", required: false }] }, { type: i0.Output, args: ["selectedSiteChange"] }], placementChangeOutput: [{ type: i0.Output, args: ["kbqPlacementChange"] }], visibleChangeOutput: [{ type: i0.Output, args: ["kbqVisibleChange"] }], placementInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAppSwitcherPlacement", required: false }] }], backdropClassInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], offsetInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], sitesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sites", required: false }] }], groupByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class KbqAppSwitcherModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherModule, imports: [KbqAppSwitcherComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherModule, imports: [KbqAppSwitcherComponent,
             KbqAppSwitcherTrigger,
             KbqAppSwitcherListItem,
             KbqAppSwitcherDropdownApp,
             KbqAppSwitcherDropdownSite], exports: [KbqAppSwitcherTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherModule, providers: [
-            KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
-            { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy }
-        ], imports: [KbqAppSwitcherComponent,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherModule, providers: kbqAppSwitcherProvider(), imports: [KbqAppSwitcherComponent,
             KbqAppSwitcherListItem,
             KbqAppSwitcherDropdownApp,
             KbqAppSwitcherDropdownSite] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAppSwitcherModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAppSwitcherModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -903,11 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqAppSwitcherDropdownApp,
                         KbqAppSwitcherDropdownSite
                     ],
-                    providers: [
-                        KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
-                        { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy }
-                    ],
+                    providers: kbqAppSwitcherProvider(),
                     exports: [
                         KbqAppSwitcherTrigger
                     ]
@@ -918,5 +1228,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_APP_SWITCHER_CONFIGURATION, KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION, KBQ_APP_SWITCHER_SCROLL_STRATEGY, KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_SEARCH, KbqAppSwitcherComponent, KbqAppSwitcherDropdownApp, KbqAppSwitcherDropdownSite, KbqAppSwitcherListItem, KbqAppSwitcherModule, KbqAppSwitcherTrigger, defaultGroupBy, kbqAppSwitcherAnimations, kbqAppSwitcherScrollStrategyFactory };
+export { KBQ_APP_SWITCHER_CONFIGURATION, KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION, KBQ_APP_SWITCHER_DEFAULT_LOCALE_CONFIGURATION, KBQ_APP_SWITCHER_LOCALE_CONFIGURATION, KBQ_APP_SWITCHER_SCROLL_STRATEGY, KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_SEARCH, KbqAppSwitcherComponent, KbqAppSwitcherDropdownApp, KbqAppSwitcherDropdownSite, KbqAppSwitcherIconSanitizer, KbqAppSwitcherListItem, KbqAppSwitcherModule, KbqAppSwitcherTrigger, defaultGroupBy, kbqAppSwitcherLocaleConfigurationProvider, kbqAppSwitcherProvider, kbqAppSwitcherScrollStrategyFactory, makeGroupsForApps };
 //# sourceMappingURL=koobiq-components-app-switcher.mjs.map