@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-list.mjs

@@ -0,0 +1,1557 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, HostBinding, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, NgZone, ANIMATION_MODULE_TYPE, isDevMode, ContentChildren, ViewChild, EventEmitter, Output, forwardRef, ElementRef, signal, NgModule } from '@angular/core';
+import { CuteFocusableControl } from '@cute-widgets/base/abstract';
+import { toTextBgCssClass, toThemeColor } from '@cute-widgets/base/core';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subscription, merge, Subject } from 'rxjs';
+import { CdkObserveContent } from '@angular/cdk/observers';
+import { CuteCheckbox } from '@cute-widgets/base/checkbox';
+import { CuteRadioButton } from '@cute-widgets/base/radio';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i2 from '@angular/cdk/listbox';
+import { CdkOption, CdkListboxModule, CdkListbox } from '@angular/cdk/listbox';
+import { ListKeyManager, FocusKeyManager } from '@angular/cdk/a11y';
+import { SelectionModel } from '@angular/cdk/collections';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Injection token that can be used to provide the default options the list module. */
+const CUTE_LIST_CONFIG = new InjectionToken('CUTE_LIST_CONFIG');
+let nextId = -1;
+class CuteListBase extends CuteFocusableControl {
+    constructor() {
+        super(...arguments);
+        this._defaultOptions = inject(CUTE_LIST_CONFIG, { optional: true });
+        /** Whether the list and its items are not interactive. */
+        this._isNonInteractive = true;
+        /** Generate numbered list group items */
+        this.numbered = false;
+        /**
+         * Whether to apply the layout of list group items from vertical to horizontal across all breakpoints.
+         * Note that currently, horizontal list groups cannot be combined with `flush` list groups.
+         */
+        this.horizontal = false;
+    }
+    /**
+     * Adds `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints.
+     * Currently, **horizontal list groups cannot be combined with flush list groups.**
+     */
+    get getClassList() {
+        let classList = [];
+        if (this.horizontal && !this.flushBorders) {
+            const horizontalClass = "list-group-horizontal";
+            if (this.horizontalBreakpoint) {
+                classList.push(horizontalClass + "-" + this.horizontalBreakpoint);
+            }
+            else {
+                classList.push(horizontalClass);
+            }
+        }
+        if (this.color) {
+            classList.push(toTextBgCssClass(this.color));
+        }
+        return classList ? classList.join(" ") : undefined;
+    }
+    generateId() {
+        return `cute-list-${++nextId}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListBase, isStandalone: true, inputs: { flushBorders: "flushBorders", numbered: "numbered", horizontal: "horizontal", horizontalBreakpoint: "horizontalBreakpoint" }, host: { attributes: { "tabindex": "-1" }, properties: { "class.list-group-flush": "!!flushBorders", "class.list-group-numbered": "numbered", "class.cute-list-interactive": "!_isNonInteractive", "attr.aria-disabled": "disabled", "class": "this.getClassList" }, classAttribute: "cute-list-base list-group" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        'class': 'cute-list-base list-group',
+                        '[class.list-group-flush]': '!!flushBorders',
+                        '[class.list-group-numbered]': 'numbered',
+                        '[class.cute-list-interactive]': '!_isNonInteractive',
+                        '[attr.aria-disabled]': 'disabled',
+                        'tabindex': '-1',
+                    }
+                }]
+        }], propDecorators: { flushBorders: [{
+                type: Input
+            }], numbered: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }], horizontalBreakpoint: [{
+                type: Input
+            }], getClassList: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+class CuteActionList extends CuteListBase {
+    constructor() {
+        super(...arguments);
+        // A navigation list is considered interactive, but does not extend the interactive list
+        // base class. We do this because as per MDC, items of interactive lists are only reachable
+        // through keyboard shortcuts. We want all items for the navigation list to be reachable
+        // through a tab key as we do not intend to provide any special accessibility treatment. The
+        // accessibility treatment depends on how the end-user will interact with it.
+        this._isNonInteractive = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteActionList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteActionList, isStandalone: true, selector: "cute-action-list", host: { attributes: { "role": "group" }, classAttribute: "cute-action-list" }, providers: [{ provide: CuteListBase, useExisting: CuteActionList }], exportAs: ["cuteActionList"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteActionList, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-action-list', exportAs: 'cuteActionList', template: '<ng-content></ng-content>', host: {
+                        'class': 'cute-action-list',
+                        'role': 'group',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CuteListBase, useExisting: CuteActionList }], standalone: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"] }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to inject instances of `CuteList`. It serves as
+ * an alternative token to the actual `CuteList` class which could cause unnecessary
+ * retention of the class and its component metadata.
+ */
+const CUTE_LIST = new InjectionToken('CuteList');
+/**
+ * Flexible and powerful component for displaying a series of content.
+ */
+class CuteList extends CuteListBase {
+    constructor() {
+        super();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteList, isStandalone: true, selector: "cute-list", host: { classAttribute: "cute-list" }, providers: [{ provide: CuteListBase, useExisting: CuteList }], exportAs: ["cuteList"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteList, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-list', exportAs: 'cuteList', template: '<ng-content></ng-content>', host: {
+                        'class': 'cute-list',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CuteListBase, useExisting: CuteList }], standalone: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to reference instances of an `ListOption`. It serves
+ *  as an alternative token to an actual implementation which could result in undesired
+ * retention of the class or circular references breaking runtime execution.
+ * @docs-private
+ */
+const LIST_OPTION = new InjectionToken('ListOption');
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Directive capturing the title of a list item. A list item usually consists of a
+ * title and optional secondary or tertiary lines.
+ *
+ * Text content for the title never wraps. There can only be a single title per-list item.
+ */
+class CuteListItemTitle {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemTitle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemTitle, isStandalone: true, selector: "[cuteListItemTitle]", host: { classAttribute: "cute-list-item-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteListItemTitle]',
+                    host: { 'class': 'cute-list-item-title' },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * Directive capturing a line in a list item. A list item usually consists of a
+ * title and optional secondary or tertiary lines.
+ *
+ * Text content inside a line never wraps. There can be at maximum two lines per list item.
+ */
+class CuteListItemLine {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemLine, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemLine, isStandalone: true, selector: "[cuteListItemLine]", host: { classAttribute: "cute-list-item-line" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemLine, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteListItemLine]',
+                    host: { 'class': 'cute-list-item-line' },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * Directive matching an optional meta-section for list items.
+ *
+ * List items can reserve space at the end of an item to display a control,
+ * button or additional text content.
+ */
+class CuteListItemMeta {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemMeta, isStandalone: true, selector: "[cuteListItemMeta]", host: { classAttribute: "cute-list-item-meta" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemMeta, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteListItemMeta]',
+                    host: { 'class': 'cute-list-item-meta' },
+                    standalone: true,
+                }]
+        }] });
+/**
+ * CuteWidgets uses the very intuitively named classes `.cute-list-item__start` and `.cute-list-item__end` to
+ * position content such as icons or checkboxes/radios that comes either before or after the text
+ * content respectively. This directive detects the placement of the checkbox/radio and applies the
+ * correct CuteWidgets class to position the icon/avatar on the opposite side.
+ */
+class _CuteListItemGraphicBase {
+    constructor() {
+        this._listOption = inject(LIST_OPTION, { optional: true });
+    }
+    _isAlignedAtStart() {
+        // By default, in all list items, the graphic is aligned at start. In list options,
+        // the graphic is only aligned at the start if the checkbox/radio is at the end.
+        return !this._listOption || this._listOption?._getTogglePosition() === 'after';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: _CuteListItemGraphicBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: _CuteListItemGraphicBase, isStandalone: true, host: { properties: { "class.cute-list-item__start": "_isAlignedAtStart()", "class.cute-list-item__end": "!_isAlignedAtStart()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: _CuteListItemGraphicBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.cute-list-item__start]': '_isAlignedAtStart()',
+                        '[class.cute-list-item__end]': '!_isAlignedAtStart()',
+                    }
+                }]
+        }] });
+/**
+ * Directive matching an optional avatar within a list item.
+ *
+ * List items can reserve space at the beginning of an item to display an avatar.
+ */
+class CuteListItemAvatar extends _CuteListItemGraphicBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemAvatar, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemAvatar, isStandalone: true, selector: "[cuteListItemAvatar]", host: { classAttribute: "cute-list-item-avatar" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemAvatar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteListItemAvatar]',
+                    host: { 'class': 'cute-list-item-avatar' },
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Directive matching an optional icon within a list item.
+ *
+ * List items can reserve space at the beginning of an item to display an icon.
+ */
+class CuteListItemIcon extends _CuteListItemGraphicBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemIcon, isStandalone: true, selector: "[cuteListItemIcon]", host: { classAttribute: "cute-list-item-icon" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteListItemIcon]',
+                    host: { 'class': 'cute-list-item-icon' },
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to inject instances of `CuteNavList`. It serves as
+ * an alternative token to the actual `CuteNavList` class which could cause unnecessary
+ * retention of the class and its component metadata.
+ */
+const CUTE_NAV_LIST = new InjectionToken('CuteNavList');
+class CuteNavList extends CuteListBase {
+    constructor() {
+        super(...arguments);
+        // A navigation list is considered interactive, but does not extend the interactive list
+        // base class. We do this because as per MDC, items of interactive lists are only reachable
+        // through keyboard shortcuts. We want all items for the navigation list to be reachable
+        // through a tab key as we do not intend to provide any special accessibility treatment. The
+        // accessibility treatment depends on how the end-user will interact with it.
+        this._isNonInteractive = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteNavList, isStandalone: true, selector: "cute-nav-list", host: { attributes: { "role": "navigation" }, classAttribute: "cute-nav-list nav" }, providers: [
+            { provide: CuteListBase, useExisting: CuteNavList },
+            { provide: CUTE_NAV_LIST, useExisting: CuteNavList },
+        ], exportAs: ["cuteNavList"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavList, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-nav-list', exportAs: 'cuteNavList', template: '<ng-content></ng-content>', host: {
+                        'class': 'cute-nav-list nav',
+                        'role': 'navigation',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: CuteListBase, useExisting: CuteNavList },
+                        { provide: CUTE_NAV_LIST, useExisting: CuteNavList },
+                    ], standalone: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"] }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+class CuteListItemBase extends CuteFocusableControl {
+    /**
+     * The number of lines this list item should reserve space for. If not specified,
+     * lines are inferred based on the projected content.
+     *
+     * Explicitly specifying the number of lines is useful if you want to acquire additional
+     * space and enable the wrapping of text. The unscoped text content of a list item will
+     * always be able to take up the remaining space of the item, unless it represents the title.
+     *
+     * A maximum of three lines is supported as per the Material Design specification.
+     */
+    set lines(lines) {
+        this._explicitLines = coerceNumberProperty(lines, null);
+        this._updateItemLines(false);
+    }
+    constructor() {
+        super();
+        this._document = inject(DOCUMENT);
+        this._listBase = inject(CuteListBase, { optional: true });
+        this._ngZone = inject(NgZone);
+        this._navList = inject(CUTE_NAV_LIST, { optional: true });
+        this._isInteractiveItem = false;
+        this.toThemeColor = toThemeColor;
+        /** Whether the list item has unscoped text content. */
+        this._hasUnscopedTextContent = false;
+        this._subscriptions = new Subscription();
+        this._explicitLines = null;
+        const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
+        this._hostElement = this._nativeElement;
+        this._isButtonElement = this._hostElement.nodeName.toLowerCase() === 'button';
+        this._noopAnimations = animationMode === 'NoopAnimations';
+        if (this._listBase && !this._listBase._isNonInteractive) {
+            this._initInteractiveListItem();
+        }
+        // If no type attribute is specified for a host `<button>` element, set it to `button`. If a
+        // type attribute is already specified, we do nothing. We do this for backwards compatibility.
+        // TODO: Determine if we intend to continue doing this for the MDC-based list.
+        // if (this._isButtonElement && !this._hostElement.hasAttribute('type')) {
+        //   this._hostElement.setAttribute('type', 'button');
+        // }
+    }
+    _initInteractiveListItem() {
+        this._isInteractiveItem = true;
+        this._hostElement.classList.add('cute-list-item-interactive');
+        // this._rippleRenderer = new RippleRenderer(
+        //   this,
+        //   this._ngZone,
+        //   this._hostElement,
+        //   this._platform,
+        // );
+        // this._rippleRenderer.setupTriggerEvents(this._hostElement);
+    }
+    /**
+     * Subscribes to changes in the projected title and lines.
+     * Triggers item lines update whenever a change occurs.
+     */
+    _monitorProjectedLinesAndTitle() {
+        this._ngZone.runOutsideAngular(() => {
+            this._subscriptions.add(merge(this._lines.changes, this._titles.changes).subscribe(() => this._updateItemLines(false)));
+        });
+    }
+    /**
+     * Updates the lines of the list item. Based on the projected user content and optional
+     * explicit lines setting, the visual appearance of the list item is determined.
+     *
+     * This method should be invoked whenever the projected user content changes, or
+     * when the explicit lines have been updated.
+     *
+     * @param recheckUnscopedContent Whether the projected unscoped content should be re-checked.
+     *   The unscoped content is not re-checked for every update as it is a rather expensive check
+     *   for content that is expected to not change very often.
+     */
+    _updateItemLines(recheckUnscopedContent) {
+        // If the updated is triggered too early before the view and content are initialized,
+        // we just skip the update. After view initialization, the update is triggered again.
+        if (!this._lines || !this._titles || !this._unscopedContent) {
+            return;
+        }
+        // Re-check the DOM for unscoped text content if requested. This needs to
+        // happen before any computation or sanity checks run as these rely on the
+        // result of whether there is unscoped text content or not.
+        if (recheckUnscopedContent) {
+            this._checkDomForUnscopedTextContent();
+        }
+        // Sanity checks the list item lines and title in the content. This is a dev-mode only
+        // check that can be dead-code eliminated by Terser in production.
+        if (isDevMode()) {
+            sanityCheckListItemContent(this);
+        }
+        const numberOfLines = this._explicitLines ?? this._inferLinesFromContent();
+        const unscopedContentEl = this._unscopedContent.nativeElement;
+        // Update the list item element to reflect the number of lines.
+        this._hostElement.classList.toggle('cute-list-item-single-line', numberOfLines <= 1);
+        this._hostElement.classList.toggle('cute-list-item--with-one-line', numberOfLines <= 1);
+        this._hostElement.classList.toggle('cute-list-item--with-two-lines', numberOfLines === 2);
+        this._hostElement.classList.toggle('cute-list-item--with-three-lines', numberOfLines === 3);
+        // If there is no title and the unscoped content is the only line, the
+        // unscoped text content will be treated as the title of the list-item.
+        if (this._hasUnscopedTextContent) {
+            const treatAsTitle = this._titles.length === 0 && numberOfLines === 1;
+            unscopedContentEl.classList.toggle('cute-list-item__primary-text', treatAsTitle);
+            unscopedContentEl.classList.toggle('cute-list-item__secondary-text', !treatAsTitle);
+        }
+        else {
+            unscopedContentEl.classList.remove('cute-list-item__primary-text');
+            unscopedContentEl.classList.remove('cute-list-item__secondary-text');
+        }
+    }
+    /**
+     * Infers the number of lines based on the projected user content. This is useful
+     * if no explicit number of lines has been specified on the list item.
+     *
+     * The number of lines is inferred based on whether there is a title, the number of
+     * additional lines (secondary/tertiary). An additional line is acquired if there is
+     * unscoped text content.
+     */
+    _inferLinesFromContent() {
+        let numOfLines = this._titles.length + this._lines.length;
+        if (this._hasUnscopedTextContent) {
+            numOfLines += 1;
+        }
+        return numOfLines;
+    }
+    /** Checks whether the list item has unscoped text content. */
+    _checkDomForUnscopedTextContent() {
+        this._hasUnscopedTextContent = Array.from(this._unscopedContent.nativeElement.childNodes)
+            .filter(node => node.nodeType !== node.COMMENT_NODE)
+            .some(node => !!(node.textContent && node.textContent.trim()));
+    }
+    /** Whether the list item has icons or avatars. */
+    _hasIconOrAvatar() {
+        return !!(this._avatars?.length || this._icons?.length);
+    }
+    generateId() {
+        return "";
+    }
+    /**
+     * "Use `a`s or `button`s to create actionable list group items..." (`Bootstrap` docs)
+     * @returns Whether the list item is actionable
+     */
+    isActionItem() {
+        const tag = this._nativeElement.nodeName.toLowerCase();
+        return tag === "a" || tag === "button";
+    }
+    onClick(event) {
+        const elem = event.target;
+        if (elem instanceof HTMLAnchorElement && elem.hash && elem.hash.startsWith("#")) {
+            event.preventDefault();
+            event.stopPropagation();
+            const target = this._document.getElementById(elem.hash.substring(1));
+            if (target) {
+                target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._monitorProjectedLinesAndTitle();
+        this._updateItemLines(true);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._subscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItemBase, isStandalone: true, inputs: { lines: "lines" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "color ? \"list-group-item-\"+ toThemeColor(color) : \"\"", "class.list-group-item-action": "_isInteractiveItem", "class.disabled": "disabled", "attr.aria-disabled": "disabled", "attr.disabled": "(_isButtonElement && disabled) || null" }, classAttribute: "cute-list-item-base list-group-item" }, queries: [{ propertyName: "_avatars", predicate: CuteListItemAvatar }, { propertyName: "_icons", predicate: CuteListItemIcon }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItemBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        'class': 'cute-list-item-base list-group-item',
+                        '[class]': 'color ? "list-group-item-"+ toThemeColor(color) : ""',
+                        //'[class.nav-link]': '_navList',
+                        '[class.list-group-item-action]': '_isInteractiveItem',
+                        '[class.disabled]': 'disabled',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.disabled]': '(_isButtonElement && disabled) || null',
+                        //'[attr.tabindex]': '_isInteractiveItem && !disabled ? 0 : -1',
+                        '(click)': 'onClick($event)',
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { _avatars: [{
+                type: ContentChildren,
+                args: [CuteListItemAvatar, { descendants: false }]
+            }], _icons: [{
+                type: ContentChildren,
+                args: [CuteListItemIcon, { descendants: false }]
+            }], lines: [{
+                type: Input
+            }] } });
+/**
+ * Sanity checks the configuration of the list item with respect to the amount
+ * of lines, whether there is a title, or if there is unscoped text content.
+ *
+ * The checks are extracted into a top-level function that can be dead-code
+ * eliminated by Terser or other optimizers in production mode.
+ */
+function sanityCheckListItemContent(item) {
+    const numTitles = item._titles.length;
+    const numLines = item._lines.length;
+    if (numTitles > 1) {
+        console.warn('A list item cannot have multiple titles.');
+    }
+    if (numTitles === 0 && numLines > 0) {
+        console.warn('A list item line can only be used if there is a list item title.');
+    }
+    if (numTitles === 0 &&
+        item._hasUnscopedTextContent &&
+        item._explicitLines !== null &&
+        item._explicitLines > 1) {
+        console.warn('A list item cannot have wrapping content without a title.');
+    }
+    if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {
+        console.warn('A list item can have at maximum three lines.');
+    }
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+class CuteListItem extends CuteListItemBase {
+    constructor() {
+        super(...arguments);
+        this._activated = false;
+    }
+    /** Indicates whether an item in a `<cute-nav-list>` is the currently active page. */
+    get activated() { return this._activated; }
+    set activated(activated) {
+        this._activated = coerceBooleanProperty(activated);
+    }
+    /**
+     * Determine the value of `aria-current`. Return 'page' if this item is an activated anchor tag.
+     * Otherwise, return `null`. This method is safe to use with server-side rendering.
+     */
+    _getAriaCurrent() {
+        return this._hostElement.nodeName === 'A' && this._activated ? 'page' : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteListItem, isStandalone: true, selector: "cute-list-item, a[cute-list-item], button[cute-list-item]", inputs: { activated: "activated" }, host: { properties: { "class.active": "activated", "attr.aria-current": "_getAriaCurrent()" }, classAttribute: "cute-list-item" }, queries: [{ propertyName: "_lines", predicate: CuteListItemLine, descendants: true }, { propertyName: "_titles", predicate: CuteListItemTitle, descendants: true }, { propertyName: "_meta", predicate: CuteListItemMeta, descendants: true }], viewQueries: [{ propertyName: "_unscopedContent", first: true, predicate: ["unscopedContent"], descendants: true }, { propertyName: "_itemText", first: true, predicate: ["text"], descendants: true }], exportAs: ["cuteListItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n\r\n<div class=\"cute-list-item-content\">\r\n  <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n  <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n  <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n      (cdkObserveContent)=\"_updateItemLines(true)\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</div>\r\n\r\n<ng-content select=\"[cuteListItemMeta]\"></ng-content>\r\n\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n", styles: [".cute-list-item{display:flex;position:relative;justify-content:flex-start;align-items:stretch;pointer-events:auto;cursor:default;width:100%;gap:.5em}.cute-list-item:focus{outline:0}.cute-list-item .cute-list-item-content{width:100%}.cute-list-item .cute-list-item-content .cute-list-item--with-two-lines{height:var(--cute-list-item-with-two-lines, 64px)}.cute-list-item .cute-list-item-content .cute-list-item-title,.cute-list-item .cute-list-item-content cute-list-item__primary-text{font-weight:600}.cute-list-item .cute-list-item-content .cute-list-item-line,.cute-list-item .cute-list-item-content .cute-list-item__secondary-text{font-size:.875em;font-weight:400;line-height:1.25rem}.cute-list-item .cute-list-item-content .cute-list-item-line .cute-list-item:not(:hover),.cute-list-item .cute-list-item-content .cute-list-item__secondary-text .cute-list-item:not(:hover){color:var(--bs-secondary-color)}.cute-list-item .cute-list-item-content .cute-list-item.cute-list-item--with-three-lines .cute-list-item-line.cute-list-item__secondary-text{white-space:nowrap;line-height:normal}.cute-list-item .cute-list-item-content .cute-list-item.cute-list-item--with-three-lines .cute-list-item-unscoped-content.cute-list-item__secondary-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cute-list-item .cute-list-item-icon{margin-top:.25em}.cute-list-item.cute-list-item-interactive{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListItem, decorators: [{
+            type: Component,
+            args: [{ selector: `cute-list-item, a[cute-list-item], button[cute-list-item]`, exportAs: 'cuteListItem', host: {
+                        'class': 'cute-list-item',
+                        '[class.active]': 'activated',
+                        '[attr.aria-current]': '_getAriaCurrent()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkObserveContent], template: "<ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n\r\n<div class=\"cute-list-item-content\">\r\n  <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n  <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n  <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n      (cdkObserveContent)=\"_updateItemLines(true)\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</div>\r\n\r\n<ng-content select=\"[cuteListItemMeta]\"></ng-content>\r\n\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n", styles: [".cute-list-item{display:flex;position:relative;justify-content:flex-start;align-items:stretch;pointer-events:auto;cursor:default;width:100%;gap:.5em}.cute-list-item:focus{outline:0}.cute-list-item .cute-list-item-content{width:100%}.cute-list-item .cute-list-item-content .cute-list-item--with-two-lines{height:var(--cute-list-item-with-two-lines, 64px)}.cute-list-item .cute-list-item-content .cute-list-item-title,.cute-list-item .cute-list-item-content cute-list-item__primary-text{font-weight:600}.cute-list-item .cute-list-item-content .cute-list-item-line,.cute-list-item .cute-list-item-content .cute-list-item__secondary-text{font-size:.875em;font-weight:400;line-height:1.25rem}.cute-list-item .cute-list-item-content .cute-list-item-line .cute-list-item:not(:hover),.cute-list-item .cute-list-item-content .cute-list-item__secondary-text .cute-list-item:not(:hover){color:var(--bs-secondary-color)}.cute-list-item .cute-list-item-content .cute-list-item.cute-list-item--with-three-lines .cute-list-item-line.cute-list-item__secondary-text{white-space:nowrap;line-height:normal}.cute-list-item .cute-list-item-content .cute-list-item.cute-list-item--with-three-lines .cute-list-item-unscoped-content.cute-list-item__secondary-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cute-list-item .cute-list-item-icon{margin-top:.25em}.cute-list-item.cute-list-item-interactive{cursor:pointer}\n"] }]
+        }], propDecorators: { _lines: [{
+                type: ContentChildren,
+                args: [CuteListItemLine, { descendants: true }]
+            }], _titles: [{
+                type: ContentChildren,
+                args: [CuteListItemTitle, { descendants: true }]
+            }], _meta: [{
+                type: ContentChildren,
+                args: [CuteListItemMeta, { descendants: true }]
+            }], _unscopedContent: [{
+                type: ViewChild,
+                args: ['unscopedContent']
+            }], _itemText: [{
+                type: ViewChild,
+                args: ['text']
+            }], activated: [{
+                type: Input
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to reference instances of an `SelectionList`. It serves
+ * as an alternative token to an actual implementation which would result in circular references.
+ */
+const SELECTION_LIST = new InjectionToken('SelectionList');
+class CuteListOption extends CuteListItemBase {
+    constructor() {
+        super(...arguments);
+        this._selectionList = inject(SELECTION_LIST);
+        /**
+         * Emits when the selected state of the option has changed.
+         * Use to facilitate two-data binding to the `selected` property.
+         */
+        this.selectedChange = new EventEmitter();
+        /** Whether the label should appear before or after the checkbox/radio. Defaults to 'after' */
+        this.togglePosition = 'after';
+        this._selected = false;
+        /** Relative size of the internal input element. */
+        this.iconSize = "middle";
+        /**
+         * This is set to true after the first OnChanges cycle, so we don't
+         * clear the value of `selected` in the first cycle.
+         */
+        this._inputsInitialized = false;
+    }
+    /** Value of the option */
+    get value() { return this._value; }
+    set value(newValue) {
+        if (this.selected && newValue !== this.value && this._inputsInitialized) {
+            this.selected = false;
+        }
+        this._value = newValue;
+    }
+    /** Whether the option is selected. */
+    get selected() { return this._selectionList.selectedOptions.isSelected(this); }
+    set selected(value) {
+        const isSelected = coerceBooleanProperty(value);
+        if (isSelected !== this._selected) {
+            this._setSelected(isSelected);
+            if (isSelected || this._selectionList.multiple) {
+                this._selectionList._reportValueChange();
+            }
+        }
+    }
+    get hideIndicator() {
+        return !this._selectionList.multiple && this._selectionList.hideSingleSelectionIndicator;
+    }
+    get hiddenIndicatorSelected() {
+        return this.selected && this.hideIndicator;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const list = this._selectionList;
+        if (list._value && list._value.some(value => list.compareWith(this._value, value))) {
+            this._setSelected(true);
+        }
+        const wasSelected = this._selected;
+        // List options that are selected at initialization can't be reported properly to the form
+        // control. This is because it takes some time until the selection-list knows about all
+        // available options. Also, it can happen that the ControlValueAccessor has an initial value
+        // that should be used instead. Deferring the value change report to the next tick ensures
+        // that the form control value is not being overwritten.
+        Promise.resolve().then(() => {
+            if (this._selected || wasSelected) {
+                this.selected = true;
+                this.markForCheck();
+            }
+        });
+        this._inputsInitialized = true;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.selected) {
+            // We have to delay this until the next tick in order
+            // to avoid changed after checked errors.
+            Promise.resolve().then(() => {
+                this.selected = false;
+            });
+        }
+    }
+    /** Toggles the selection state of the option. */
+    toggle() {
+        this.selected = !this.selected;
+    }
+    /** Gets the text label of the list option. Used for the typeahead functionality in the list. */
+    getLabel() {
+        const titleElement = this._titles?.get(0)?._elementRef.nativeElement;
+        // If there is no explicit title element, the unscoped text content
+        // is treated as the list item title.
+        const labelEl = titleElement || this._unscopedContent?.nativeElement;
+        return labelEl?.textContent || '';
+    }
+    /** Whether a checkbox is shown at the given position. */
+    _hasCheckboxAt(position) {
+        return this._selectionList.multiple && this._getTogglePosition() === position;
+    }
+    /** Where a radio indicator is shown at the given position. */
+    _hasRadioAt(position) {
+        return (!this._selectionList.multiple &&
+            this._getTogglePosition() === position &&
+            !this._selectionList.hideSingleSelectionIndicator);
+    }
+    /** Whether icons or avatars are shown at the given position. */
+    _hasIconsOrAvatarsAt(position) {
+        return this._hasProjected('icons', position) || this._hasProjected('avatars', position);
+    }
+    /** Gets whether the given type of element is projected at the specified position. */
+    _hasProjected(type, position) {
+        // If the checkbox/radio is shown at the specified position, none of the icons or
+        // avatars can be shown at the position.
+        return (this._getTogglePosition() !== position &&
+            (type === 'avatars' ? this._avatars?.length !== 0 : this._icons?.length !== 0));
+    }
+    _handleBlur() {
+        this._selectionList._onTouched();
+    }
+    /** Gets the current position of the checkbox/radio. */
+    _getTogglePosition() {
+        return this.togglePosition || 'after';
+    }
+    /**
+     * Sets the selected state of the option.
+     * @returns Whether the value has changed.
+     * @internal
+     */
+    _setSelected(selected) {
+        if (selected === this._selected) {
+            return false;
+        }
+        this._selected = selected;
+        if (selected) {
+            this._selectionList.selectedOptions.select(this);
+        }
+        else {
+            this._selectionList.selectedOptions.deselect(this);
+        }
+        this.selectedChange.emit(selected);
+        this.markForCheck();
+        return true;
+    }
+    /**
+     * Toggles the option's value based on a user interaction.
+     * @internal
+     */
+    _toggleOnInteraction() {
+        if (!this.disabled) {
+            if (this._selectionList.multiple) {
+                this.selected = !this.selected;
+                this._selectionList._emitChangeEvent([this]);
+            }
+            else if (!this.selected) {
+                this.selected = true;
+                this._selectionList._emitChangeEvent([this]);
+            }
+        }
+    }
+    /** Sets the tabindex of the list option. */
+    _setTabindex(value) {
+        this.setAttribute('tabindex', value + '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteListOption, isStandalone: true, selector: "cute-list-option", inputs: { togglePosition: "togglePosition", value: "value", selected: "selected", iconSize: "iconSize" }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "role": "option" }, listeners: { "blur": "_handleBlur()", "click": "_toggleOnInteraction()" }, properties: { "class.cute-list-option-separated": "hideIndicator", "class.cute-list-item--selected": "hiddenIndicatorSelected", "class.active": "hiddenIndicatorSelected", "attr.aria-selected": "selected" }, classAttribute: "cute-list-option" }, providers: [
+            { provide: CuteListItemBase, useExisting: CuteListOption },
+            { provide: LIST_OPTION, useExisting: CuteListOption },
+        ], queries: [{ propertyName: "_lines", predicate: CuteListItemLine, descendants: true }, { propertyName: "_titles", predicate: CuteListItemTitle, descendants: true }], viewQueries: [{ propertyName: "_unscopedContent", first: true, predicate: ["unscopedContent"], descendants: true }], exportAs: ["cuteListOption"], usesInheritance: true, ngImport: i0, template: "<ng-template #icons>\r\n  <ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n</ng-template>\r\n<ng-template #checkbox>\r\n  <cute-checkbox tabIndex=\"-1\" [checked]=\"selected\" [disabled]=\"disabled\" [iconSize]=\"iconSize\" class=\"pe-none\"></cute-checkbox>\r\n</ng-template>\r\n<ng-template #radio>\r\n  <cute-radio-button tabIndex=\"-1\" [checked]=\"selected\" [disabled]=\"disabled\" [iconSize]=\"iconSize\" class=\"pe-none\"></cute-radio-button>\r\n</ng-template>\r\n\r\n@if (_hasCheckboxAt('before')) {\r\n  <!-- Container for the checkbox at start. -->\r\n  <span class=\"cute-list-option-checkbox-before\">\r\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\r\n  </span>\r\n} @else if (_hasRadioAt('before')) {\r\n  <!-- Container for the radio at the start. -->\r\n  <span class=\"cute-list-option-radio cute-list-option-radio-before\">\r\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\r\n  </span>\r\n}\r\n<!-- Conditionally renders icons/avatars before the list item text. -->\r\n@if (_hasIconsOrAvatarsAt('before')) {\r\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\r\n}\r\n\r\n<!-- Text -->\r\n<span class=\"cute-list-item-content\">\r\n  <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n  <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n  <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n        (cdkObserveContent)=\"_updateItemLines(true)\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasCheckboxAt('after')) {\r\n  <!-- Container for the checkbox at the end. -->\r\n  <span class=\"cute-list-item__end\">\r\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\r\n  </span>\r\n} @else if (_hasRadioAt('after')) {\r\n  <!-- Container for the radio at the end. -->\r\n  <span class=\"cute-list-option-radio cute-list-item__end\">\r\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\r\n  </span>\r\n}\r\n\r\n<!-- Conditionally renders icons/avatars after the list item text. -->\r\n@if (_hasIconsOrAvatarsAt('after')) {\r\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\r\n}\r\n\r\n<!-- Divider -->\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n", styles: [".cute-list-option{display:flex;cursor:pointer}.cute-list-option.disabled .cute-list-item-content{opacity:.5}.cute-list-option.cute-list-option-separated{border-top-width:var(--bs-list-group-border-width);border-radius:var(--bs-border-radius-lg);padding-top:1rem;padding-bottom:1rem}.cute-list-option.cute-list-option-separated[aria-selected=true]{--cute-width: calc(var(--bs-list-group-border-width) * 2)}.cute-list-option.cute-list-option-separated[aria-selected=true]:not(.active){border-color:var(--bs-primary);border-width:var(--cute-width)}.cute-list-option.cute-list-option-separated[aria-selected=true]:focus{border-color:var(--bs-primary)}.cute-list-option.cute-list-item--selected>.cute-list-option-radio{position:absolute;clip:rect(0,0,0,0)}.cute-list-option .cute-list-item-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-option .cute-list-item-title{font-weight:600}.cute-list-option .cute-list-item-line{color:var(--bs-secondary-color);font-size:.875em;font-weight:400;line-height:1.25rem}.cute-list-option .cute-list-item__end .form-check{display:flex;justify-content:flex-end}.cute-list-option .cute-list-item__end .form-check .form-check-input.icon-large{margin-right:auto}[dir=rtl] .cute-list-option .form-check{display:flex;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "component", type: CuteCheckbox, selector: "cute-checkbox, cute-slide-toggle:not([cuteToggleSwitch])", inputs: ["aria-expanded", "aria-controls", "aria-owns", "value", "valueOn", "valueOff", "inline", "checked", "indeterminate", "labelPosition", "disabledInteractive", "iconSize"], outputs: ["change", "indeterminateChange"], exportAs: ["cuteCheckbox"] }, { kind: "component", type: CuteRadioButton, selector: "cute-radio-button", inputs: ["checked", "inline", "labelPosition", "value", "disabledInteractive", "iconSize"], outputs: ["change"], exportAs: ["cuteRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-list-option', exportAs: 'cuteListOption', host: {
+                        'class': 'cute-list-option', // list-group-item-action',
+                        '[class.cute-list-option-separated]': 'hideIndicator',
+                        '[class.cute-list-item--selected]': 'hiddenIndicatorSelected',
+                        '[class.active]': 'hiddenIndicatorSelected',
+                        '[attr.aria-selected]': 'selected',
+                        //'[style.cursor]': '"pointer"',
+                        'role': 'option',
+                        '(blur)': '_handleBlur()',
+                        '(click)': '_toggleOnInteraction()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: CuteListItemBase, useExisting: CuteListOption },
+                        { provide: LIST_OPTION, useExisting: CuteListOption },
+                    ], imports: [
+                        CdkObserveContent,
+                        CuteCheckbox,
+                        CuteRadioButton,
+                        NgTemplateOutlet
+                    ], template: "<ng-template #icons>\r\n  <ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n</ng-template>\r\n<ng-template #checkbox>\r\n  <cute-checkbox tabIndex=\"-1\" [checked]=\"selected\" [disabled]=\"disabled\" [iconSize]=\"iconSize\" class=\"pe-none\"></cute-checkbox>\r\n</ng-template>\r\n<ng-template #radio>\r\n  <cute-radio-button tabIndex=\"-1\" [checked]=\"selected\" [disabled]=\"disabled\" [iconSize]=\"iconSize\" class=\"pe-none\"></cute-radio-button>\r\n</ng-template>\r\n\r\n@if (_hasCheckboxAt('before')) {\r\n  <!-- Container for the checkbox at start. -->\r\n  <span class=\"cute-list-option-checkbox-before\">\r\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\r\n  </span>\r\n} @else if (_hasRadioAt('before')) {\r\n  <!-- Container for the radio at the start. -->\r\n  <span class=\"cute-list-option-radio cute-list-option-radio-before\">\r\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\r\n  </span>\r\n}\r\n<!-- Conditionally renders icons/avatars before the list item text. -->\r\n@if (_hasIconsOrAvatarsAt('before')) {\r\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\r\n}\r\n\r\n<!-- Text -->\r\n<span class=\"cute-list-item-content\">\r\n  <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n  <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n  <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n        (cdkObserveContent)=\"_updateItemLines(true)\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasCheckboxAt('after')) {\r\n  <!-- Container for the checkbox at the end. -->\r\n  <span class=\"cute-list-item__end\">\r\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\r\n  </span>\r\n} @else if (_hasRadioAt('after')) {\r\n  <!-- Container for the radio at the end. -->\r\n  <span class=\"cute-list-option-radio cute-list-item__end\">\r\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\r\n  </span>\r\n}\r\n\r\n<!-- Conditionally renders icons/avatars after the list item text. -->\r\n@if (_hasIconsOrAvatarsAt('after')) {\r\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\r\n}\r\n\r\n<!-- Divider -->\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n", styles: [".cute-list-option{display:flex;cursor:pointer}.cute-list-option.disabled .cute-list-item-content{opacity:.5}.cute-list-option.cute-list-option-separated{border-top-width:var(--bs-list-group-border-width);border-radius:var(--bs-border-radius-lg);padding-top:1rem;padding-bottom:1rem}.cute-list-option.cute-list-option-separated[aria-selected=true]{--cute-width: calc(var(--bs-list-group-border-width) * 2)}.cute-list-option.cute-list-option-separated[aria-selected=true]:not(.active){border-color:var(--bs-primary);border-width:var(--cute-width)}.cute-list-option.cute-list-option-separated[aria-selected=true]:focus{border-color:var(--bs-primary)}.cute-list-option.cute-list-item--selected>.cute-list-option-radio{position:absolute;clip:rect(0,0,0,0)}.cute-list-option .cute-list-item-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-option .cute-list-item-title{font-weight:600}.cute-list-option .cute-list-item-line{color:var(--bs-secondary-color);font-size:.875em;font-weight:400;line-height:1.25rem}.cute-list-option .cute-list-item__end .form-check{display:flex;justify-content:flex-end}.cute-list-option .cute-list-item__end .form-check .form-check-input.icon-large{margin-right:auto}[dir=rtl] .cute-list-option .form-check{display:flex;justify-content:flex-start}\n"] }]
+        }], propDecorators: { _lines: [{
+                type: ContentChildren,
+                args: [CuteListItemLine, { descendants: true }]
+            }], _titles: [{
+                type: ContentChildren,
+                args: [CuteListItemTitle, { descendants: true }]
+            }], _unscopedContent: [{
+                type: ViewChild,
+                args: ['unscopedContent']
+            }], selectedChange: [{
+                type: Output
+            }], togglePosition: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * An item within a listbox.
+ *
+ * @experimental
+ */
+class CuteListBoxOption extends CuteListItem {
+    /** The value of this option */
+    get value() { return this.cdkOption.value; }
+    set value(v) { this.cdkOption.value = v; }
+    /** Whether the option is selected or not. */
+    get selected() {
+        return this.cdkOption.isSelected();
+    }
+    constructor(listBox) {
+        super(listBox);
+        this.listBox = listBox;
+        this.cdkOption = inject(CdkOption);
+        this.role = "option";
+    }
+    /** Sets focus to this option */
+    focus() {
+        this.cdkOption.focus();
+    }
+    /** Gets the option's label that is part of the `FocusableOption` interface */
+    getLabel() {
+        return this.cdkOption.getLabel();
+    }
+    /** Whether this option is active */
+    isActive() {
+        return this.cdkOption.isActive();
+    }
+    /** Select this option if it is not selected */
+    select() {
+        this.cdkOption.select();
+    }
+    /** Deselect this option if it is selected */
+    deselect() {
+        this.cdkOption.deselect();
+    }
+    /** Toggle the selected state of this option */
+    toggle() {
+        this.cdkOption.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBoxOption, deps: [{ token: CuteListBox }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteListBoxOption, isStandalone: true, selector: "cute-listbox-option, a[cute-listbox-option], button[cute-listbox-option]", inputs: { value: "value" }, host: { properties: { "class.active": "selected", "class.disabled": "disabled", "attr.aria-disabled": "disabled", "attr.aria-selected": "selected", "attr.aria-current": "_getAriaCurrent()", "attr.role": "role", "attr.tabindex": "-1" }, classAttribute: "cute-listbox-option" }, exportAs: ["cuteListboxOption"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkOption, inputs: ["cdkOption", "value", "cdkOptionTypeaheadLabel", "typeaheadLabel", "cdkOptionDisabled", "disabled", "tabindex", "tabindex", "id", "id"] }], ngImport: i0, template: "<ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n\r\n<span class=\"cute-list-item-content\">\r\n        <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n        <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n        <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n              (cdkObserveContent)=\"_updateItemLines(true)\">\r\n          <ng-content></ng-content>\r\n        </span>\r\n      </span>\r\n\r\n<ng-content select=\"[cuteListItemMeta]\"></ng-content>\r\n\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBoxOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-listbox-option, a[cute-listbox-option], button[cute-listbox-option]', exportAs: 'cuteListboxOption', host: {
+                        'class': 'cute-listbox-option',
+                        '[class.active]': 'selected',
+                        '[class.disabled]': 'disabled',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-selected]': 'selected',
+                        '[attr.aria-current]': '_getAriaCurrent()',
+                        '[attr.role]': 'role',
+                        '[attr.tabindex]': '-1',
+                    }, imports: [CdkListboxModule, CdkObserveContent], hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: [
+                                'cdkOption: value',
+                                'cdkOptionTypeaheadLabel: typeaheadLabel',
+                                'cdkOptionDisabled: disabled',
+                                'tabindex',
+                                'id',
+                            ],
+                            outputs: [],
+                        }
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[cuteListItemAvatar],[cuteListItemIcon]\"></ng-content>\r\n\r\n<span class=\"cute-list-item-content\">\r\n        <ng-content select=\"[cuteListItemTitle]\"></ng-content>\r\n        <ng-content select=\"[cuteListItemLine]\"></ng-content>\r\n        <span #unscopedContent class=\"cute-list-item-content-unscoped\"\r\n              (cdkObserveContent)=\"_updateItemLines(true)\">\r\n          <ng-content></ng-content>\r\n        </span>\r\n      </span>\r\n\r\n<ng-content select=\"[cuteListItemMeta]\"></ng-content>\r\n\r\n<ng-content select=\"cute-divider\"></ng-content>\r\n\r\n<!--\r\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\r\n  focus/hover/selected state, so we need a separate element.\r\n-->\r\n<!--<div class=\"cute-focus-indicator\"></div>-->\r\n" }]
+        }], ctorParameters: () => [{ type: CuteListBox }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Injection token that can be used to inject instances of `CuteListBox`. It serves as
+ * an alternative token to the actual `CuteListBox` class which could cause unnecessary
+ * retention of the class and its component metadata.
+ */
+const CUTE_LISTBOX = new InjectionToken('CuteListBox');
+/**
+ * A component that displays a list of options for users to select from, supporting keyboard navigation,
+ * single or multiple selection, and screen reader support.
+ *
+ * @experimental
+ */
+class CuteListBox extends CuteListBase {
+    constructor() {
+        super();
+        this.cdkListbox = inject(CdkListbox);
+        this.role = "listbox";
+        this._isNonInteractive = false;
+    }
+    /** Deselect the given option */
+    deselect(option) {
+        this.cdkListbox.deselect(option);
+    }
+    /** Deselect the given value */
+    deselectValue(value) {
+        this.cdkListbox.deselectValue(value);
+    }
+    /** Focus the list-box's host element */
+    focus() {
+        this.cdkListbox.focus();
+    }
+    /** Get whether the given option is active. */
+    isActive(option) {
+        return this.cdkListbox.isActive(option);
+    }
+    /** Get whether the given option is selected. */
+    isSelected(option) {
+        return this.cdkListbox.isSelected(option);
+    }
+    /** Get whether the given value is selected. */
+    isValueSelected(value) {
+        return this.cdkListbox.isValueSelected(value);
+    }
+    /** Select the given option. */
+    select(option) {
+        this.cdkListbox.select(option);
+    }
+    /** Select the given value. */
+    selectValue(value) {
+        this.cdkListbox.selectValue(value);
+    }
+    /** Set the selected state of all options. */
+    setAllSelected(isSelected) {
+        this.cdkListbox.setAllSelected(isSelected);
+    }
+    /** Toggle the selected state of the given option. */
+    toggle(option) {
+        this.cdkListbox.toggle(option);
+    }
+    /** Toggle the selected state of the given value. */
+    toggleValue(value) {
+        this.cdkListbox.toggleValue(value);
+    }
+    registerOnChange(fn) {
+        this.cdkListbox.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this.cdkListbox.registerOnTouched(fn);
+    }
+    writeValue(obj) {
+        this.cdkListbox.writeValue(obj);
+    }
+    setDisabledState(newState) {
+        if (super.setDisabledState(newState)) {
+            this.cdkListbox.setDisabledState(newState);
+            return true;
+        }
+        return false;
+    }
+    _handleKeydown(event) {
+        this._keyManager?.onKeydown(event);
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this._options) {
+            this._keyManager = new ListKeyManager(this._options);
+            this._keyManager
+                .withVerticalOrientation()
+                .withHomeAndEnd()
+                .withPageUpDown()
+                .withWrap()
+                .withTypeAhead()
+                .skipPredicate(item => item.disabled);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._keyManager?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteListBox, isStandalone: true, selector: "cute-listbox", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-multiselectable": "cdkListbox.multiple", "attr.aria-orientation": "cdkListbox.orientation", "attr.role": "role" } }, providers: [{ provide: CuteListBase, useExisting: CuteListBox }], queries: [{ propertyName: "_options", predicate: CuteListBoxOption, descendants: true }], exportAs: ["cuteListBox"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkListbox, inputs: ["id", "id", "tabindex", "tabindex", "cdkListboxMultiple", "multiple", "cdkListboxValue", "value", "cdkListboxDisabled", "disabled", "cdkListboxUseActiveDescendant", "useActiveDescendant", "cdkListboxOrientation", "orientation", "cdkListboxNavigationWrapDisabled", "navigationWrapDisabled", "cdkListboxCompareWith", "compareWith", "cdkListboxNavigatesDisabledOptions", "navigatesDisabledOptions"], outputs: ["cdkListboxValueChange", "valueChange"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CdkListboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-listbox', template: '<ng-content></ng-content>', exportAs: 'cuteListBox', host: {
+                        '[attr.aria-multiselectable]': 'cdkListbox.multiple',
+                        '[attr.aria-orientation]': 'cdkListbox.orientation',
+                        '[attr.role]': 'role',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, imports: [CdkListboxModule], hostDirectives: [
+                        { directive: CdkListbox,
+                            inputs: [
+                                'id',
+                                'tabindex',
+                                'cdkListboxMultiple: multiple',
+                                'cdkListboxValue: value',
+                                'cdkListboxDisabled: disabled',
+                                'cdkListboxUseActiveDescendant: useActiveDescendant',
+                                'cdkListboxOrientation: orientation',
+                                'cdkListboxNavigationWrapDisabled: navigationWrapDisabled',
+                                'cdkListboxCompareWith: compareWith',
+                                'cdkListboxNavigatesDisabledOptions: navigatesDisabledOptions'
+                            ],
+                            outputs: ['cdkListboxValueChange: valueChange']
+                        }
+                    ], providers: [{ provide: CuteListBase, useExisting: CuteListBox }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _options: [{
+                type: ContentChildren,
+                args: [CuteListBoxOption, { descendants: true }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+const CUTE_SELECTION_LIST_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CuteSelectionList),
+    multi: true,
+};
+/** Change event that is being fired whenever the selected state of an option changes. */
+class CuteSelectionListChange {
+    constructor(
+    /** Reference to the selection list that emitted the event. */
+    source, 
+    /** Reference to the options that have been changed. */
+    options) {
+        this.source = source;
+        this.options = options;
+    }
+}
+class CuteSelectionList extends CuteListBase {
+    /** Whether selection is limited to one or multiple items (default multiple). */
+    get multiple() { return this._multiple; }
+    set multiple(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this._multiple) {
+            if (isDevMode() && this._initialized) {
+                throw new Error('Cannot change `multiple` mode of cute-selection-list after initialization.');
+            }
+            this._multiple = newValue;
+            this.selectedOptions = new SelectionModel(this._multiple, this.selectedOptions.selected);
+        }
+    }
+    /** Whether radio indicator for all list items is hidden. */
+    get hideSingleSelectionIndicator() { return this._hideSingleSelectionIndicator; }
+    set hideSingleSelectionIndicator(value) {
+        this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
+    }
+    constructor() {
+        super();
+        this._element = inject(ElementRef);
+        this._ngZone = inject(NgZone);
+        this._initialized = false;
+        /** Subject that emits when the component has been destroyed. */
+        this._destroyed = new Subject();
+        /** Whether the list has been destroyed. */
+        this._isDestroyed = false;
+        /** View to model callback that should be called whenever the selected options change. */
+        this._onChange = (_) => { };
+        /** Emits a change event whenever the selected state of an option changes. */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Function used for comparing an option against the selected value when determining which
+         * options should appear as selected. The first argument is the value of an options. The second
+         * one is a value from the selected value. A boolean must be returned.
+         */
+        this.compareWith = (a1, a2) => a1 === a2;
+        this._multiple = true;
+        this._hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
+        /** The currently selected options. */
+        this.selectedOptions = new SelectionModel(this._multiple);
+        /** Keeps track of the currently selected value. */
+        this._value = null;
+        /** View to model callback that should be called if the list or its options lost focus. */
+        this._onTouched = () => { };
+        this._selectionListDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_selectionListDisabled" }] : []));
+        /** Handles focusout events within the list. */
+        this._handleFocusout = () => {
+            // Focus takes a while to update, so we have to wrap our call in a timeout.
+            setTimeout(() => {
+                if (!this._containsFocus()) {
+                    this._resetActiveOption();
+                }
+            });
+        };
+        /** Handles focusin events within the list. */
+        this._handleFocusin = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            const activeIndex = this._items?.toArray()
+                .findIndex(item => item.contains(event.target)) ?? -1;
+            if (activeIndex > -1) {
+                this._setActiveOption(activeIndex);
+            }
+            else {
+                this._resetActiveOption();
+            }
+        };
+        this._isNonInteractive = false;
+        //this.color = "primary";
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // Mark the selection list as initialized so that the `multiple`
+        // binding can no longer be changed.
+        this._initialized = true;
+        this._setupRovingTabindex();
+        // These events are bound outside the zone, because they don't change
+        // any change-detected properties, and they can trigger timeouts.
+        this._ngZone.runOutsideAngular(() => {
+            this._listenerCleanups = [
+                this._renderer.listen(this._element.nativeElement, 'focusin', this._handleFocusin),
+                this._renderer.listen(this._element.nativeElement, 'focusout', this._handleFocusout),
+            ];
+        });
+        if (this._value) {
+            this._setOptionsFromValues(this._value);
+        }
+        this._watchForSelectionChange();
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const disabledChanges = changes['disabled'];
+        const disableRippleChanges = changes['disableRipple'];
+        const hideSingleSelectionIndicatorChanges = changes['hideSingleSelectionIndicator'];
+        if ((disableRippleChanges && !disableRippleChanges.firstChange) ||
+            (disabledChanges && !disabledChanges.firstChange) ||
+            (hideSingleSelectionIndicatorChanges && !hideSingleSelectionIndicatorChanges.firstChange)) {
+            this._markOptionsForCheck();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._keyManager?.destroy();
+        this._listenerCleanups?.forEach(current => current());
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._isDestroyed = true;
+    }
+    /** Selects all the options. Returns the options that changed as a result. */
+    selectAll() {
+        return this._setAllOptionsSelected(true);
+    }
+    /** Deselects all the options. Returns the options that changed as a result. */
+    deselectAll() {
+        return this._setAllOptionsSelected(false);
+    }
+    /** Reports a value change to the ControlValueAccessor */
+    _reportValueChange() {
+        // Stop reporting value changes after the list has been destroyed. This avoids
+        // cases where the list might wrongly reset its value once it is removed, but
+        // the form of control is still live.
+        if (this.options && !this._isDestroyed) {
+            const value = this._getSelectedOptionValues();
+            this._onChange(value);
+            this._value = value;
+        }
+    }
+    /** Emits a change event if the selected state of an option changed. */
+    _emitChangeEvent(options) {
+        this.selectionChange.emit(new CuteSelectionListChange(this, options));
+    }
+    /** Implemented as part of ControlValueAccessor. */
+    writeValue(values) {
+        this._value = values;
+        if (this.options) {
+            this._setOptionsFromValues(values || []);
+        }
+    }
+    /**
+     * Whether the *entire* selection list is disabled. When true, each list item is also disabled,
+     * and each list item is removed from the tab order (has tabindex="-1").
+     */
+    getDisabledState() { return this._selectionListDisabled(); }
+    /** Implemented as a part of ControlValueAccessor. */
+    setDisabledState(value) {
+        // Update the disabled state of this list. Write to `this._selectionListDisabled` instead of
+        // `super.disabled`. That is to avoid closure compiler compatibility issues with assigning to
+        // a super property.
+        this._selectionListDisabled.set(coerceBooleanProperty(value));
+        if (this._selectionListDisabled()) {
+            this._keyManager?.setActiveItem(-1);
+        }
+        return true;
+    }
+    /** Implemented as part of ControlValueAccessor. */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /** Implemented as part of ControlValueAccessor. */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** Watches for changes in the selected state of the options and updates the list accordingly. */
+    _watchForSelectionChange() {
+        this.selectedOptions.changed.pipe(takeUntil(this._destroyed)).subscribe(event => {
+            // Sync external changes to the model back to the options.
+            for (let item of event.added) {
+                item.selected = true;
+            }
+            for (let item of event.removed) {
+                item.selected = false;
+            }
+            if (!this._containsFocus()) {
+                this._resetActiveOption();
+            }
+        });
+    }
+    /** Sets the selected options based on the specified values. */
+    _setOptionsFromValues(values) {
+        this.options?.forEach(option => option._setSelected(false));
+        values.forEach(value => {
+            const correspondingOption = this.options?.find(option => {
+                // Skip options that are already in the model. This allows us to handle cases
+                // where the same primitive value is selected multiple times.
+                return option.selected ? false : this.compareWith(option.value, value);
+            });
+            if (correspondingOption) {
+                correspondingOption._setSelected(true);
+            }
+        });
+    }
+    /** Returns the values of the selected options. */
+    _getSelectedOptionValues() {
+        return this.options?.filter(option => option.selected).map(option => option.value) ?? [];
+    }
+    /** Marks all the options to be checked in the next change detection run. */
+    _markOptionsForCheck() {
+        if (this.options) {
+            this.options.forEach(option => option.markForCheck());
+        }
+    }
+    /**
+     * Sets the selected state on all the options
+     * and emits an event if anything changed.
+     */
+    _setAllOptionsSelected(isSelected, skipDisabled) {
+        // Keep track of whether anything changed, because we only want to
+        // emit the changed event when something actually changed.
+        const changedOptions = [];
+        this.options?.forEach(option => {
+            if ((!skipDisabled || !option.disabled) && option._setSelected(isSelected)) {
+                changedOptions.push(option);
+            }
+        });
+        if (changedOptions.length) {
+            this._reportValueChange();
+        }
+        return changedOptions;
+    }
+    // Note: This getter exists for backwards compatibility. The `_items` query list
+    // cannot be named `options` as it will be picked up by the interactive list base.
+    /** The option components contained within this selection-list. */
+    get options() {
+        return this._items;
+    }
+    /** Handles keydown events within the list. */
+    _handleKeydown(event) {
+        const activeItem = this._keyManager?.activeItem;
+        if ((event.code === "Enter" || event.code === "Space") &&
+            !this._keyManager?.isTyping() &&
+            activeItem &&
+            !activeItem.disabled) {
+            event.preventDefault();
+            activeItem._toggleOnInteraction();
+        }
+        else if (event.code === "KeyA" &&
+            this.multiple &&
+            !this._keyManager?.isTyping() &&
+            hasModifierKey(event, 'ctrlKey')) {
+            const shouldSelect = this.options?.some(option => !option.disabled && !option.selected) || false;
+            event.preventDefault();
+            this._emitChangeEvent(this._setAllOptionsSelected(shouldSelect, true));
+        }
+        else {
+            this._keyManager?.onKeydown(event);
+        }
+    }
+    /**
+     * Sets up the logic for maintaining the roving tabindex.
+     *
+     * `skipPredicate` determines if key manager should avoid putting a given list item in the tab
+     * index. Allow disabled list items to receive focus to align with WAI ARIA recommendation.
+     * Normally WAI ARIA's instructions are to exclude disabled items from the tab order, but it
+     * makes a few exceptions for compound widgets.
+     *
+     * From [Developing a Keyboard Interface](
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):
+     *   "For the following composite widget elements, keep them focusable when disabled: Options in a
+     *   Listbox..."
+     */
+    _setupRovingTabindex() {
+        if (this._items) {
+            this._keyManager = new FocusKeyManager(this._items)
+                .withHomeAndEnd()
+                .withTypeAhead()
+                .withWrap()
+                .skipPredicate((item) => item.disabled || this.disabled);
+            // Set the initial focus.
+            this._resetActiveOption();
+            // Move the tabindex to the currently focused list item.
+            this._keyManager.change.subscribe(activeItemIndex => this._setActiveOption(activeItemIndex));
+            // If the active item is removed from the list, reset back to the first one.
+            this._items.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+                const activeItem = this._keyManager.activeItem;
+                if (!activeItem || !this._items?.toArray().indexOf(activeItem)) {
+                    this._resetActiveOption();
+                }
+            });
+        }
+    }
+    /**
+     * Sets an option as active.
+     * @param index Index of the active option. If set to -1, no option will be active.
+     */
+    _setActiveOption(index) {
+        this._items?.forEach((item, itemIndex) => item._setTabindex(itemIndex === index ? 0 : -1));
+        this._keyManager?.updateActiveItem(index);
+    }
+    /**
+     * Resets the active option. When the list is disabled, remove all options from to the tab order.
+     * Otherwise, focus on the first selected option.
+     */
+    _resetActiveOption() {
+        if (this.disabled) {
+            this._setActiveOption(-1);
+            return;
+        }
+        if (!this._items) {
+            return;
+        }
+        const activeItem = this._items.find(item => item.selected && !item.disabled) || this._items.first;
+        this._setActiveOption(activeItem ? this._items.toArray().indexOf(activeItem) : -1);
+    }
+    /** Returns whether the focus is currently within the list. */
+    _containsFocus() {
+        const activeElement = _getFocusedElementPierceShadowDom();
+        return activeElement && this._element.nativeElement.contains(activeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelectionList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteSelectionList, isStandalone: true, selector: "cute-selection-list", inputs: { compareWith: "compareWith", multiple: "multiple", hideSingleSelectionIndicator: "hideSingleSelectionIndicator" }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.gap-2": "!multiple && hideSingleSelectionIndicator", "attr.aria-multiselectable": "multiple" }, classAttribute: "cute-selection-list" }, providers: [
+            CUTE_SELECTION_LIST_VALUE_ACCESSOR,
+            { provide: CuteListBase, useExisting: CuteSelectionList },
+            { provide: SELECTION_LIST, useExisting: CuteSelectionList },
+        ], queries: [{ propertyName: "_items", predicate: CuteListOption, descendants: true }], exportAs: ["cuteSelectionList"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelectionList, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-selection-list', template: '<ng-content></ng-content>', exportAs: 'cuteSelectionList', host: {
+                        'class': 'cute-selection-list',
+                        '[class.gap-2]': '!multiple && hideSingleSelectionIndicator',
+                        'role': 'listbox',
+                        '[attr.aria-multiselectable]': 'multiple',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, providers: [
+                        CUTE_SELECTION_LIST_VALUE_ACCESSOR,
+                        { provide: CuteListBase, useExisting: CuteSelectionList },
+                        { provide: SELECTION_LIST, useExisting: CuteSelectionList },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".cute-list-base{overflow-y:auto;width:100%}.cute-list-base .cute-list-item-title,.cute-list-base .cute-list-item-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-list-base .cute-list-group__subheader{padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x)}.cute-list-base.list-group-numbered>.list-group-item:before{width:1em}.cute-list-base.list-group-flush[flushborders=full]{border:none;border-radius:var(--bs-border-radius)}.cute-list-base.list-group-flush[flushborders=full].cute-thematic-widget .list-group-item{background-color:initial!important}.cute-list-base.list-group-flush[flushborders=full] .list-group-item{border:none;border-radius:var(--bs-border-radius)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:not(.active):hover{background-color:var(--bs-secondary-bg)}.cute-list-interactive .cute-list-base.list-group-flush[flushborders=full] .list-group-item:active:hover{background-color:var(--bs-secondary-bg-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _items: [{
+                type: ContentChildren,
+                args: [CuteListOption, { descendants: true }]
+            }], selectionChange: [{
+                type: Output
+            }], compareWith: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], hideSingleSelectionIndicator: [{
+                type: Input
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Directive whose purpose is to add the `cute-` CSS styling to this selector.
+ */
+class CuteListSubheaderCssStyler {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListSubheaderCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteListSubheaderCssStyler, isStandalone: true, selector: "[cute-subheader], [cuteSubheader]", host: { classAttribute: "cute-subheader cute-list-group__subheader" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListSubheaderCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cute-subheader], [cuteSubheader]',
+                    // TODO(mmalerba): MDC's subheader font looks identical to the list item font, figure out why and
+                    //  make a change in one of the repos to visually distinguish.
+                    host: { 'class': 'cute-subheader cute-list-group__subheader' },
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+const TYPES = [
+    CuteActionList,
+    CuteList,
+    CuteListItem,
+    CuteListItemLine,
+    CuteListItemTitle,
+    CuteListItemMeta,
+    CuteListItemAvatar,
+    CuteListItemIcon,
+    CuteListOption,
+    CuteListSubheaderCssStyler,
+    CuteListBox,
+    CuteListBoxOption,
+    CuteNavList,
+    CuteSelectionList,
+];
+class CuteListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteListModule, imports: [CommonModule, CuteActionList,
+            CuteList,
+            CuteListItem,
+            CuteListItemLine,
+            CuteListItemTitle,
+            CuteListItemMeta,
+            CuteListItemAvatar,
+            CuteListItemIcon,
+            CuteListOption,
+            CuteListSubheaderCssStyler,
+            CuteListBox,
+            CuteListBoxOption,
+            CuteNavList,
+            CuteSelectionList], exports: [CuteActionList,
+            CuteList,
+            CuteListItem,
+            CuteListItemLine,
+            CuteListItemTitle,
+            CuteListItemMeta,
+            CuteListItemAvatar,
+            CuteListItemIcon,
+            CuteListOption,
+            CuteListSubheaderCssStyler,
+            CuteListBox,
+            CuteListBoxOption,
+            CuteNavList,
+            CuteSelectionList] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListModule, imports: [CommonModule, CuteListOption,
+            CuteListBox,
+            CuteListBoxOption] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, ...TYPES],
+                    exports: [...TYPES]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_LIST, CUTE_LISTBOX, CUTE_LIST_CONFIG, CUTE_NAV_LIST, CUTE_SELECTION_LIST_VALUE_ACCESSOR, CuteActionList, CuteList, CuteListBase, CuteListBox, CuteListBoxOption, CuteListItem, CuteListItemAvatar, CuteListItemIcon, CuteListItemLine, CuteListItemMeta, CuteListItemTitle, CuteListModule, CuteListOption, CuteListSubheaderCssStyler, CuteNavList, CuteSelectionList, CuteSelectionListChange, SELECTION_LIST, _CuteListItemGraphicBase };
+//# sourceMappingURL=cute-widgets-base-list.mjs.map