@koobiq/components 18.35.0 → 18.36.0

package/accordion/accordion.component.d.ts

@@ -11,7 +11,7 @@ export declare enum KbqAccordionVariant {
 }
 export declare class KbqAccordion implements OnDestroy, AfterViewInit {
     protected readonly focusMonitor: FocusMonitor;
-    protected readonly elementRef: ElementRef<any>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     variant: KbqAccordionVariant | string;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/app-switcher/_app-switcher-theme.scss

@@ -0,0 +1,34 @@
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-app-switcher-theme() {
+    .kbq-app-switcher {
+        background: var(--kbq-background-card);
+
+        .kbq-app-switcher-group-header {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+    }
+
+    .kbq-app-switcher__empty-search-result {
+        color: var(--kbq-foreground-contrast-secondary);
+    }
+}
+
+@mixin kbq-app-switcher-typography() {
+    .kbq-app-switcher,
+    .kbq-app-switcher__empty-search-result {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+    }
+
+    .kbq-app-switcher-group-header__text {
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
+    }
+
+    .kbq-app-switcher-group-header__badge {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact-medium);
+    }
+
+    .kbq-app-switch-tree-option__text {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+    }
+}

package/app-switcher/app-switcher-animations.d.ts

@@ -0,0 +1,5 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/** @docs-private */
+export declare const kbqAppSwitcherAnimations: {
+    readonly state: AnimationTriggerMetadata;
+};

package/app-switcher/app-switcher-dropdown-app.d.ts

@@ -0,0 +1,11 @@
+import { KbqDropdownItem } from '@koobiq/components/dropdown';
+import { KbqAppSwitcherApp } from './app-switcher';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqAppSwitcherDropdownApp extends KbqDropdownItem {
+    private sanitizer;
+    app: KbqAppSwitcherApp;
+    getIcon(icon: string | null): import("@angular/platform-browser").SafeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherDropdownApp, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherDropdownApp, "[kbq-app-switcher-dropdown-app]", ["kbqAppSwitcherDropdownApp"], { "app": { "alias": "kbq-app-switcher-dropdown-app"; "required": false; }; }, {}, never, never, true, never>;
+}

package/app-switcher/app-switcher-dropdown-app.scss

@@ -0,0 +1,85 @@
+@use '../core/styles/common';
+@use '../core/styles/common/tokens';
+
+.kbq-app-switcher-dropdown-app {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    min-height: 50px;
+
+    border-radius: var(--kbq-size-xs);
+
+    @include common.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__icon {
+        padding-top: var(--kbq-size-s);
+        padding-right: var(--kbq-size-m);
+    }
+
+    & .kbq-app-switcher-dropdown-app__container {
+        width: 100%;
+
+        align-self: center;
+
+        & .kbq-app-switcher-dropdown-app__name {
+            display: flex;
+            flex-direction: row;
+
+            justify-content: space-between;
+        }
+
+        & .kbq-app-switcher-dropdown-app__caption {
+            margin-left: var(--kbq-size-3xs);
+        }
+    }
+
+    & .kbq-dropdown-item__caption {
+        padding-top: var(--kbq-size-3xs);
+    }
+
+    & .kbq-app-switcher-dropdown-item-trigger__icon {
+        margin-top: var(--kbq-size-3xs);
+    }
+}
+
+@mixin _kbq-app-switcher-dropdown-app-theme() {
+    .kbq-app-switcher-dropdown-app {
+        background: var(--kbq-list-default-container-background);
+        color: var(--kbq-list-default-text-color);
+
+        &.kbq-dropdown-item_highlighted,
+        &:hover {
+            background: var(--kbq-states-background-transparent-active);
+        }
+
+        &.cdk-keyboard-focused {
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        }
+
+        .kbq-app-switcher-dropdown-app__caption {
+            color: var(--kbq-dropdown-item-caption-color);
+        }
+    }
+}
+
+@mixin _kbq-app-switcher-dropdown-app-typography() {
+    .kbq-app-switcher-dropdown-app {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+
+        .kbq-app-switcher-dropdown-app__caption {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
+    }
+}
+
+@include _kbq-app-switcher-dropdown-app-theme();
+@include _kbq-app-switcher-dropdown-app-typography();

package/app-switcher/app-switcher-dropdown-site.d.ts

@@ -0,0 +1,9 @@
+import { KbqDropdownItem } from '@koobiq/components/dropdown';
+import { KbqAppSwitcherSite } from './app-switcher';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqAppSwitcherDropdownSite extends KbqDropdownItem {
+    site: KbqAppSwitcherSite;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherDropdownSite, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherDropdownSite, "[kbq-app-switcher-dropdown-site]", ["kbqAppSwitcherDropdownSite"], { "site": { "alias": "kbq-app-switcher-dropdown-site"; "required": false; }; }, {}, never, never, true, never>;
+}

package/app-switcher/app-switcher-dropdown-site.scss

@@ -0,0 +1,53 @@
+@use '../core/styles/common';
+@use '../core/styles/common/tokens';
+
+.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);
+
+    @include common.user-select(none);
+    @include common.kbq-list-item-base();
+
+    padding: var(--kbq-size-xxs) var(--kbq-size-m);
+
+    & .kbq-app-switcher-dropdown-item-trigger__icon,
+    & .kbq-badge {
+        margin-top: var(--kbq-size-3xs);
+
+        align-self: flex-start;
+    }
+}
+
+@mixin _kbq-app-switcher-dropdown-site-theme() {
+    .kbq-app-switcher-dropdown-site {
+        background: var(--kbq-list-default-container-background);
+        color: var(--kbq-list-default-text-color);
+
+        &.kbq-dropdown-item_highlighted,
+        &:hover {
+            background: var(--kbq-states-background-transparent-active);
+        }
+
+        &.cdk-keyboard-focused {
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        }
+    }
+}
+
+@mixin _kbq-app-switcher-dropdown-site-typography() {
+    .kbq-app-switcher-dropdown-site {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+    }
+}
+
+@include _kbq-app-switcher-dropdown-site-theme();
+@include _kbq-app-switcher-dropdown-site-typography();

package/app-switcher/app-switcher.d.ts

@@ -0,0 +1,191 @@
+import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqInput } from '@koobiq/components/input';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface KbqAppSwitcherApp {
+    name: string;
+    id: string | number;
+    type?: string | number;
+    icon: string;
+    caption?: string;
+    aliases?: KbqAppSwitcherApp[];
+    link?: string;
+}
+export interface KbqAppSwitcherSite {
+    name: string;
+    id: string | number;
+    status?: string;
+    icon?: string;
+    apps: KbqAppSwitcherApp[];
+}
+/** @docs-private */
+export declare function defaultGroupBy(app: KbqAppSwitcherApp, groups: Record<string, KbqAppSwitcherApp>, untyped: KbqAppSwitcherApp[]): void;
+export declare const KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_SEARCH: number;
+export declare const KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING: number;
+/** @docs-private */
+export declare const KBQ_APP_SWITCHER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+export declare function kbqAppSwitcherScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+/** @docs-private */
+export declare const KBQ_APP_SWITCHER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof kbqAppSwitcherScrollStrategyFactory;
+};
+/** default configuration of app-switcher */
+/** @docs-private */
+export declare const KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION: {
+    searchPlaceholder: string;
+    searchEmptyResult: string;
+    sitesHeader: string;
+};
+/** Injection Token for providing configuration of app-switcher */
+/** @docs-private */
+export declare const KBQ_APP_SWITCHER_CONFIGURATION: InjectionToken<unknown>;
+/** @docs-private */
+export declare class KbqAppSwitcherComponent extends KbqPopUp implements AfterViewInit {
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    readonly externalConfiguration: unknown;
+    configuration: any;
+    /** localized data
+     * @docs-private */
+    get localeData(): any;
+    /** @docs-private */
+    readonly searchControl: FormControl<string | null>;
+    /** @docs-private */
+    filteredSites: KbqAppSwitcherSite[];
+    /** @docs-private */
+    prefix: string;
+    /** @docs-private */
+    trigger: KbqAppSwitcherTrigger;
+    /** @docs-private */
+    isTrapFocus: boolean;
+    /** @docs-private */
+    protected activeSite: KbqAppSwitcherSite;
+    /** @docs-private */
+    protected activeApp: KbqAppSwitcherApp;
+    /** @docs-private */
+    input: KbqInput;
+    /** @docs-private */
+    otherSites: KbqDropdownTrigger;
+    constructor();
+    ngAfterViewInit(): void;
+    /** @docs-private */
+    updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
+    /** @docs-private */
+    updateTrapFocus(isTrapFocus: boolean): void;
+    /** @docs-private */
+    escapeHandler(): void;
+    /** @docs-private */
+    selectAppInSite(site: KbqAppSwitcherSite, app: KbqAppSwitcherApp): void;
+    private filterSites;
+    private updateLocaleParams;
+    private initDefaultParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherComponent, "kbq-app-switcher", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqAppSwitcherTrigger extends KbqPopUpTrigger<KbqAppSwitcherComponent> implements AfterContentInit, OnInit {
+    /** @docs-private */
+    protected scrollStrategy: () => ScrollStrategy;
+    /** @docs-private */
+    arrow: boolean;
+    /** @docs-private */
+    customClass: string;
+    /** @docs-private */
+    private hasBackdrop;
+    /** @docs-private */
+    private size;
+    /** @docs-private */
+    content: string | TemplateRef<any>;
+    /** @docs-private */
+    header: string | TemplateRef<any>;
+    /** @docs-private */
+    footer: string | TemplateRef<any>;
+    /** @docs-private */
+    private closeOnScroll;
+    /** Whether search is used or not */
+    get withSearch(): boolean;
+    /** Number of applications to choose from
+     * @docs-private */
+    get appsCount(): number;
+    /** Whether the sites are used or not
+     * @docs-private */
+    get sitesMode(): boolean;
+    /** Whether the sites are used or not
+     * @docs-private */
+    get currentApps(): KbqAppSwitcherApp[];
+    /** Selected application */
+    selectedApp: KbqAppSwitcherApp;
+    /** Placement of popUp */
+    placement: PopUpPlacements;
+    /** Class that will be used in the background */
+    backdropClass: string;
+    /** Offset of popUp */
+    offset: number | null;
+    /** Array of sites */
+    get sites(): KbqAppSwitcherSite[];
+    set sites(value: KbqAppSwitcherSite[]);
+    private _parsedSites;
+    /** Array of applications */
+    get apps(): KbqAppSwitcherApp[];
+    set apps(apps: KbqAppSwitcherApp[]);
+    private makeGroupsForApps;
+    private _parsedApps;
+    /** 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(): (app: KbqAppSwitcherApp, groups: Record<string, KbqAppSwitcherApp>, untyped: KbqAppSwitcherApp[]) => void;
+    set groupBy(fn: (app: KbqAppSwitcherApp, groups: Record<string, KbqAppSwitcherApp>, untyped: KbqAppSwitcherApp[]) => void);
+    private _groupBy;
+    /** Selected site */
+    get selectedSite(): KbqAppSwitcherSite;
+    set selectedSite(value: KbqAppSwitcherSite);
+    private _parsedSelectedSite;
+    /** Whether the trigger is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    get hasClickTrigger(): boolean;
+    /** Emits a change event whenever the placement state changes. */
+    readonly placementChange: EventEmitter<any>;
+    /** Emits a change event whenever the visible state changes. */
+    readonly visibleChange: EventEmitter<boolean>;
+    /** @docs-private */
+    readonly selectedSiteChange: EventEmitter<KbqAppSwitcherSite>;
+    /** @docs-private */
+    readonly selectedAppChange: EventEmitter<KbqAppSwitcherApp>;
+    /** @docs-private */
+    trigger: string;
+    /** @docs-private */
+    originalSites: KbqAppSwitcherSite[];
+    /** @docs-private */
+    originalApps: KbqAppSwitcherApp[];
+    /** @docs-private */
+    protected originSelector: string;
+    /** @docs-private */
+    protected get overlayConfig(): OverlayConfig;
+    /** @docs-private */
+    protected preventClosingByInnerScrollSubscription: Subscription;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /** @docs-private */
+    updateData(): void;
+    /** Updates the current position.
+     * @docs-private */
+    updatePosition(reapplyPosition?: boolean): void;
+    /** @docs-private */
+    getOverlayHandleComponentType(): Type<KbqAppSwitcherComponent>;
+    /** @docs-private */
+    updateClassMap(newPlacement?: string): void;
+    /** @docs-private */
+    closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
+    private hideIfNotInViewPort;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAppSwitcherTrigger, "[kbqAppSwitcher]", ["kbqAppSwitcher"], { "selectedApp": { "alias": "selectedApp"; "required": false; }; "placement": { "alias": "kbqAppSwitcherPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "sites": { "alias": "sites"; "required": false; }; "apps": { "alias": "apps"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "selectedSite": { "alias": "selectedSite"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; "selectedSiteChange": "selectedSiteChange"; "selectedAppChange": "selectedAppChange"; }, never, never, true, never>;
+    static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/app-switcher/app-switcher.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./app-switcher";
+import * as i2 from "./kbq-app-switcher-list-item";
+import * as i3 from "./app-switcher-dropdown-app";
+import * as i4 from "./app-switcher-dropdown-site";
+export declare class KbqAppSwitcherModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAppSwitcherModule, never, [typeof i1.KbqAppSwitcherComponent, typeof i1.KbqAppSwitcherTrigger, typeof i2.KbqAppSwitcherListItem, typeof i3.KbqAppSwitcherDropdownApp, typeof i4.KbqAppSwitcherDropdownSite], [typeof i1.KbqAppSwitcherTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqAppSwitcherModule>;
+}

package/app-switcher/app-switcher.scss

@@ -0,0 +1,64 @@
+@use './app-switcher-theme' as *;
+
+.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);
+}
+
+@include kbq-app-switcher-theme();
+@include kbq-app-switcher-typography();

package/app-switcher/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/app-switcher/kbq-app-switcher-list-item.d.ts

@@ -0,0 +1,16 @@
+import { KbqDropdownItem } from '@koobiq/components/dropdown';
+import { KbqAppSwitcherApp } from './app-switcher';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqAppSwitcherListItem extends KbqDropdownItem {
+    private sanitizer;
+    app: KbqAppSwitcherApp;
+    toggle: boolean;
+    collapsed: boolean;
+    clickHandler(event: MouseEvent): void;
+    getIcon(icon: string | null): import("@angular/platform-browser").SafeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherListItem, "[kbq-app-switcher-list-item]", ["kbqAppSwitcherApp"], { "app": { "alias": "app"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_toggle: unknown;
+    static ngAcceptInputType_collapsed: unknown;
+}

package/app-switcher/kbq-app-switcher-list-item.scss

@@ -0,0 +1,180 @@
+@use '../core/styles/common';
+@use '../core/styles/common/tokens';
+
+.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);
+
+    @include common.user-select(none);
+
+    text-decoration: none;
+    box-sizing: border-box;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+
+    &.kbq-app-switcher-site_nested {
+        margin-left: var(--kbq-size-xxl);
+
+        border-top-left-radius: unset;
+        border-bottom-left-radius: unset;
+
+        &:after {
+            content: '';
+
+            position: absolute;
+            left: -1px;
+            top: 0;
+
+            height: 100%;
+
+            border-left-width: 1px;
+            border-left-style: solid;
+        }
+
+        &:has(+ :not(.kbq-app-switcher-site_nested)),
+        &:last-child {
+            border-bottom-left-radius: var(--kbq-size-s);
+
+            &: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-icon {
+        transform: rotate(0deg);
+    }
+
+    &.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__name {
+        @include common.kbq-truncate-line();
+    }
+
+    & .kbq-app-switcher-list-item__caption {
+        @include common.kbq-truncate-line();
+    }
+}
+
+@mixin _kbq-app-switcher-list-item-theme() {
+    .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,
+        &.kbq-hover,
+        &.kbq-focused {
+            &:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon {
+                visibility: hidden;
+            }
+
+            & .kbq-app-switcher-list-item__toggle {
+                display: flex;
+            }
+        }
+
+        &:hover,
+        &.kbq-hover {
+            background: var(--kbq-states-background-transparent-hover);
+
+            & .kbq-app-switcher-list-item__toggle {
+                background: var(--kbq-states-background-transparent-hover);
+            }
+        }
+
+        &:active,
+        &.kbq-active {
+            background: var(--kbq-states-background-transparent-active);
+        }
+
+        &.kbq-selected {
+            background: var(--kbq-background-theme-less);
+
+            &:hover,
+            &.kbq-hover {
+                background: var(--kbq-states-background-theme-less-hover);
+            }
+
+            &:active,
+            &.kbq-active {
+                background: var(--kbq-states-background-theme-less-active);
+            }
+        }
+
+        background: var(--kbq-list-default-container-background);
+        color: var(--kbq-list-default-text-color);
+
+        &.cdk-keyboard-focused {
+            outline: none;
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        }
+    }
+}
+
+@mixin _kbq-app-switcher-list-item-typography() {
+    .kbq-app-switcher-list-item__name {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+    }
+
+    .kbq-app-switcher-list-item__caption {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
+    }
+}
+
+@include _kbq-app-switcher-list-item-theme();
+@include _kbq-app-switcher-list-item-typography();

package/app-switcher/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './app-switcher';
+export * from './app-switcher-animations';
+export * from './app-switcher-dropdown-app';
+export * from './app-switcher-dropdown-site';
+export * from './app-switcher.module';
+export * from './kbq-app-switcher-list-item';