@basis-ng/primitives 0.0.1-alpha.87 → 0.0.1-alpha.89

package/fesm2022/basis-ng-primitives.mjs

@@ -1,21 +1,22 @@
 import * as i0 from '@angular/core';
-import { signal, inject, RendererFactory2, PLATFORM_ID, Injectable, input, ElementRef, Component, TemplateRef, Directive, computed, output, contentChildren, effect, viewChild, contentChild, linkedSignal, model, forwardRef, HostListener, afterNextRender, afterRenderEffect, ViewEncapsulation, EventEmitter, ChangeDetectorRef, Pipe } from '@angular/core';
-import { isPlatformBrowser, NgStyle, NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { signal, inject, RendererFactory2, PLATFORM_ID, Injectable, input, ElementRef, Component, TemplateRef, Directive, computed, model, linkedSignal, output, effect, contentChildren, contentChild, forwardRef, HostListener, afterRenderEffect, ViewEncapsulation, ChangeDetectorRef, Pipe } from '@angular/core';
+import { isPlatformBrowser, NgClass, NgStyle, CommonModule } from '@angular/common';
 import { NgModel, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
-import * as i1 from '@angular/cdk/listbox';
-import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
-import { DomSanitizer } from '@angular/platform-browser';
-import { icons, createElement } from 'lucide';
-import * as i1$1 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
-import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/listbox';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import { ConnectedOverlay as ConnectedOverlay$1 } from 'projects/primitives/src/core/directives/connected-overlay';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideLoaderCircle, lucideLoader, lucideGripVertical, lucideX } from '@ng-icons/lucide';
 import * as i1$2 from '@angular/cdk/drag-drop';
-import { CdkDropList, CdkDropListGroup, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuItem, CdkMenuGroup, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { CdkDialogContainer, DialogRef, Dialog } from '@angular/cdk/dialog';
+import { CdkDialogContainer, DialogRef, Dialog as Dialog$1 } from '@angular/cdk/dialog';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
 import { HttpClient } from '@angular/common/http';
 
 class ThemeService {
@@ -95,62 +96,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Button component that provides various styles and configurations.
+ * Button component for displaying a clickable button element with configurable variant, size, and shape.
+ *
+ * @public
  */
-class ButtonComponent {
+class Button {
     /**
-     * Defines the visual style of the button.
+     * The visual variant of the button.
      *
      * @defaultValue 'primary'
      */
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /**
-     * Specifies the size of the button.
-     *
-     * @defaultValue '2'
-     */
-    size = input('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /**
-     * Determines whether the button has an active state enabled.
+     * The size of the button.
      *
-     * @defaultValue true
+     * @defaultValue 'md'
      */
-    activeEnabled = input(true, ...(ngDevMode ? [{ debugName: "activeEnabled" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Indicates whether the button should have squared corners.
+     * If true, the button will have squared edges.
      *
      * @defaultValue false
      */
     squared = input(false, ...(ngDevMode ? [{ debugName: "squared" }] : []));
     /**
-     * Reference to the host DOM element.
+     * Reference to the underlying DOM element.
      */
     el = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: ButtonComponent, isStandalone: true, selector: "button[b-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeEnabled: { classPropertyName: "activeEnabled", publicName: "activeEnabled", isSignal: true, isRequired: false, transformFunction: null }, squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" size-\" + size()", "class.active": "activeEnabled()", "class.squared": "squared()" } }, ngImport: i0, template: ` <ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Button, isStandalone: true, selector: "button[b-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.b-variant-primary": "variant() === \"primary\"", "class.b-variant-secondary": "variant() === \"secondary\"", "class.b-variant-ghost": "variant() === \"ghost\"", "class.b-variant-outlined": "variant() === \"outlined\"", "class.b-variant-destructive": "variant() === \"destructive\"", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"", "class.b-squared": "squared()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[b-button]',
-                    template: ` <ng-content />`,
+                    template: ` <ng-content /> `,
                     host: {
-                        '[class]': 'variant() + " size-" + size()',
-                        '[class.active]': 'activeEnabled()',
-                        '[class.squared]': 'squared()',
+                        '[class.b-variant-primary]': 'variant() === "primary"',
+                        '[class.b-variant-secondary]': 'variant() === "secondary"',
+                        '[class.b-variant-ghost]': 'variant() === "ghost"',
+                        '[class.b-variant-outlined]': 'variant() === "outlined"',
+                        '[class.b-variant-destructive]': 'variant() === "destructive"',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
+                        '[class.b-squared]': 'squared()',
                     },
                 }]
         }] });
 
-class ButtonGroupComponent {
+class ButtonGroup {
     /**
      * Whether the buttons should be spaced.
+     *
+     * @defaultValue false
      */
     spaced = input(false, ...(ngDevMode ? [{ debugName: "spaced" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: ButtonGroupComponent, isStandalone: true, selector: "b-button-group", inputs: { spaced: { classPropertyName: "spaced", publicName: "spaced", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.spaced": "spaced()" }, classAttribute: "button-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: ButtonGroup, isStandalone: true, selector: "b-button-group", inputs: { spaced: { classPropertyName: "spaced", publicName: "spaced", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.spaced": "spaced()" }, classAttribute: "button-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-button-group',
@@ -175,15 +180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class InputComponent {
+class Input {
     /**
      * The type of the input.
      */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    /**
-     * The maximum width of the input.
-     */
-    maxWidth = input('', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     /**
      * The number of decimal places for number input.
      */
@@ -207,7 +208,7 @@ class InputComponent {
     /**
      * The size of the input.
      */
-    size = input('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * After the view has been initialized, set the value of the select.
      */
@@ -273,264 +274,42 @@ class InputComponent {
             this.setValue(formattedValue || '');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: InputComponent, isStandalone: true, selector: "input[b-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, numberType: { classPropertyName: "numberType", publicName: "numberType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "type": "type()", "style.max-width": "maxWidth()", "class": " \"size-\" + size() " } }, exportAs: ["bInput"], ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Input, isStandalone: true, selector: "input[b-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, numberType: { classPropertyName: "numberType", publicName: "numberType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "type": "type()", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, exportAs: ["bInput"], ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Input, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-input]',
                     template: ``,
                     host: {
                         '[type]': 'type()',
-                        '[style.max-width]': 'maxWidth()',
                         '(input)': 'onInput($event)',
                         '(blur)': 'onBlur($event)',
-                        '[class]': ' "size-" + size() ',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                     exportAs: 'bInput',
                 }]
         }] });
 
-/**
- * Component representing an individual option in a select or combobox.
- * This component integrates with Angular CDK Option to manage the option's state and behavior.
- */
-class OptionComponent {
-    /**
-     * The `ElementRef` of the option.
-     * This provides direct access to the DOM element of the option.
-     */
-    el = inject(ElementRef);
-    /**
-     * The `CdkOption` instance associated with this option.
-     * This provides methods and properties for managing the option's state, such as selection and value.
-     */
-    cdkOption = inject(CdkOption);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: OptionComponent, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'li[b-option]',
-                    imports: [],
-                    template: `<ng-content />`,
-                    hostDirectives: [
-                        {
-                            directive: CdkOption,
-                            inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * Component representing the list of options in a select.
- * This component integrates with Angular CDK Listbox to manage options and their selection.
- */
-class SelectOptionsComponent {
-    /**
-     * Signal representing the selected values in the listbox.
-     * This is an array of strings corresponding to the selected option values.
-     */
-    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /**
-     * Event emitter triggered when the dropdown should close.
-     * This is used to notify the parent component to close the dropdown.
-     */
-    closeEmitter = output();
-    /**
-     * Reference to the host element of the component.
-     * This provides access to the DOM element of the options list.
-     */
-    el = inject(ElementRef);
-    /**
-     * Input for setting the maximum height of the dropdown.
-     * Defaults to '300px'. This controls the vertical size of the dropdown.
-     */
-    maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
-    /**
-     * No options message displayed when there are no available options in the dropdown.
-     */
-    noOptionsMessage = input('', ...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : []));
-    /**
-     * Signal indicating whether multiple selections are allowed.
-     * If true, the select component allows selecting multiple options.
-     */
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    /**
-     * Reference to the CDK Listbox directive.
-     * This is used to manage the options and their selection state.
-     */
-    listBox = inject(CdkListbox);
-    /**
-     * Reference to the list of options in the dropdown.
-     * This is a collection of `OptionComponent` instances representing the available options.
-     */
-    options = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /**
-     * Handles changes to the selected value in the listbox.
-     * This method updates the `value` signal, emits the `closeEmitter` event,
-     * and ensures the parent component is notified of the selection change.
-     *
-     * @param value - The new array of selected values.
-     */
-    handleValueChange(value) {
-        // If the value is an empty array or contains a single empty string, clear the selection.
-        if (value.length === 1 && value[0] === '') {
-            this.value.set([]);
-            if (!this.multiple()) {
-                this.closeEmitter.emit();
-            }
-            return;
-        }
-        this.value.set(value);
-        if (!this.multiple()) {
-            this.closeEmitter.emit();
-        }
-    }
-    onEnter() {
-        if (!this.multiple()) {
-            this.closeEmitter.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectOptionsComponent, isStandalone: true, selector: "ul[b-select-options]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "onEnter()" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue", "cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
-    @if (options().length === 0) {
-      <div class="no-options-message">
-        {{ noOptionsMessage() }}
-      </div>
-    }`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectOptionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ul[b-select-options]',
-                    imports: [],
-                    template: `<ng-content />
-    @if (options().length === 0) {
-      <div class="no-options-message">
-        {{ noOptionsMessage() }}
-      </div>
-    }`,
-                    hostDirectives: [
-                        {
-                            directive: CdkListbox,
-                            inputs: ['cdkListboxValue', 'cdkListboxMultiple: multiple'],
-                            outputs: ['cdkListboxValueChange'],
-                        },
-                    ],
-                    host: {
-                        '[cdkListboxValue]': 'value()',
-                        '(cdkListboxValueChange)': 'handleValueChange($event.value)',
-                        '[style.max-height]': 'maxHeight()',
-                        '(keydown.enter)': 'onEnter()',
-                    },
-                }]
-        }] });
-
-class IconComponent {
-    /**
-     * The sanitizer service.
-     */
-    sanitizer = inject(DomSanitizer);
-    /**
-     * The icon of the text field.
-     */
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
-    /**
-     * The size of the icon.
-     */
-    size = input(24, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /**
-     * The stroke of the icon.
-     */
-    strokeWidth = input(1.8, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
-    /**
-     * The color of the icon.
-     */
-    color = input('var(--foreground, #798194)', ...(ngDevMode ? [{ debugName: "color" }] : []));
-    /**
-     * The svg of the icon.
-     */
-    iconSvg = computed(() => {
-        if (!icons[this.icon()]) {
-            console.error(`Icon '${this.icon()}' not found in Lucide icons.`);
-            return this.sanitizer.bypassSecurityTrustHtml('');
-        }
-        const iconSvg = createElement(icons[this.icon()], {
-            width: this.size(),
-            height: this.size(),
-            stroke: this.color(),
-            'stroke-width': this.strokeWidth(),
-        });
-        return this.sanitizer.bypassSecurityTrustHtml(iconSvg.outerHTML);
-    }, ...(ngDevMode ? [{ debugName: "iconSvg" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: IconComponent, isStandalone: true, selector: "i[b-icon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSvg()" } }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'i[b-icon]',
-                    imports: [],
-                    template: ``,
-                    host: {
-                        '[innerHTML]': 'iconSvg()',
-                    },
-                }]
-        }] });
-
-/**
- * Directive to mark an element as a trigger for an overlay.
- * Integrates with Angular CDK's `CdkOverlayOrigin` to provide
- * a reference point for overlay positioning.
- */
-class OverlayTriggerDirective {
-    /**
-     * Reference to the `CdkOverlayOrigin` instance.
-     * Used as the origin point for overlay positioning.
-     */
-    trigger = inject(CdkOverlayOrigin);
-    /**
-     * Reference to the `ElementRef` of the host element.
-     * This is used to access the native DOM element.
-     */
-    el = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: OverlayTriggerDirective, isStandalone: true, selector: "[bOverlayTrigger]", exportAs: ["bOverlayTrigger"], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bOverlayTrigger]',
-                    hostDirectives: [CdkOverlayOrigin],
-                    exportAs: 'bOverlayTrigger',
-                }]
-        }] });
-
 /**
  * Directive to manage overlay behavior and positioning.
  * Integrates with Angular CDK's `CdkConnectedOverlay` to provide
  * flexible overlay positioning and triggering mechanisms.
  */
-class OverlayDirective {
+class ConnectedOverlay {
     /**
      * Controls whether the overlay is open.
      * @default false
      */
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /**
      * The trigger directive that activates the overlay.
      * This input is required.
      */
     trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
-    /**
-     * Delay in milliseconds before closing the overlay.
-     * @default 0
-     */
-    closeDelay = input(0, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
     /**
      * A computed map of positions to their corresponding `ConnectedPosition` configurations.
      */
@@ -540,72 +319,96 @@ class OverlayDirective {
             originY: 'top',
             overlayX: 'start',
             overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
         },
         'top-center': {
             originX: 'center',
             originY: 'top',
             overlayX: 'center',
             overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
         },
         'top-right': {
             originX: 'end',
             originY: 'top',
             overlayX: 'end',
             overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
         },
         'bottom-left': {
             originX: 'start',
             originY: 'bottom',
             overlayX: 'start',
             overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
         },
         'bottom-center': {
             originX: 'center',
             originY: 'bottom',
             overlayX: 'center',
             overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
         },
         'bottom-right': {
             originX: 'end',
             originY: 'bottom',
             overlayX: 'end',
             overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
         },
         'left-top': {
             originX: 'start',
             originY: 'top',
             overlayX: 'end',
             overlayY: 'top',
+            offsetX: -4,
+            offsetY: 0,
         },
         'left-center': {
             originX: 'start',
             originY: 'center',
             overlayX: 'end',
             overlayY: 'center',
+            offsetX: -4,
+            offsetY: 0,
         },
         'left-bottom': {
             originX: 'start',
             originY: 'bottom',
             overlayX: 'end',
             overlayY: 'bottom',
+            offsetX: -4,
+            offsetY: 0,
         },
         'right-top': {
             originX: 'end',
             originY: 'top',
             overlayX: 'start',
             overlayY: 'top',
+            offsetX: 4,
+            offsetY: 0,
         },
         'right-center': {
             originX: 'end',
             originY: 'center',
             overlayX: 'start',
             overlayY: 'center',
+            offsetX: 4,
+            offsetY: 0,
         },
         'right-bottom': {
             originX: 'end',
             originY: 'bottom',
             overlayX: 'start',
             overlayY: 'bottom',
+            offsetX: 4,
+            offsetY: 0,
         },
     }), ...(ngDevMode ? [{ debugName: "positionsMap" }] : []));
     /**
@@ -613,6 +416,11 @@ class OverlayDirective {
      * @default ['bottom-left']
      */
     positions = input(['bottom-left'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
+    /**
+     * Controls whether the trigger element should be focused when the overlay is closed.
+     * @default true
+     */
+    focusTriggerOnClose = input(true, ...(ngDevMode ? [{ debugName: "focusTriggerOnClose" }] : []));
     /**
      * Computed list of `ConnectedPosition` objects based on the `positions` input.
      */
@@ -620,7 +428,7 @@ class OverlayDirective {
     /**
      * Signal to track the currently active `ConnectionPositionPair`.
      */
-    connectedPositionPair = signal(undefined, ...(ngDevMode ? [{ debugName: "connectedPositionPair" }] : []));
+    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0]);
     /**
      * Injected instance of `CdkConnectedOverlay`.
      */
@@ -634,8 +442,6 @@ class OverlayDirective {
      */
     direction = computed(() => {
         const pair = this.connectedPositionPair();
-        if (!pair)
-            return undefined;
         return Object.entries(this.positionsMap())
             .find(([, position]) => position.originX === pair.originX &&
             position.originY === pair.originY &&
@@ -643,6 +449,22 @@ class OverlayDirective {
             position.overlayY === pair.overlayY)?.[0]
             .split('-')[0];
     }, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Event emitter for overlay detach events.
+     */
+    detachEmitter = output();
+    /**
+     * Event emitter for overlay attach events.
+     */
+    attachEmitter = output();
+    /**
+     * Event emitter for overlay outside click events.
+     */
+    outsideClickEmitter = output();
+    /**
+     * Event emitter for overlay backdrop click events.
+     */
+    backdropClickEmitter = output();
     /**
      * Flag to indicate if this is the first load of the overlay.
      */
@@ -677,267 +499,390 @@ class OverlayDirective {
      */
     handleOpen() {
         if (this.open()) {
-            this.handleOverlayOpen();
+            this.cdkConnectedOverlay.attachOverlay();
         }
         else {
-            if (!this.firstLoad)
-                this.handleOverlayClose();
-            this.firstLoad = false;
-        }
-    }
-    /**
-     * Opens the overlay and applies the appropriate direction class.
-     * Ensures the overlay is attached and styled correctly.
-     */
-    handleOverlayOpen() {
-        this.cdkConnectedOverlay.attachOverlay();
-        this.applyDirectionClass();
-    }
-    /**
-     * Closes the overlay with optional animation and cleanup.
-     * If it's the first load, detaches the overlay immediately without animation.
-     */
-    handleOverlayClose() {
-        const firstChild = this.getFirstChild();
-        if (!firstChild) {
-            this.detachOverlayWithCleanup();
-            return;
+            this.cdkConnectedOverlay.detachOverlay();
+            if (this.focusTriggerOnClose())
+                this.trigger().el.nativeElement.focus();
         }
-        firstChild.classList.add('b-overlay-leave');
-        setTimeout(() => this.detachOverlayWithCleanup(firstChild), this.closeDelay());
-    }
-    /**
-     * Retrieves the first child element of the overlay pane.
-     * @returns The first child element or `null` if not found.
-     */
-    getFirstChild() {
-        return (this.cdkConnectedOverlay.overlayRef?.overlayElement.querySelector('.cdk-overlay-pane > *') || null);
     }
     /**
-     * Applies the direction class to the overlay's first child element.
-     * Cleans up any existing direction-related classes before applying the new one.
+     * Toggles the open state of the overlay.
+     * If the overlay is open, it will be closed, and vice versa.
      */
-    applyDirectionClass() {
-        const firstChild = this.getFirstChild();
-        if (!firstChild)
-            return;
-        this.cleanOverlayClasses(firstChild);
-        const direction = this.direction();
-        if (direction) {
-            firstChild.classList.add(`b-overlay-${direction}`);
-        }
+    toggleOverlay() {
+        this.open.set(!this.open());
     }
     /**
-     * Detaches the overlay and performs cleanup operations.
-     * Optionally cleans up classes from a provided element.
-     * @param element The element to clean up classes from (optional).
+     * Closes the overlay by setting the `open` state to false.
      */
-    detachOverlayWithCleanup(element) {
-        this.cdkConnectedOverlay.detachOverlay();
-        if (element) {
-            this.cleanOverlayClasses(element);
-        }
-        this.trigger().el.nativeElement.focus();
+    closeOverlay() {
+        this.open.set(false);
     }
     /**
-     * Removes overlay-related classes from the specified element.
-     * @param element The element to remove classes from.
+     * Opens the overlay by setting the `open` state to true.
      */
-    cleanOverlayClasses(element) {
-        const classesToRemove = [
-            'b-overlay-leave',
-            'b-overlay-top',
-            'b-overlay-bottom',
-            'b-overlay-left',
-            'b-overlay-right',
-        ];
-        element.classList.remove(...classesToRemove);
+    openOverlay() {
+        this.open.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: OverlayDirective, isStandalone: true, selector: "[bOverlay]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "positionChange": "connectedPositionPair.set($event.connectionPair)" } }, hostDirectives: [{ directive: i1$1.CdkConnectedOverlay, inputs: ["cdkConnectedOverlayWidth", "width", "cdkConnectedOverlayMinWidth", "minWidth", "cdkConnectedOverlayHasBackdrop", "hasBackdrop", "cdkConnectedOverlayBackdropClass", "customBackdropClass"], outputs: ["backdropClick", "backdropClick", "detach", "detach", "attach", "attach", "overlayOutsideClick", "outsideClick", "positionChange", "positionChange"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: ConnectedOverlay, isStandalone: true, selector: "[bConnectedOverlay]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, focusTriggerOnClose: { classPropertyName: "focusTriggerOnClose", publicName: "focusTriggerOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", detachEmitter: "detachEmitter", attachEmitter: "attachEmitter", outsideClickEmitter: "outsideClickEmitter", backdropClickEmitter: "backdropClickEmitter" }, host: { listeners: { "positionChange": "connectedPositionPair.set($event.connectionPair)", "detach": "detachEmitter.emit()", "attach": "attachEmitter.emit()", "outsideClick": "outsideClickEmitter.emit()", "backdropClick": "backdropClickEmitter.emit()" } }, hostDirectives: [{ directive: i1.CdkConnectedOverlay, inputs: ["cdkConnectedOverlayWidth", "width", "cdkConnectedOverlayMinWidth", "minWidth", "cdkConnectedOverlayBackdropClass", "customBackdropClass", "cdkConnectedOverlayPanelClass", "panelClass"], outputs: ["detach", "detach", "attach", "attach", "overlayOutsideClick", "outsideClick", "backdropClick", "backdropClick", "positionChange", "positionChange"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConnectedOverlay, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bOverlay]',
+                    selector: '[bConnectedOverlay]',
                     hostDirectives: [
                         {
                             directive: CdkConnectedOverlay,
                             inputs: [
                                 'cdkConnectedOverlayWidth: width',
                                 'cdkConnectedOverlayMinWidth: minWidth',
-                                'cdkConnectedOverlayHasBackdrop: hasBackdrop',
                                 'cdkConnectedOverlayBackdropClass: customBackdropClass',
+                                'cdkConnectedOverlayPanelClass: panelClass',
                             ],
                             outputs: [
-                                'backdropClick: backdropClick',
                                 'detach: detach',
                                 'attach: attach',
                                 'overlayOutsideClick: outsideClick',
+                                'backdropClick: backdropClick',
                                 'positionChange: positionChange',
                             ],
                         },
                     ],
                     host: {
                         '(positionChange)': 'connectedPositionPair.set($event.connectionPair)',
+                        '(detach)': 'detachEmitter.emit()',
+                        '(attach)': 'attachEmitter.emit()',
+                        '(outsideClick)': 'outsideClickEmitter.emit()',
+                        '(backdropClick)': 'backdropClickEmitter.emit()',
                     },
                 }]
         }], ctorParameters: () => [] });
 
 /**
- * Component representing a custom select dropdown.
- * This component provides a button to toggle the dropdown and displays the selected option(s).
+ * Component representing the trigger button for the select dropdown.
+ * Handles user interactions to open or close the select.
  */
-class SelectComponent {
+class SelectTrigger {
     /**
-     * Placeholder text displayed when no option is selected.
+     * Reference to the host element of the trigger button.
      */
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /**
-     * Signal indicating whether the dropdown is currently open.
-     */
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    el = inject(ElementRef);
     /**
-     * Reference to the button element used to toggle the dropdown.
-     * This is used for managing focus and interactions.
-     */
-    button = viewChild(ButtonComponent, ...(ngDevMode ? [{ debugName: "button" }] : []));
+     * Event emitter for button click and keydown events.
+     */
+    buttonClicked = output();
+    /**
+     * Signal indicating whether the trigger is disabled.
+     */
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: SelectTrigger, isStandalone: true, selector: "button[b-select-trigger]", outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "keydown.arrowUp": "buttonClicked.emit()", "keydown.arrowDown": "buttonClicked.emit()", "click": "buttonClicked.emit()" }, properties: { "disabled": "disabled()" } }, ngImport: i0, template: `<ng-content />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-chevron-down-icon lucide-chevron-down">
+      <path d="m6 9 6 6 6-6" />
+    </svg> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[b-select-trigger]',
+                    template: `<ng-content />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-chevron-down-icon lucide-chevron-down">
+      <path d="m6 9 6 6 6-6" />
+    </svg> `,
+                    host: {
+                        '(keydown.arrowUp)': 'buttonClicked.emit()',
+                        '(keydown.arrowDown)': 'buttonClicked.emit()',
+                        '(click)': 'buttonClicked.emit()',
+                        '[disabled]': 'disabled()',
+                    },
+                }]
+        }] });
+
+/**
+ * Component for displaying the selected value or a placeholder in the select dropdown.
+ */
+class SelectValue {
     /**
-     * Reference to the content component of the dropdown.
-     * This contains the list of selectable options.
+     * Reference to the host element of the value display.
      */
-    optionsList = contentChild(SelectOptionsComponent, ...(ngDevMode ? [{ debugName: "optionsList" }] : []));
+    el = inject(ElementRef);
     /**
-     * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `OptionsListComponent`.
+     * Signal holding the display content for the selected value.
      */
-    value = linkedSignal(() => this.optionsList()?.value());
+    content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
     /**
-     * Linked signal for the width of the button element.
-     * This is used to set the width of the dropdown overlay.
+     * Input signal for the placeholder text when no value is selected.
+     * @param value - The placeholder string to display.
      */
-    buttonWidth = linkedSignal(() => this.button()?.el.nativeElement.offsetWidth);
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SelectValue, isStandalone: true, selector: "b-select-value", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `{{ content() || placeholder() }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectValue, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-select-value',
+                    template: `{{ content() || placeholder() }}`,
+                }]
+        }] });
+
+/**
+ * Component representing the content of a select dropdown.
+ * Manages the list of options and their selection state.
+ */
+class SelectContent {
     /**
-     * Model indicating whether the select component is disabled.
-     * When disabled, the dropdown cannot be opened or interacted with.
+     * Reference to the host element of the component.
      */
-    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    el = inject(ElementRef);
     /**
-     * Computed signal indicating whether multiple selections are allowed.
-     * This retrieves the `multiple` property from the `OptionsListComponent`.
+     * Reference to the CDK Listbox directive.
      */
-    multiple = computed(() => this.optionsList()?.multiple() ?? false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    listBox = inject(CdkListbox);
     /**
-     * Computed signal representing the options available in the dropdown.
-     * This retrieves the options from the `OptionsListComponent`.
+     * Collection of CdkOption elements within the listbox.
      */
-    options = computed(() => this.optionsList()?.options(), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    options = contentChildren(CdkOption, ...(ngDevMode ? [{ debugName: "options" }] : []));
     /**
-     * Computed signal representing the content of the selected option(s).
-     * If no option is selected, it returns the placeholder text.
+     * Key manager for handling keyboard navigation and active descendant management.
      */
-    content = computed(() => {
-        const selected = this.value();
-        if (selected &&
-            selected.length > 0 &&
-            !(selected.length === 1 && selected[0] === '')) {
-            return this.options()?.reduce((acc, option) => {
-                if (selected.includes(option.cdkOption.value)) {
-                    return acc
-                        ? acc + ', ' + option.el.nativeElement.innerText
-                        : option.el.nativeElement.innerText;
-                }
-                return acc;
-            }, '');
-        }
-        else {
-            return this.placeholder();
-        }
-    }, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.options())
+        .withWrap()
+        .withVerticalOrientation(), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
     /**
-     * Signal representing the delay before closing the dropdown.
-     * This is used to provide a smooth transition when closing the dropdown.
+     * Event emitter that emits when the value changes.
      */
-    closeDelay = signal(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
+    changeValueEmitter = output();
     /**
-     * Lifecycle hook that is called after the component is initialized.
-     * It sets up the necessary subscriptions for handling value changes.
+     * Input signal indicating whether multiple selections are allowed.
      */
-    ngOnInit() {
-        this.handleSelectedValueChange();
-    }
+    multiple = model(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     /**
-     * Subscribes to the `closeEmitter` of the `OptionsListComponent` to handle
-     * changes to the selected value. This ensures the dropdown closes and the
-     * value is propagated to Angular Forms.
+     * Reference to the ConnectedOverlay to determine the direction of the overlay.
      */
-    handleSelectedValueChange() {
-        this.optionsList()?.closeEmitter.subscribe(() => {
-            this.onChange(this.value());
-            this.onTouched();
-            this.isOpen.set(false);
-        });
-    }
+    overlay = inject(ConnectedOverlay$1);
     /**
-     * Focuses the options list when the overlay is attached.
+     * Computed signal representing the direction of the overlay.
      */
-    onOverlayAttached() {
-        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
-        this.optionsList()?.el.nativeElement.focus();
-    }
+    direction = computed(() => this.overlay.direction(), ...(ngDevMode ? [{ debugName: "direction" }] : []));
     /**
-     * Sets the width of the dropdown overlay based on the button's width.
-     * This ensures that the dropdown aligns properly with the button.
+     * Lifecycle hook that initializes the component.
+     * Enables the use of active descendant for the listbox.
      */
-    setButtonWidth() {
-        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
+    ngOnInit() {
+        this.listBox.useActiveDescendant = true;
     }
-    // Control Value Accessor methods
-    /**
-     * Callback function to propagate changes to the model.
-     * This is called whenever the value changes.
-     */
-    onChange = () => undefined;
-    /**
-     * Callback function to mark the component as touched.
-     * This is called when the component loses focus.
-     */
-    onTouched = () => undefined;
-    /**
-     * Writes a new value to the component.
-     * This method is called by Angular Forms to update the value of the select component.
-     * @param value - The new value to set.
-     */
-    writeValue(value) {
-        if (!value) {
-            return;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: SelectContent, isStandalone: true, selector: "ul[b-select-content]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValueEmitter: "changeValueEmitter", multiple: "multipleChange" }, host: { listeners: { "cdkListboxValueChange": "changeValueEmitter.emit($event.value)" }, properties: { "animate.enter": "\"b-select-content-entering-\" + this.direction()", "animate.leave": "\"b-select-content-leaving-\" + this.direction()" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkListbox, inputs: ["cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ul[b-select-content]',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: ['cdkListboxMultiple: multiple'],
+                            outputs: ['cdkListboxValueChange'],
+                        },
+                    ],
+                    host: {
+                        '(cdkListboxValueChange)': 'changeValueEmitter.emit($event.value)',
+                        '[animate.enter]': '"b-select-content-entering-" + this.direction()',
+                        '[animate.leave]': '"b-select-content-leaving-" + this.direction()',
+                    },
+                }]
+        }] });
+
+/**
+ * Select component that provides a customizable dropdown selection interface.
+ * Implements ControlValueAccessor for form integration.
+ */
+class Select {
+    /**
+     * Reference to the overlay directive instance.
+     * Used to control the dropdown overlay for the select component.
+     */
+    overlay = contentChild(ConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    /**
+     * Reference to the select trigger component.
+     * Used to handle trigger events (click, keydown) for opening/closing the select.
+     */
+    selectTrigger = contentChild(SelectTrigger, ...(ngDevMode ? [{ debugName: "selectTrigger" }] : []));
+    /**
+     * Reference to the select value component.
+     * Used to display the selected value(s).
+     */
+    selectValue = contentChild(SelectValue, ...(ngDevMode ? [{ debugName: "selectValue" }] : []));
+    /**
+     * Reference to the select content component.
+     * Used to manage the list of selectable options.
+     */
+    selectContent = contentChild(SelectContent, ...(ngDevMode ? [{ debugName: "selectContent" }] : []));
+    /**
+     * Input signal for the size of the select component.
+     * Can be 'sm', 'md', or 'lg'. Default is 'md'.
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Input signal for a function to display the selected value(s).
+     * This function receives the value array and returns a string for display.
+     */
+    displayWith = input.required(...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /**
+     * Signal holding the current selected value(s).
+     */
+    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Initializes effects for value changes and content width adjustment.
+     */
+    constructor() {
+        effect(() => {
+            this.handleValueChanges();
+            this.handleSelectContentWidth();
+        });
+    }
+    /**
+     * Subscribes to value changes from the select content and updates the model.
+     * Closes the overlay if not in multiple selection mode.
+     */
+    handleValueChanges() {
+        this.selectContent()?.changeValueEmitter.subscribe((value) => {
+            this.onChange(value);
+            if (!this.selectContent()?.listBox.multiple) {
+                this.overlay()?.closeOverlay();
+            }
+            this.onTouched();
+        });
+    }
+    /**
+     * Sets the minimum width of the select content to match the trigger width.
+     */
+    handleSelectContentWidth() {
+        const selectContentEl = this.selectContent()?.el.nativeElement;
+        if (selectContentEl) {
+            selectContentEl.style.minWidth = `${this.selectTrigger()?.el.nativeElement.offsetWidth}px`;
         }
-        const values = this.multiple()
-            ? Array.isArray(value)
-                ? value
-                : [value]
-            : [typeof value === 'string' ? value : value?.[0]];
-        if (values) {
-            values.forEach(val => {
-                this.optionsList()?.listBox?.selectValue(val);
+    }
+    /**
+     * Angular lifecycle hook. Sets up event handlers for overlay and trigger interactions.
+     */
+    ngOnInit() {
+        this.handleTriggerClicks();
+        this.handleOverlayAttached();
+        this.handleOverlayDetached();
+        this.handleOverlayOutsideClick();
+        this.handleOverlayBackdropClick();
+        this.handlePanelSizeClass();
+    }
+    /**
+     * Handles clicks and keydown events on the select trigger to toggle the overlay.
+     */
+    handleTriggerClicks() {
+        this.selectTrigger().buttonClicked.subscribe(() => {
+            this.overlay()?.toggleOverlay();
+        });
+    }
+    /**
+     * Handles overlay attachment event. Selects current values and focuses the content.
+     */
+    handleOverlayAttached() {
+        this.overlay()?.attachEmitter.subscribe(() => {
+            if (this.value().length === 0) {
+                this.selectContent()?.el.nativeElement.focus();
+                return;
+            }
+            this.value().forEach(val => {
+                this.selectContent()?.listBox?.selectValue(val);
+                // Focus the selected option
+                this.selectContent()
+                    ?.options()
+                    .find(opt => opt.value === val)
+                    ?.focus();
             });
-            this.value.set(values);
-        }
+        });
+    }
+    /**
+     * Handles overlay detachment event. Closes the overlay.
+     */
+    handleOverlayDetached() {
+        this.overlay()?.detachEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
+    }
+    /**
+     * Handles outside click event on the overlay. Closes the overlay.
+     */
+    handleOverlayOutsideClick() {
+        this.overlay()?.outsideClickEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
+    }
+    /**
+     * Handles backdrop click event on the overlay. Closes the overlay.
+     */
+    handleOverlayBackdropClick() {
+        this.overlay()?.backdropClickEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
+    }
+    /**
+     * Sets the panel size class on the overlay based on the select size input.
+     */
+    handlePanelSizeClass() {
+        this.overlay().cdkConnectedOverlay.panelClass = `b-size-${this.size()}`;
+    }
+    // Control value accessor methods
+    /**
+     * Writes a new value to the select component.
+     * @param value - The new value array to set.
+     */
+    writeValue(value) {
+        this.setValue(value);
     }
+    /**
+     * Callback for value changes. Set by registerOnChange.
+     */
+    onChange = () => undefined;
     /**
      * Registers a callback function to be called when the value changes.
      * @param fn - The callback function.
      */
     registerOnChange(fn) {
         this.onChange = (val) => {
-            if (this.multiple()) {
-                fn(val);
-            }
-            else {
-                fn(val?.[0] ?? '');
-            }
+            fn(val);
+            this.setValue(val);
         };
     }
+    /**
+     * Callback for touch events. Set by registerOnTouched.
+     */
+    onTouched = () => undefined;
     /**
      * Registers a callback function to be called when the component is touched.
      * @param fn - The callback function.
@@ -946,116 +891,152 @@ class SelectComponent {
         this.onTouched = fn;
     }
     /**
-     * Sets the disabled state of the component.
-     * This method is called by Angular Forms to enable or disable the component.
-     * @param isDisabled - A boolean indicating whether the component should be disabled.
+     * Sets the disabled state of the select trigger.
+     * @param isDisabled - Whether the select should be disabled.
      */
     setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
+        this.selectTrigger()?.disabled.set(isDisabled);
+    }
+    /**
+     * Sets the value signal and updates the display value.
+     * @param value - The new value array to set.
+     */
+    setValue(value) {
+        this.value.set(value);
+        this.selectValue()?.content.set(this.displayWith()(value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "window:resize": "setButtonWidth()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: Select, isStandalone: true, selector: "b-select", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SelectComponent),
+                useExisting: forwardRef(() => Select),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionsList", first: true, predicate: SelectOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen.set(!isOpen())"
-      (keydown.arrowUp)="!isOpen() && isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && isOpen.set(true)"
-      [activeEnabled]="false"
-      bOverlayTrigger
-      #trigger="bOverlayTrigger"
-      [disabled]="disabled()">
-      <span>{{ content() }}</span>
-      <i b-icon icon="ChevronDown" [size]="16"></i>
-    </button>
-    <ng-template
-      bOverlay
-      [trigger]="trigger"
-      [open]="isOpen()"
-      [minWidth]="buttonWidth()"
-      [positions]="['bottom-left', 'bottom-right', 'top-left', 'top-right']"
-      [closeDelay]="closeDelay()"
-      (attach)="onOverlayAttached()"
-      (outsideClick)="isOpen.set(false)"
-      (detach)="isOpen.set(false)">
-      <ng-content />
-    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[b-button]", inputs: ["variant", "size", "activeEnabled", "squared"] }, { kind: "component", type: IconComponent, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: OverlayTriggerDirective, selector: "[bOverlayTrigger]", exportAs: ["bOverlayTrigger"] }, { kind: "directive", type: OverlayDirective, selector: "[bOverlay]", inputs: ["open", "trigger", "closeDelay", "positions"] }] });
+        ], queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "selectValue", first: true, predicate: SelectValue, descendants: true, isSignal: true }, { propertyName: "selectContent", first: true, predicate: SelectContent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Select, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-select',
-                    imports: [
-                        ButtonComponent,
-                        IconComponent,
-                        OverlayTriggerDirective,
-                        OverlayDirective,
-                    ],
-                    template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen.set(!isOpen())"
-      (keydown.arrowUp)="!isOpen() && isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && isOpen.set(true)"
-      [activeEnabled]="false"
-      bOverlayTrigger
-      #trigger="bOverlayTrigger"
-      [disabled]="disabled()">
-      <span>{{ content() }}</span>
-      <i b-icon icon="ChevronDown" [size]="16"></i>
-    </button>
-    <ng-template
-      bOverlay
-      [trigger]="trigger"
-      [open]="isOpen()"
-      [minWidth]="buttonWidth()"
-      [positions]="['bottom-left', 'bottom-right', 'top-left', 'top-right']"
-      [closeDelay]="closeDelay()"
-      (attach)="onOverlayAttached()"
-      (outsideClick)="isOpen.set(false)"
-      (detach)="isOpen.set(false)">
-      <ng-content />
-    </ng-template>`,
+                    template: `<ng-content />`,
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectComponent),
+                            useExisting: forwardRef(() => Select),
                             multi: true,
                         },
                     ],
+                    host: {
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
+                    },
                 }]
-        }], propDecorators: { setButtonWidth: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
+        }], ctorParameters: () => [] });
+
+/**
+ * Component representing an individual option in a select or combobox.
+ * This component integrates with Angular CDK Option to manage the option's state and behavior.
+ */
+class Option {
+    /**
+     * The `ElementRef` of the option.
+     * This provides direct access to the DOM element of the option.
+     */
+    el = inject(ElementRef);
+    /**
+     * The `CdkOption` instance associated with this option.
+     * This provides methods and properties for managing the option's state, such as selection and value.
+     */
+    cdkOption = inject(CdkOption);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Option, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: Option, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1$1.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Option, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[b-option]',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
+                        },
+                    ],
+                }]
+        }] });
 
-class SpinnerComponent {
-    active = input(true, ...(ngDevMode ? [{ debugName: "active" }] : []));
-    color = input('var(--foreground)', ...(ngDevMode ? [{ debugName: "color" }] : []));
-    backgroundColor = input('transparent', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
-    size = input(20, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpinnerComponent, isStandalone: true, selector: "b-spinner", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\n    <svg\n      [attr.height]=\"size()\"\n      [attr.width]=\"size()\"\n      preserveAspectRatio=\"xMidYMid\"\n      style=\"\n        shape-rendering: auto;\n        display: block;\n        background: rgba(122, 122, 122, 0);\n      \"\n      viewBox=\"0 0 100 100\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <g>\n        <g transform=\"rotate(0 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.9166666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(30 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.8333333333333334s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(60 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.75s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(90 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.6666666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(120 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.5833333333333334s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(150 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.5s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(180 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.4166666666666667s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(210 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.3333333333333333s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(240 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.25s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(270 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.16666666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(300 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.08333333333333333s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(330 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"0s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g />\n      </g>\n    </svg>\n  </section>\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+/**
+ * Spinner component for loading indicators.
+ *
+ * Displays an animated spinner SVG. The size can be adjusted for use in buttons or standalone.
+ */
+class Spinner {
+    /**
+     * Size of the spinner.
+     *
+     * - 'sm': Small (for compact UI, e.g. inside buttons)
+     * - 'md': Medium (default)
+     * - 'lg': Large (for standalone loading indicators)
+     *
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Computed size in pixels based on the size input.
+     * - 'sm': 16px
+     * - 'md': 20px
+     * - 'lg': 28px
+     */
+    sizeInPx = computed(() => {
+        switch (this.size()) {
+            case 'sm':
+                return 16;
+            case 'md':
+                return 20;
+            case 'lg':
+                return 28;
+            default:
+                return 20;
+        }
+    }, ...(ngDevMode ? [{ debugName: "sizeInPx" }] : []));
+    /**
+     * Type of spinner: 'bars' (default) or 'circle'.
+     *
+     * - 'bars': classic spinner with bars
+     * - 'circle': circular spinner
+     *
+     * @default 'bars'
+     */
+    type = input('bars', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Spinner, isStandalone: true, selector: "b-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideLoader, lucideLoaderCircle })], ngImport: i0, template: `
+    <ng-icon
+      [name]="type() === 'bars' ? 'lucideLoader' : 'lucideLoaderCircle'"
+      color="currentColor"
+      [size]="sizeInPx() + 'px'" />
+  `, isInline: true, styles: [":host{animation:b-spinner-rotate 1s linear infinite}@keyframes b-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
-            args: [{ selector: 'b-spinner', imports: [NgStyle], template: "@if (active()) {\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\n    <svg\n      [attr.height]=\"size()\"\n      [attr.width]=\"size()\"\n      preserveAspectRatio=\"xMidYMid\"\n      style=\"\n        shape-rendering: auto;\n        display: block;\n        background: rgba(122, 122, 122, 0);\n      \"\n      viewBox=\"0 0 100 100\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <g>\n        <g transform=\"rotate(0 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.9166666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(30 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.8333333333333334s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(60 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.75s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(90 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.6666666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(120 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.5833333333333334s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(150 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.5s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(180 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.4166666666666667s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(210 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.3333333333333333s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(240 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.25s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(270 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.16666666666666666s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(300 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"-0.08333333333333333s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g transform=\"rotate(330 50 50)\">\n          <rect\n            [attr.fill]=\"color()\"\n            height=\"20\"\n            rx=\"3\"\n            ry=\"3.2800000000000002\"\n            width=\"6\"\n            x=\"47\"\n            y=\"10\">\n            <animate\n              attributeName=\"opacity\"\n              begin=\"0s\"\n              dur=\"1s\"\n              keyTimes=\"0;1\"\n              repeatCount=\"indefinite\"\n              values=\"1;0\" />\n          </rect>\n        </g>\n        <g />\n      </g>\n    </svg>\n  </section>\n}\n" }]
+            args: [{ selector: 'b-spinner', imports: [NgIcon], providers: [provideIcons({ lucideLoader, lucideLoaderCircle })], template: `
+    <ng-icon
+      [name]="type() === 'bars' ? 'lucideLoader' : 'lucideLoaderCircle'"
+      color="currentColor"
+      [size]="sizeInPx() + 'px'" />
+  `, styles: [":host{animation:b-spinner-rotate 1s linear infinite}@keyframes b-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }] });
 
 class SwitchComponent {
     /**
      * Value of the switch.
      */
-    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * The size of the switch.
      */
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * Reference to the switch element.
      */
@@ -1087,7 +1068,7 @@ class SwitchComponent {
         this.valueChange.emit(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SwitchComponent, isStandalone: true, selector: "input[b-switch]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.arrowleft": "setValue(false)", "keydown.arrowright": "setValue(true)" }, properties: { "attr.role": "switch", "attr.checked": "value()", "attr.aria-checked": "value()", "class": "size()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SwitchComponent, isStandalone: true, selector: "input[b-switch]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.arrowleft": "setValue(false)", "keydown.arrowright": "setValue(true)" }, properties: { "attr.role": "switch", "attr.checked": "value()", "attr.aria-checked": "value()", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -1099,7 +1080,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         '[attr.checked]': 'value()',
                         '[attr.aria-checked]': 'value()',
                         '(click)': 'toggleValue()',
-                        '[class]': 'size()',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                         '(keydown.enter)': 'toggleValue()',
                         '(keydown.arrowleft)': 'setValue(false)',
                         '(keydown.arrowright)': 'setValue(true)',
@@ -1147,15 +1130,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
             args: [{ selector: 'b-row-item', imports: [NgStyle], template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\n  <ng-content />\n</div>\n" }]
         }] });
 
-class TabComponent {
+class Tab {
     /**
      * Reference to the injected CDK Option instance.
      */
     cdkOption = inject(CdkOption);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: TabComponent, isStandalone: true, selector: "b-tab", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: Tab, isStandalone: true, selector: "b-tab", hostDirectives: [{ directive: i1$1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-tab',
@@ -1170,15 +1153,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class TabsComponent {
+class Tabs {
     /**
      * Reference to the injected CDK Listbox instance.
      */
     cdkListbox = inject(CdkListbox);
+    /**
+     * The size of the tabs.
+     *
+     * @defaultValue 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * Collection of child options within the listbox.
      */
-    tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     /**
      * Collection of cdk options within the listbox.
      */
@@ -1199,10 +1188,10 @@ class TabsComponent {
         this.cdkListbox.useActiveDescendant = true;
         this.cdkListbox.orientation = 'horizontal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: TabsComponent, isStandalone: true, selector: "b-tabs", host: { listeners: { "keydown.arrowLeft": "previousTab()", "keydown.arrowUp": "previousTab()", "keydown.arrowRight": "nextTab()", "keydown.arrowDown": "nextTab()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: Tabs, isStandalone: true, selector: "b-tabs", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "previousTab()", "keydown.arrowUp": "previousTab()", "keydown.arrowRight": "nextTab()", "keydown.arrowDown": "nextTab()" }, properties: { "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkListbox }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-tabs',
@@ -1210,6 +1199,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     template: `<ng-content />`,
                     hostDirectives: [CdkListbox],
                     host: {
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                         '(keydown.arrowLeft)': 'previousTab()',
                         '(keydown.arrowUp)': 'previousTab()',
                         '(keydown.arrowRight)': 'nextTab()',
@@ -1218,87 +1210,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class InViewportService {
-    elements = signal({}, ...(ngDevMode ? [{ debugName: "elements" }] : []));
-    observer;
-    /**
-     * Register an element to be tracked by the service.
-     * @param {string} id - The id of the element to register.
-     */
-    registerElement(id, nativeElement, initialVisibility) {
-        if (!(id in this.elements())) {
-            this.elements.set({ ...this.elements(), [id]: initialVisibility });
-            // Create an IntersectionObserver to track the element's visibility.
-            this.observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => {
-                    const isVisible = entry.isIntersecting;
-                    this.updateElementVisibility(id, isVisible);
-                });
-            });
-            // Start observing the element.
-            this.observer.observe(nativeElement);
-        }
-    }
-    /**
-     * Unregister an element from being tracked by the service.
-     * @param {string} id - The id of the element to unregister.
-     */
-    unregisterElement(id) {
-        if (id in this.elements()) {
-            delete this.elements()[id];
-            this.observer.disconnect();
-        }
-    }
-    /**
-     * Update the visibility of an element.
-     * @param {string} id - The id of the element to update.
-     * @param {boolean} isVisible - The new visibility state of the element.
-     */
-    updateElementVisibility(id, isVisible) {
-        this.elements.set({ ...this.elements(), [id]: isVisible });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InViewportService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InViewportService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class InViewportDirective {
-    inViewportId = input.required(...(ngDevMode ? [{ debugName: "inViewportId" }] : []));
-    inViewportInitialVisibility = input(false, ...(ngDevMode ? [{ debugName: "inViewportInitialVisibility" }] : []));
-    el = inject(ElementRef);
-    inViewportService = inject(InViewportService);
-    constructor() {
-        afterNextRender({
-            write: () => {
-                this.inViewportService.registerElement(this.inViewportId(), this.el.nativeElement, this.inViewportInitialVisibility());
-            },
-        });
-    }
-    ngOnDestroy() {
-        this.inViewportService.unregisterElement(this.inViewportId());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: InViewportDirective, isStandalone: true, selector: "[b-in-viewport]", inputs: { inViewportId: { classPropertyName: "inViewportId", publicName: "inViewportId", isSignal: true, isRequired: true, transformFunction: null }, inViewportInitialVisibility: { classPropertyName: "inViewportInitialVisibility", publicName: "inViewportInitialVisibility", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InViewportDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[b-in-viewport]',
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * A sliding sheet component that can be positioned on either side of the screen.
  * The sheet slides in from the left or right edge and includes an overlay backdrop.
  *
  * @selector b-sheet
  */
-class SheetComponent {
+class Sheet {
     /**
      * Indicates whether the sheet is open.
      */
@@ -1308,14 +1226,6 @@ class SheetComponent {
      * Can be either 'left' or 'right'.
      */
     side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : []));
-    /**
-     * Specifies the width of the sheet.
-     */
-    width = input('300px', ...(ngDevMode ? [{ debugName: "width" }] : []));
-    /**
-     * Computes whether the sheet is positioned on the left side.
-     */
-    isLeft = computed(() => this.side() === 'left', ...(ngDevMode ? [{ debugName: "isLeft" }] : []));
     /**
      * Computes whether the sheet is positioned on the right side.
      */
@@ -1338,31 +1248,64 @@ class SheetComponent {
             this.isOpen.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SheetComponent, isStandalone: true, selector: "b-sheet", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.left": "isLeft()", "class.right": "!isLeft()", "class.open": "isOpen()", "style.width": "width()" } }, ngImport: i0, template: "<button class=\"close-button\" (click)=\"isOpen.set(false)\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"19\"\n    height=\"19\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"0.094rem\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"lucide lucide-x\">\n    <path d=\"M18 6 6 18\" />\n    <path d=\"m6 6 12 12\" />\n  </svg>\n</button>\n<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Sheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Sheet, isStandalone: true, selector: "b-sheet", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.left": "side() === \"left\"", "class.right": "side() === \"right\"", "class.open": "isOpen()" } }, ngImport: i0, template: `<button class="close-button" (click)="isOpen.set(false)">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="0.094rem"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-x">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    <ng-content /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Sheet, decorators: [{
             type: Component,
-            args: [{ selector: 'b-sheet', standalone: true, imports: [CommonModule], host: {
-                        '[class.left]': 'isLeft()',
-                        '[class.right]': '!isLeft()',
+            args: [{
+                    selector: 'b-sheet',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<button class="close-button" (click)="isOpen.set(false)">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="0.094rem"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-x">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    <ng-content /> `,
+                    host: {
+                        '[class.left]': 'side() === "left"',
+                        '[class.right]': 'side() === "right"',
                         '[class.open]': 'isOpen()',
-                        '[style.width]': 'width()',
-                    }, template: "<button class=\"close-button\" (click)=\"isOpen.set(false)\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"19\"\n    height=\"19\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"0.094rem\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"lucide lucide-x\">\n    <path d=\"M18 6 6 18\" />\n    <path d=\"m6 6 12 12\" />\n  </svg>\n</button>\n<ng-content />\n" }]
+                    },
+                }]
         }], propDecorators: { closeOnOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 
-class DrawerComponent {
+class Drawer {
     /**
      * Indicates whether the drawer is open.
      */
     isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    /**
-     * The height of the drawer.
-     */
-    height = input('30dvh', ...(ngDevMode ? [{ debugName: "height" }] : []));
     /**
      * Event emitted when the drawer is closed.
      */
@@ -1452,13 +1395,12 @@ class DrawerComponent {
             this.isOpen.set(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: DrawerComponent, isStandalone: true, selector: "b-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "style.height": "height()", "class.dragging": "isDragging()", "style.transform": "transform()", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\n  <div class=\"drag-indicator\"></div>\n</div>\n<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Drawer, isStandalone: true, selector: "b-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.dragging": "isDragging()", "style.transform": "transform()", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\n  <div class=\"drag-indicator\"></div>\n</div>\n<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
             args: [{ selector: 'b-drawer', standalone: true, imports: [CommonModule], host: {
-                        '[style.height]': 'height()',
                         '[class.dragging]': 'isDragging()',
                         '[style.transform]': 'transform()',
                         '[class.open]': 'isOpen()',
@@ -1475,9 +1417,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 class ResponsiveService {
     /** Signal that holds the breakpoint configuration */
     breakpoints = signal({
-        mobile: 576,
-        tablet: 992,
-        desktop: 1200,
+        mobile: 640,
+        tablet: 1024,
+        desktop: 1280,
     }, ...(ngDevMode ? [{ debugName: "breakpoints" }] : []));
     /** Signal that holds the current window width */
     windowWidth = signal(0, ...(ngDevMode ? [{ debugName: "windowWidth" }] : []));
@@ -1553,14 +1495,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * </b-otp>
  */
 /**
- * OtpComponent manages a group of digit inputs for OTP entry.
+ * Otp manages a group of digit inputs for OTP entry.
  * Implements keyboard navigation, paste handling, and ControlValueAccessor for Angular Forms.
  */
-class OtpComponent {
+class Otp {
     /**
-     * The visual size of the OTP inputs. Accepts '1', '2', or '3'. Default is '2'.
+     * The visual size of the OTP inputs. Accepts 'sm', 'md', or 'lg'. Default is 'md'.
      */
-    size = model('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * Computed signal for the number of digit inputs.
      */
@@ -1597,8 +1539,8 @@ class OtpComponent {
             const el = input.el.nativeElement;
             // maxLength y type se aplican por la directiva
             el.disabled = this.disabled();
-            el.classList.remove('size-1', 'size-2', 'size-3');
-            el.classList.add(`size-${this.size()}`);
+            el.classList.remove('b-size-sm', 'b-size-md', 'b-size-lg');
+            el.classList.add(`b-size-${this.size()}`);
             el.addEventListener('input', (event) => {
                 this.onInput(event, idx);
             });
@@ -1752,20 +1694,20 @@ class OtpComponent {
         this.disabled.set(isDisabled);
         this.digitInputs().forEach(input => {
             input.el.nativeElement.disabled = isDisabled;
-            input.el.nativeElement.classList.remove('size-1', 'size-2', 'size-3');
-            input.el.nativeElement.classList.add(`size-${this.size()}`);
+            input.el.nativeElement.classList.remove('b-size-sm', 'b-size-md', 'b-size-lg');
+            input.el.nativeElement.classList.add(`b-size-${this.size()}`);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: OtpComponent, isStandalone: true, selector: "b-otp", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", otpChange: "otpChange", disabled: "disabledChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Otp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: Otp, isStandalone: true, selector: "b-otp", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", otpChange: "otpChange", disabled: "disabledChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => OtpComponent),
+                useExisting: forwardRef(() => Otp),
                 multi: true,
             },
         ], queries: [{ propertyName: "digitInputs", predicate: OtpDigitDirective, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Otp, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-otp',
@@ -1773,7 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OtpComponent),
+                            useExisting: forwardRef(() => Otp),
                             multi: true,
                         },
                     ],
@@ -1795,21 +1737,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class BadgeComponent {
+class Badge {
     /** The variant of the badge. */
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /** The size of the badge. */
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: BadgeComponent, isStandalone: true, selector: "span[b-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" size-\" + size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Badge, isStandalone: true, selector: "span[b-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.b-variant-primary": "variant() === \"primary\"", "class.b-variant-secondary": "variant() === \"secondary\"", "class.b-variant-ghost": "variant() === \"ghost\"", "class.b-variant-outlined": "variant() === \"outlined\"", "class.b-variant-destructive": "variant() === \"destructive\"", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Badge, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[b-badge]',
                     template: `<ng-content />`,
                     host: {
-                        '[class]': 'variant() + " size-" + size()',
+                        '[class.b-variant-primary]': 'variant() === "primary"',
+                        '[class.b-variant-secondary]': 'variant() === "secondary"',
+                        '[class.b-variant-ghost]': 'variant() === "ghost"',
+                        '[class.b-variant-outlined]': 'variant() === "outlined"',
+                        '[class.b-variant-destructive]': 'variant() === "destructive"',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
@@ -1818,7 +1767,7 @@ class Checkbox {
     /**
      * Value of the checkbox.
      */
-    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * Reference to the checkbox element.
      */
@@ -1827,6 +1776,10 @@ class Checkbox {
      * Event emitted when the value changes.
      */
     valueChange = output();
+    /**
+     * Tamaño del checkbox: 'sm', 'md', 'lg'.
+     */
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * Initializes the checkbox value after the view is initialized.
      */
@@ -1842,7 +1795,7 @@ class Checkbox {
         this.valueChange.emit(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Checkbox, isStandalone: true, selector: "input[b-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.space": "toggleValue()" }, properties: { "attr.role": "checkbox", "attr.checked": "value()", "attr.aria-checked": "value()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Checkbox, isStandalone: true, selector: "input[b-checkbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", size: "sizeChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.space": "toggleValue()" }, properties: { "attr.role": "checkbox", "attr.checked": "value()", "attr.aria-checked": "value()", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
@@ -1856,17 +1809,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         '(click)': 'toggleValue()',
                         '(keydown.enter)': 'toggleValue()',
                         '(keydown.space)': 'toggleValue()',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
 
 class TextareaComponent {
     /**
-     * The size of the input.
+     * The size of the textarea.
      */
-    size = input('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: TextareaComponent, isStandalone: true, selector: "textarea[b-textarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": " \"size-\" + size() " } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: TextareaComponent, isStandalone: true, selector: "textarea[b-textarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -1874,20 +1830,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     selector: 'textarea[b-textarea]',
                     template: ``,
                     host: {
-                        '[class]': ' "size-" + size() ',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
 
-class RangeComponent {
+class Range {
     /**
      * Current value of the range.
      */
     value = model('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
-     * Maximum width of the range slider.
+     * Size of the range slider (sm, md, lg)
      */
-    maxWidth = input('100%', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * Reference to the range element.
      */
@@ -1904,375 +1862,164 @@ class RangeComponent {
     onInput(event) {
         this.value.set(event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: RangeComponent, isStandalone: true, selector: "input[b-range]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.value": "value()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Range, isStandalone: true, selector: "input[b-range]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.value": "value()", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Range, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-range]',
                     template: ``,
                     host: {
                         '[attr.value]': 'value()',
-                        '[style.max-width]': 'maxWidth()',
                         '(input)': 'onInput($event)',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
 
-/**
- * Utility service for common operations.
- */
-class UtilsService {
-    debounceTimers = new Map();
+class TooltipTrigger {
     /**
-     * Executes a function after a delay, canceling any previous calls with the same key.
-     *
-     * @param key - Unique key to identify the debounce timer.
-     * @param func - The function to debounce.
-     * @param delay - The delay in milliseconds before executing the function.
+     * Emits when the tooltip should become active/visible (mouseover or focus).
      */
-    debounce(key, func, delay) {
-        clearTimeout(this.debounceTimers.get(key));
-        this.debounceTimers.set(key, setTimeout(func, delay));
-    }
+    activeEmitter = output();
     /**
-     * Cancels the debounce timer for a specific key.
-     *
-     * @param key - Unique key to identify the debounce timer.
+     * Emits when the tooltip should become inactive/hidden (mouseout or blur).
      */
-    stopDebounce(key) {
-        clearTimeout(this.debounceTimers.get(key));
-        this.debounceTimers.delete(key);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, providedIn: 'root' });
+    inactiveEmitter = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: TooltipTrigger, isStandalone: true, selector: "[bTooltipTrigger]", outputs: { activeEmitter: "activeEmitter", inactiveEmitter: "inactiveEmitter" }, host: { listeners: { "mouseover": "activeEmitter.emit()", "focus": "activeEmitter.emit()", "mouseout": "inactiveEmitter.emit()", "blur": "inactiveEmitter.emit()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipTrigger, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[bTooltipTrigger]',
+                    host: {
+                        '(mouseover)': 'activeEmitter.emit()',
+                        '(focus)': 'activeEmitter.emit()',
+                        '(mouseout)': 'inactiveEmitter.emit()',
+                        '(blur)': 'inactiveEmitter.emit()',
+                    },
                 }]
         }] });
 
-/**
- * Tooltip component used to display content or templates in a tooltip overlay.
- */
-class TooltipComponent {
-    /**
-     * Specifies the size of the tooltip.
-     *
-     * @defaultValue '2'
-     */
-    size = signal('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /**
-     * Direction of the tooltip (e.g., top, bottom, left, right).
-     */
-    direction = signal(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /**
-     * Indicates whether the tooltip is leaving (for animation purposes).
-     */
-    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : []));
-    /**
-     * Content of the tooltip, which can be a string or a template.
-     */
-    content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
+class TooltipContent {
     /**
-     * Determines if the content is a string.
+     * Reference to the ConnectedOverlay to determine the direction of the overlay.
      */
-    isString = computed(() => typeof this.content() === 'string', ...(ngDevMode ? [{ debugName: "isString" }] : []));
+    overlay = inject(ConnectedOverlay$1);
     /**
-     * Returns the template if the content is not a string.
+     * Computed signal representing the direction of the overlay.
      */
-    template = computed(() => {
-        if (this.isString()) {
-            return null;
-        }
-        return this.content();
-    }, ...(ngDevMode ? [{ debugName: "template" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TooltipComponent, isStandalone: true, selector: "b-tooltip", host: { properties: { "class": "\"b-tooltip-\" + direction() + \" size-\" + size()", "class.b-tooltip-leave": "leaving()" } }, ngImport: i0, template: `
-    @if (isString()) {
-      {{ content() }}
-    } @else {
-      <ng-container *ngTemplateOutlet="template()" />
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    direction = computed(() => this.overlay.direction(), ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    constructor() {
+        effect(() => console.log(this.direction()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: TooltipContent, isStandalone: true, selector: "b-tooltip-content", host: { properties: { "animate.enter": "\"b-tooltip-content-entering-\" + this.direction()", "animate.leave": "\"b-tooltip-content-leaving-\" + this.direction()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-tooltip',
-                    standalone: true,
-                    template: `
-    @if (isString()) {
-      {{ content() }}
-    } @else {
-      <ng-container *ngTemplateOutlet="template()" />
-    }
-  `,
-                    imports: [NgTemplateOutlet],
+                    selector: 'b-tooltip-content',
+                    imports: [],
+                    template: `<ng-content />`,
                     host: {
-                        '[class]': '"b-tooltip-" + direction() + " size-" + size()',
-                        '[class.b-tooltip-leave]': 'leaving()',
+                        '[animate.enter]': '"b-tooltip-content-entering-" + this.direction()',
+                        '[animate.leave]': '"b-tooltip-content-leaving-" + this.direction()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-/**
- * Directive to attach a tooltip to an element.
- */
-class TooltipDirective {
+class Tooltip {
     /**
-     * Tooltip content, which can be a string or a template.
+     * Reference to the overlay directive instance.
+     * Used to control the dropdown overlay for the select component.
      *
-     * @alias bTooltip
+     * @readonly
      */
-    content = input('', ...(ngDevMode ? [{ debugName: "content", alias: 'bTooltip' }] : [{
-            alias: 'bTooltip',
-        }]));
+    overlay = contentChild(ConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
     /**
-     * Specifies the size of the tooltip.
+     * Reference to the tooltip trigger directive.
+     * Used to handle trigger events (click, keydown) for opening/closing the tooltip.
      *
-     * @defaultValue '2'
+     * @readonly
      */
-    size = input('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    tooltipTrigger = contentChild(TooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltipTrigger" }] : []));
     /**
-     * Overlay origin for positioning the tooltip.
-     */
-    origin = inject(CdkOverlayOrigin);
-    /**
-     * Overlay service for creating and managing overlays.
-     */
-    overlay = inject(Overlay);
-    /**
-     * Utility service for common operations.
-     */
-    utils = inject(UtilsService);
-    /**
-     * Whether the tooltip should appear on hover.
+     * Reference to the tooltip content component.
+     * Used to manage the content of the tooltip.
      *
-     * @defaultValue true
+     * @readonly
      */
-    hover = input(true, ...(ngDevMode ? [{ debugName: "hover" }] : []));
+    tooltipContent = contentChild(TooltipContent, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
     /**
-     * Whether the tooltip should appear on focus.
+     * Input signal to set the size of the tooltip.
+     * Can be 'sm', 'md', or 'lg'. Default is 'md'.
      *
-     * @defaultValue false
-     */
-    focus = input(false, ...(ngDevMode ? [{ debugName: "focus" }] : []));
-    /**
-     * Reference to the overlay instance.
-     */
-    overlayRef = signal(null, ...(ngDevMode ? [{ debugName: "overlayRef" }] : []));
-    /**
-     * Unique identifier for the tooltip instance.
-     */
-    id = signal(Math.random() * 10, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    /**
-     * Map of positions for the tooltip.
+     * @readonly
+     * @defaultValue 'md'
      */
-    positionsMap = signal({
-        'top-left': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-        },
-        'top-center': {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom',
-        },
-        'top-right': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-        },
-        'bottom-left': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-        },
-        'bottom-center': {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top',
-        },
-        'bottom-right': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-        },
-        'left-top': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top',
-        },
-        'left-center': {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center',
-        },
-        'left-bottom': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom',
-        },
-        'right-top': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top',
-        },
-        'right-center': {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center',
-        },
-        'right-bottom': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom',
-        },
-    }, ...(ngDevMode ? [{ debugName: "positionsMap" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * List of positions for the tooltip.
+     * Input signal to set the visual variant of the tooltip.
+     * Can be 'primary', 'secondary', 'ghost', 'outlined', or 'destructive'.
+     * Default is 'primary'.
      *
-     * @defaultValue ['bottom-center']
-     */
-    positions = input(['bottom-center'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
-    /**
-     * Computed connected positions based on the positions input.
+     * @readonly
+     * @defaultValue 'primary'
      */
-    connectedPositions = computed(() => this.positions().map(position => this.positionsMap()[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /**
-     * Delay before showing the tooltip.
-     *
-     * @defaultValue 0
+     * Lifecycle hook that is called after data-bound properties are initialized.
+     * Sets up mouse event handling for the tooltip trigger.
      */
-    showDelay = input(0, ...(ngDevMode ? [{ debugName: "showDelay" }] : []));
+    ngAfterContentInit() {
+        this.handleTooltipEvents();
+        this.handlePanelClasses();
+    }
     /**
-     * Delay before hiding the tooltip.
+     * Sets up subscriptions to mouse events from the tooltip trigger.
+     * Logs messages to the console on mouse over and mouse out events.
      *
-     * @defaultValue 150
+     * @private
      */
-    hideDelay = input(150, ...(ngDevMode ? [{ debugName: "hideDelay" }] : []));
-    /**
-     * Currently connected position of the tooltip.
-     */
-    connectedPosition = signal(null, ...(ngDevMode ? [{ debugName: "connectedPosition" }] : []));
-    /**
-     * Direction of the tooltip based on the connected position.
-     */
-    direction = computed(() => {
-        const pair = this.connectedPosition();
-        return Object.entries(this.positionsMap())
-            .find(([, position]) => position.originX === pair?.originX &&
-            position.originY === pair?.originY &&
-            position.overlayX === pair?.overlayX &&
-            position.overlayY === pair?.overlayY)?.[0]
-            .split('-')[0];
-    }, ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /**
-     * Subscription to position change events.
-     */
-    positionChangeSubscription = null;
-    /**
-     * Reference to the tooltip component instance.
-     */
-    componentRef = signal(undefined, ...(ngDevMode ? [{ debugName: "componentRef" }] : []));
-    /**
-     * Shows the tooltip.
-     */
-    show() {
-        if (this.overlayRef()?.hasAttached()) {
-            return;
-        }
-        this.utils.debounce('tooltip-show ' + this.id(), () => {
-            const positionStrategy = this.overlay
-                .position()
-                .flexibleConnectedTo(this.origin.elementRef)
-                .withPositions(this.connectedPositions())
-                .withPush(true);
-            // Subscribe to position change events
-            this.positionChangeSubscription =
-                positionStrategy.positionChanges.subscribe(change => {
-                    this.connectedPosition.set(change.connectionPair);
-                });
-            const overlayConfig = new OverlayConfig({
-                positionStrategy,
-                scrollStrategy: this.overlay.scrollStrategies.close(),
-            });
-            if (!this.overlayRef()) {
-                this.overlayRef.set(this.overlay.create(overlayConfig));
-            }
-            const componentPortal = new ComponentPortal(TooltipComponent);
-            this.componentRef.set(this.overlayRef()?.attach(componentPortal));
-            // Reset the leaving state and direction to ensure animations play
-            const instance = this.componentRef()?.instance;
-            instance?.leaving.set(false);
-            instance?.direction.set(this.direction());
-            instance?.content.set(this.content());
-            instance?.size.set(this.size());
-            // Trigger reflow to ensure CSS animations are applied
-            void this.overlayRef()?.overlayElement.offsetHeight;
-        }, this.showDelay());
-    }
-    /**
-     * Hides the tooltip.
-     */
-    hide() {
-        if (!this.overlayRef()?.hasAttached()) {
-            return; // Avoid detaching if not attached
-        }
-        this.componentRef()?.instance.leaving.set(true);
-        this.utils.debounce('tooltip-hide' + this.id(), () => this.overlayRef()?.detach(), this.hideDelay());
+    handleTooltipEvents() {
+        this.tooltipTrigger()?.activeEmitter.subscribe(() => {
+            this.overlay()?.openOverlay();
+        });
+        this.tooltipTrigger()?.inactiveEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
     }
     /**
-     * Cleans up resources when the directive is destroyed.
+     * Sets the panel size class on the overlay based on the tooltip size input.
      */
-    ngOnDestroy() {
-        this.hide();
-        // Unsubscribe from position change events
-        this.positionChangeSubscription?.unsubscribe();
-        this.positionChangeSubscription = null;
-    }
-    constructor() {
-        effect(() => this.componentRef()?.instance.direction.set(this.direction()));
+    handlePanelClasses() {
+        this.overlay().cdkConnectedOverlay.panelClass = [
+            `b-size-${this.size()}`,
+            `b-variant-${this.variant()}`,
+        ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: TooltipDirective, isStandalone: true, selector: "[bTooltip]", inputs: { content: { classPropertyName: "content", publicName: "bTooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "hover() && show()", "mouseleave": "hover() && hide()", "focus": "focus() && show()", "blur": "focus() && hide()" } }, hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: Tooltip, isStandalone: true, selector: "b-tooltip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: TooltipTrigger, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tooltip, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[bTooltip]',
-                    hostDirectives: [CdkOverlayOrigin],
+                    selector: 'b-tooltip',
+                    template: `<ng-content />`,
                     host: {
-                        '(mouseenter)': 'hover() && show()',
-                        '(mouseleave)': 'hover() && hide()',
-                        '(focus)': 'focus() && show()',
-                        '(blur)': 'focus() && hide()',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class ColorPickerComponent {
-    /**
-     * Specifies the maximum width of the input.
-     */
-    maxWidth = input('', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+class ColorPicker {
     /**
      * Represents the value of the input.
      */
@@ -2310,7 +2057,7 @@ class ColorPickerComponent {
     /**
      * The size of the color picker input.
      */
-    size = input('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * A reference to the native element.
      */
@@ -2374,10 +2121,10 @@ class ColorPickerComponent {
         const b = Math.round(rgb1.b * (1 - percentage) + rgb2.b * percentage);
         return rgbToHex(r, g, b);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: ColorPickerComponent, isStandalone: true, selector: "input[b-color-picker]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showColor: { classPropertyName: "showColor", publicName: "showColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focused.set(true)", "blur": "focused.set(false)", "input": "value.set($event.target.value)" }, properties: { "class.focused": "focused()", "style.max-width": "maxWidth()", "style.--value": "valueWithSingleQuotes()", "style.--text-color": "textColor()", "class.show-color": "showColor()", "class": "\"size-\" + size()" } }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: ColorPicker, isStandalone: true, selector: "input[b-color-picker]", inputs: { showColor: { classPropertyName: "showColor", publicName: "showColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focused.set(true)", "blur": "focused.set(false)", "input": "value.set($event.target.value)" }, properties: { "class.focused": "focused()", "style.--value": "valueWithSingleQuotes()", "style.--text-color": "textColor()", "class.show-color": "showColor()", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-color-picker]',
@@ -2385,27 +2132,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     template: ``,
                     host: {
                         '[class.focused]': 'focused()',
-                        '[style.max-width]': 'maxWidth()',
                         '[style.--value]': 'valueWithSingleQuotes()',
                         '[style.--text-color]': 'textColor()',
                         '[class.show-color]': 'showColor()',
                         '(focus)': 'focused.set(true)',
                         '(blur)': 'focused.set(false)',
                         '(input)': 'value.set($event.target.value)',
-                        '[class]': '"size-" + size()',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
 
 /**
- * Represents a tree component that supports drag-and-drop functionality
- * and manages nested tree nodes.
+ * Represents a tree node component that can be extended, collapsed,
+ * and optionally supports drag-and-drop functionality.
  */
-class TreeComponent {
+class TreeNode {
+    /**
+     * Indicates whether the node is extended (expanded).
+     */
+    extended = model(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
+    /**
+     * Reference to the `CdkDrag` directive for drag-and-drop functionality.
+     */
+    node = inject(CdkDrag);
+    /**
+     * Reference to a nested `Tree` component, if present.
+     */
+    nestedTree = contentChild(Tree, ...(ngDevMode ? [{ debugName: "nestedTree" }] : []));
+    /**
+     * Emits an event when the node is closed.
+     */
+    closeEmitter = output();
     /**
-     * The ID of the tree component.
+     * Lifecycle hook that is called after the component is initialized.
      */
-    maxWidth = input('100%', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    ngOnInit() {
+        this.node.lockAxis = 'y';
+    }
+    /**
+     * Updates the disabled state of the node.
+     * @param disabled - Whether the node should be disabled.
+     */
+    handleNodeDisability(disabled) {
+        this.node.disabled = disabled;
+    }
+    /**
+     * Toggles the extended (expanded) state of the node.
+     * Emits a close event if the node is collapsed and contains a nested tree.
+     */
+    handleExtension() {
+        const isExtended = this.extended();
+        this.extended.set(!isExtended);
+        if (isExtended && this.nestedTree()) {
+            this.closeEmitter.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TreeNode, isStandalone: true, selector: "b-tree-node", inputs: { extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extended: "extendedChange", closeEmitter: "closeEmitter" }, providers: [
+            provideIcons({
+                lucideGripVertical,
+            }),
+        ], queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: `<section>
+      @if (!node.disabled) {
+        <ng-icon
+          name="lucideGripVertical"
+          size="16"
+          color="currentColor"
+          cdkDragHandle />
+      }
+      <div
+        class="projected-content"
+        (click)="nestedTree() && handleExtension()"
+        (keydown.enter)="nestedTree() && handleExtension()"
+        (keydown.space)="nestedTree() && handleExtension()"
+        role="button"
+        tabindex="0">
+        <ng-content />
+      </div>
+      @if (nestedTree()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      }
+    </section>
+    @if (nestedTree() && extended()) {
+      <div class="nested">
+        <ng-content select="b-tree" />
+      </div>
+    } `, isInline: true, dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-tree-node',
+                    imports: [CdkDragHandle, NgIcon],
+                    template: `<section>
+      @if (!node.disabled) {
+        <ng-icon
+          name="lucideGripVertical"
+          size="16"
+          color="currentColor"
+          cdkDragHandle />
+      }
+      <div
+        class="projected-content"
+        (click)="nestedTree() && handleExtension()"
+        (keydown.enter)="nestedTree() && handleExtension()"
+        (keydown.space)="nestedTree() && handleExtension()"
+        role="button"
+        tabindex="0">
+        <ng-content />
+      </div>
+      @if (nestedTree()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      }
+    </section>
+    @if (nestedTree() && extended()) {
+      <div class="nested">
+        <ng-content select="b-tree" />
+      </div>
+    } `,
+                    hostDirectives: [
+                        {
+                            directive: CdkDrag,
+                            inputs: ['cdkDragDisabled: disabled'],
+                        },
+                    ],
+                    providers: [
+                        provideIcons({
+                            lucideGripVertical,
+                        }),
+                    ],
+                }]
+        }] });
+
+/**
+ * Represents a tree component that supports drag-and-drop functionality
+ * and manages nested tree nodes.
+ */
+class Tree {
     /**
      * Determines whether the tree is draggable.
      */
@@ -2417,7 +2305,7 @@ class TreeComponent {
     /**
      * Collection of nested `TreeNode` components.
      */
-    nestedNodes = contentChildren(TreeNodeComponent, ...(ngDevMode ? [{ debugName: "nestedNodes" }] : []));
+    nestedNodes = contentChildren(TreeNode, ...(ngDevMode ? [{ debugName: "nestedNodes" }] : []));
     /**
      * Determines whether to close nodes recursively.
      */
@@ -2470,17 +2358,16 @@ class TreeComponent {
             node.nestedTree()?.closeNestedNodes();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: TreeComponent, isStandalone: true, selector: "b-tree", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closeRecursively: { classPropertyName: "closeRecursively", publicName: "closeRecursively", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropEmitter: "dropEmitter" }, host: { listeners: { "cdkDropListDropped": "dropEmitter.emit($event)" }, properties: { "style.max-width": "maxWidth()" } }, queries: [{ propertyName: "nestedNodes", predicate: TreeNodeComponent, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1$2.CdkDropListGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: Tree, isStandalone: true, selector: "b-tree", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closeRecursively: { classPropertyName: "closeRecursively", publicName: "closeRecursively", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropEmitter: "dropEmitter" }, host: { listeners: { "cdkDropListDropped": "dropEmitter.emit($event)" } }, queries: [{ propertyName: "nestedNodes", predicate: TreeNode, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1$2.CdkDropListGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tree, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-tree',
                     template: `<ng-content />`,
                     host: {
                         '(cdkDropListDropped)': 'dropEmitter.emit($event)',
-                        '[style.max-width]': 'maxWidth()',
                     },
                     hostDirectives: [
                         {
@@ -2494,92 +2381,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Represents a tree node component that can be extended, collapsed,
- * and optionally supports drag-and-drop functionality.
+ * Represents a menu component that can optionally float.
  */
-class TreeNodeComponent {
-    /**
-     * Indicates whether the node is extended (expanded).
-     */
-    extended = model(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
-    /**
-     * Reference to the `CdkDrag` directive for drag-and-drop functionality.
-     */
-    node = inject(CdkDrag);
-    /**
-     * Reference to a nested `Tree` component, if present.
-     */
-    nestedTree = contentChild(TreeComponent, ...(ngDevMode ? [{ debugName: "nestedTree" }] : []));
-    /**
-     * Emits an event when the node is closed.
-     */
-    closeEmitter = output();
-    /**
-     * Lifecycle hook that is called after the component is initialized.
-     */
-    ngOnInit() {
-        this.node.lockAxis = 'y';
-    }
-    /**
-     * Updates the disabled state of the node.
-     * @param disabled - Whether the node should be disabled.
-     */
-    handleNodeDisability(disabled) {
-        this.node.disabled = disabled;
-    }
-    /**
-     * Toggles the extended (expanded) state of the node.
-     * Emits a close event if the node is collapsed and contains a nested tree.
-     */
-    handleExtension() {
-        const isExtended = this.extended();
-        this.extended.set(!isExtended);
-        if (isExtended && this.nestedTree()) {
-            this.closeEmitter.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TreeNodeComponent, isStandalone: true, selector: "b-tree-node", inputs: { extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extended: "extendedChange", closeEmitter: "closeEmitter" }, queries: [{ propertyName: "nestedTree", first: true, predicate: TreeComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: "<section>\n  @if (!node.disabled) {\n    <i b-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\n  }\n  <div\n    class=\"projected-content\"\n    (click)=\"nestedTree() && handleExtension()\"\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\n    (keydown.space)=\"nestedTree() && handleExtension()\"\n    role=\"button\"\n    tabindex=\"0\">\n    <ng-content />\n  </div>\n  @if (nestedTree()) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  }\n</section>\n@if (nestedTree() && extended()) {\n  <div class=\"nested\">\n    <ng-content select=\"b-tree\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+class Menu {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: Menu, isStandalone: true, selector: "b-menu", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.b-size-sm": "size() === 'sm'", "class.b-size-md": "size() === 'md'", "class.b-size-lg": "size() === 'lg'" } }, hostDirectives: [{ directive: i1$3.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Menu, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tree-node', imports: [IconComponent, CdkDragHandle], hostDirectives: [
-                        {
-                            directive: CdkDrag,
-                            inputs: ['cdkDragDisabled: disabled'],
-                        },
-                    ], template: "<section>\n  @if (!node.disabled) {\n    <i b-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\n  }\n  <div\n    class=\"projected-content\"\n    (click)=\"nestedTree() && handleExtension()\"\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\n    (keydown.space)=\"nestedTree() && handleExtension()\"\n    role=\"button\"\n    tabindex=\"0\">\n    <ng-content />\n  </div>\n  @if (nestedTree()) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  }\n</section>\n@if (nestedTree() && extended()) {\n  <div class=\"nested\">\n    <ng-content select=\"b-tree\" />\n  </div>\n}\n" }]
+            args: [{
+                    selector: 'b-menu',
+                    template: `<ng-content />`,
+                    hostDirectives: [CdkMenu],
+                    host: {
+                        '[class.b-size-sm]': "size() === 'sm'",
+                        '[class.b-size-md]': "size() === 'md'",
+                        '[class.b-size-lg]': "size() === 'lg'",
+                    },
+                }]
         }] });
 
 /**
- * Represents a menu component that can optionally float.
+ * Represents a group of menu items.
  */
-class MenuComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MenuComponent, isStandalone: true, selector: "b-menu", hostDirectives: [{ directive: i1$3.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true });
+class MenuGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MenuGroup, isStandalone: true, selector: "b-menu-group", hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuGroup, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-menu',
-                    imports: [],
+                    selector: 'b-menu-group',
                     template: `<ng-content />`,
-                    hostDirectives: [CdkMenu],
+                    hostDirectives: [CdkMenuGroup],
                 }]
         }] });
 
 /**
  * Represents a label for a menu.
  */
-class MenuLabelComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MenuLabelComponent, isStandalone: true, selector: "b-menu-label", ngImport: i0, template: `<ng-content />`, isInline: true });
+class MenuLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MenuLabel, isStandalone: true, selector: "b-menu-label", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-menu-label',
-                    imports: [],
                     template: `<ng-content />`,
                 }]
         }] });
@@ -2587,19 +2436,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 /**
  * Represents a menu item with support for typeahead and disabled states.
  */
-class MenuItemComponent {
+class MenuItem {
     /**
      * Input to set the squared state of the menu item.
      */
     squared = input(false, ...(ngDevMode ? [{ debugName: "squared" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItemComponent, isStandalone: true, selector: "button[b-menu-item]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItem, isStandalone: true, selector: "button[b-menu-item]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[b-menu-item]',
-                    imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2617,39 +2465,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-/**
- * Represents a group of menu items.
- */
-class MenuGroupComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MenuGroupComponent, isStandalone: true, selector: "b-menu-group", hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-menu-group',
-                    imports: [],
-                    template: `<ng-content />`,
-                    hostDirectives: [CdkMenuGroup],
-                }]
-        }] });
-
 /**
  * Represents a checkbox menu item.
  */
-class MenuItemCheckboxComponent {
+class MenuItemCheckbox {
     /**
      * Input to set the squared state of the menu item.
      */
     squared = input(false, ...(ngDevMode ? [{ debugName: "squared" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItemCheckboxComponent, isStandalone: true, selector: "button[b-menu-item-checkbox]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItemCheckbox, isStandalone: true, selector: "button[b-menu-item-checkbox]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[b-menu-item-checkbox]',
-                    imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2671,19 +2501,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 /**
  * Represents a radio menu item.
  */
-class MenuItemRadioComponent {
+class MenuItemRadio {
     /**
      * Input to set the squared state of the menu item.
      */
     squared = input(false, ...(ngDevMode ? [{ debugName: "squared" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItemRadioComponent, isStandalone: true, selector: "button[b-menu-item-radio]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MenuItemRadio, isStandalone: true, selector: "button[b-menu-item-radio]", inputs: { squared: { classPropertyName: "squared", publicName: "squared", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.squared": "squared()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemRadio, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[b-menu-item-radio]',
-                    imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2796,8 +2625,13 @@ class MenuTriggerDirective {
                 offsetX: !this.submenu() ? 5 : undefined,
             },
         };
-        const connectedPosition = positionMap[this.menuTriggerPosition()];
-        this.trigger.menuPosition = [connectedPosition];
+        const pos = this.menuTriggerPosition();
+        if (Array.isArray(pos)) {
+            this.trigger.menuPosition = pos.map(p => positionMap[p]);
+        }
+        else {
+            this.trigger.menuPosition = [positionMap[pos]];
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: MenuTriggerDirective, isStandalone: true, selector: "[menuTriggerFor]", inputs: { menuTriggerPosition: { classPropertyName: "menuTriggerPosition", publicName: "menuTriggerPosition", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1$3.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"] }], ngImport: i0 });
@@ -2815,37 +2649,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class AlertComponent {
+class Alert {
     /** The type of the alert. */
     type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
     /** The title of the alert. */
     title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
-    /** The icon of the alert. */
+    /** The icon name for ng-icon. */
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /** Whether the alert is dismissible. */
     dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
     /** Event emitted when the alert is dismissed. */
     dismissed = output();
-    /** The maximum width of the alert. */
-    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
-    /** The color foreground of the alert. */
-    colorForeground = computed(() => {
-        return this.type() === 'info'
-            ? 'var(--secondary-foreground)'
-            : `var(--${this.type()}-foreground)`;
-    }, ...(ngDevMode ? [{ debugName: "colorForeground" }] : []));
     dismiss() {
         this.dismissed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: AlertComponent, isStandalone: true, selector: "b-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "type()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"icon\">\n    <i b-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\n  </div>\n}\n<div class=\"content\">\n  @if (title()) {\n    <div class=\"title\">\n      {{ title() }}\n    </div>\n  }\n\n  <div class=\"body\">\n    <ng-content />\n  </div>\n</div>\n@if (dismissible()) {\n  <button class=\"close-btn\" (click)=\"dismiss()\">\n    <i b-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\n  </button>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: Alert, isStandalone: true, selector: "b-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "type()" } }, providers: [provideIcons({ lucideX })], ngImport: i0, template: `
+    @if (icon()) {
+      <div class="icon">
+        <ng-icon [name]="icon()!" size="20" color="currentColor" />
+      </div>
+    }
+    <div class="content">
+      @if (title()) {
+        <div class="title">{{ title() }}</div>
+      }
+      <div class="body">
+        <ng-content />
+      </div>
+    </div>
+    @if (dismissible()) {
+      <button class="close-btn" (click)="dismiss()" aria-label="Close">
+        <ng-icon name="lucideX" size="16" color="currentColor" />
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Alert, decorators: [{
             type: Component,
-            args: [{ selector: 'b-alert', imports: [IconComponent], host: {
+            args: [{
+                    selector: 'b-alert',
+                    template: `
+    @if (icon()) {
+      <div class="icon">
+        <ng-icon [name]="icon()!" size="20" color="currentColor" />
+      </div>
+    }
+    <div class="content">
+      @if (title()) {
+        <div class="title">{{ title() }}</div>
+      }
+      <div class="body">
+        <ng-content />
+      </div>
+    </div>
+    @if (dismissible()) {
+      <button class="close-btn" (click)="dismiss()" aria-label="Close">
+        <ng-icon name="lucideX" size="16" color="currentColor" />
+      </button>
+    }
+  `,
+                    imports: [NgIcon],
+                    host: {
                         '[class]': 'type()',
-                        '[style.max-width]': 'maxWidth()',
-                    }, template: "@if (icon()) {\n  <div class=\"icon\">\n    <i b-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\n  </div>\n}\n<div class=\"content\">\n  @if (title()) {\n    <div class=\"title\">\n      {{ title() }}\n    </div>\n  }\n\n  <div class=\"body\">\n    <ng-content />\n  </div>\n</div>\n@if (dismissible()) {\n  <button class=\"close-btn\" (click)=\"dismiss()\">\n    <i b-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\n  </button>\n}\n" }]
+                    },
+                    providers: [provideIcons({ lucideX })],
+                }]
         }] });
 
 /**
@@ -2961,7 +2830,7 @@ class CommandOptionsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CommandOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", inputs: { noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "onEnter()" }, properties: { "cdkListboxValue": "value()", "cdkListboxMultiple": "multiple()" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue", "cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", inputs: { noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "onEnter()" }, properties: { "cdkListboxValue": "value()", "cdkListboxMultiple": "multiple()" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue", "cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
     @if (options().length === 0) {
       <div class="no-options-message">
         {{ noOptionsMessage() }}
@@ -2995,6 +2864,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * Utility service for common operations.
+ */
+class UtilsService {
+    debounceTimers = new Map();
+    /**
+     * Executes a function after a delay, canceling any previous calls with the same key.
+     *
+     * @param key - Unique key to identify the debounce timer.
+     * @param func - The function to debounce.
+     * @param delay - The delay in milliseconds before executing the function.
+     */
+    debounce(key, func, delay) {
+        clearTimeout(this.debounceTimers.get(key));
+        this.debounceTimers.set(key, setTimeout(func, delay));
+    }
+    /**
+     * Cancels the debounce timer for a specific key.
+     *
+     * @param key - Unique key to identify the debounce timer.
+     */
+    stopDebounce(key) {
+        clearTimeout(this.debounceTimers.get(key));
+        this.debounceTimers.delete(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Component representing a command input with associated options.
  * It provides keyboard navigation and focus trapping for accessibility.
@@ -3078,13 +2982,13 @@ class CommandComponent {
       (keydown.enter)="commandOptions()?.selectOption()"
       (blur)="isDesktop() && trappedInput.el.nativeElement.focus()"
       (input)="onInput($event)" />
-    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: InputComponent, selector: "input[b-input]", inputs: ["type", "maxWidth", "decimals", "numberType", "size"], exportAs: ["bInput"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: Input, selector: "input[b-input]", inputs: ["type", "decimals", "numberType", "size"], exportAs: ["bInput"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-command',
-                    imports: [InputComponent, CdkTrapFocus],
+                    imports: [Input, CdkTrapFocus],
                     template: `<input
       type="text"
       b-input
@@ -3104,421 +3008,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         }] });
 
 /**
- * Component representing a combobox dropdown.
- * This component provides a button to toggle the dropdown and displays the selected option(s) with an input field.
+ * Directive to mark an element as a trigger for an overlay.
+ * Integrates with Angular CDK's `CdkOverlayOrigin` to provide
+ * a reference point for overlay positioning.
  */
-class ComboboxComponent {
-    /**
-     * Placeholder text displayed when no option is selected.
-     */
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /**
-     * Signal indicating whether the dropdown is currently open.
-     */
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    /**
-     * Reference to the button element used to toggle the dropdown.
-     * This is used for managing focus and interactions.
-     */
-    button = viewChild(ButtonComponent, ...(ngDevMode ? [{ debugName: "button" }] : []));
-    /**
-     * Reference to the content component of the dropdown.
-     * This contains the list of selectable options.
-     */
-    command = contentChild(CommandComponent, ...(ngDevMode ? [{ debugName: "command" }] : []));
-    /**
-     * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `CommandComponent`.
-     */
-    value = linkedSignal(() => this.command()?.value());
-    /**
-     * Linked signal for the width of the button element.
-     * This is used to set the width of the dropdown overlay.
-     */
-    buttonWidth = linkedSignal(() => this.button()?.el.nativeElement.offsetWidth);
-    /**
-     * Model indicating whether the combobox component is disabled.
-     * When disabled, the dropdown cannot be opened or interacted with.
-     */
-    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /**
-     * Computed signal representing the options available in the dropdown.
-     * This retrieves the options from the `CommandComponent`.
-     */
-    options = computed(() => this.command()?.options(), ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /**
-     * Computed signal representing the content of the selected option(s).
-     * If no option is selected, it returns the placeholder text.
-     */
-    content = computed(() => {
-        const selected = this.value();
-        if (selected &&
-            selected.length > 0 &&
-            !(selected.length === 1 && selected[0] === '')) {
-            return this.options()?.reduce((acc, option) => {
-                if (selected.includes(option.value)) {
-                    return acc ? acc + ', ' + option.getLabel() : option.getLabel();
-                }
-                return acc;
-            }, '');
-        }
-        else {
-            return this.placeholder();
-        }
-    }, ...(ngDevMode ? [{ debugName: "content" }] : []));
-    /**
-     * Signal representing the delay before closing the dropdown.
-     * This is used to provide a smooth transition when closing the dropdown.
-     */
-    closeDelay = signal(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
-    /**
-     * Lifecycle hook that is called after the component is initialized.
-     * It sets up the necessary subscriptions for handling value changes.
-     */
-    ngOnInit() {
-        this.handleSelectedValueChange();
-    }
-    /**
-     * Subscribes to the `closeEmitter` of the `CommandComponent` to handle
-     * changes to the selected value. This ensures the dropdown closes and the
-     * value is propagated to Angular Forms.
-     */
-    handleSelectedValueChange() {
-        this.command()
-            ?.commandOptions()
-            ?.closeEmitter.subscribe(() => {
-            this.onChange(this.value());
-            this.onTouched();
-            this.isOpen.set(false);
-        });
-    }
-    /**
-     * Focuses the input element within the command component when the overlay is attached.
-     */
-    onOverlayAttached() {
-        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
-        this.command()?.el.nativeElement.querySelector('input')?.focus();
-    }
-    /**
-     * Sets the width of the button element when the window is resized.
-     * This ensures that the dropdown overlay matches the width of the button.
-     */
-    setButtonWidth() {
-        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
-    }
-    /**
-     * Computed signal indicando si se permite selección múltiple.
-     * Se obtiene de CommandOptionsComponent.
-     */
-    multiple = computed(() => this.command()?.commandOptions()?.multiple() ?? false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    // Control Value Accessor methods
-    /**
-     * Callback function to propagate changes to the model.
-     * This is called whenever the value changes.
-     */
-    onChange = () => undefined;
-    /**
-     * Callback function to mark the component as touched.
-     * This is called when the component loses focus.
-     */
-    onTouched = () => undefined;
-    /**
-     * Writes a new value to the component.
-     * Este método ahora soporta selección múltiple.
-     */
-    writeValue(value) {
-        if (!value) {
-            return;
-        }
-        const values = this.multiple()
-            ? Array.isArray(value)
-                ? value
-                : [value]
-            : [typeof value === 'string' ? value : value?.[0]];
-        if (values) {
-            values.forEach(val => {
-                this.command()?.commandOptions()?.cdkListbox?.selectValue(val);
-            });
-            this.value.set(values);
-        }
-    }
-    /**
-     * Registers a callback function to be called when the value changes.
-     * Ahora soporta selección múltiple.
-     */
-    registerOnChange(fn) {
-        this.onChange = (val) => {
-            if (this.multiple()) {
-                fn(val);
-            }
-            else {
-                fn(val?.[0] ?? '');
-            }
-        };
-    }
+class OverlayOrigin {
     /**
-     * Registers a callback function to be called when the component is touched.
-     * @param fn - The callback function.
+     * Reference to the `CdkOverlayOrigin` instance.
+     * Used as the origin point for overlay positioning.
      */
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
+    trigger = inject(CdkOverlayOrigin);
     /**
-     * Sets the disabled state of the component.
-     * This method is called by Angular Forms to enable or disable the component.
-     * @param isDisabled - A boolean indicating whether the component should be disabled.
+     * Reference to the `ElementRef` of the host element.
+     * This is used to access the native DOM element.
      */
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: ComboboxComponent, isStandalone: true, selector: "b-combobox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "window:resize": "setButtonWidth()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ComboboxComponent),
-                multi: true,
-            },
-        ], queries: [{ propertyName: "command", first: true, predicate: CommandComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen.set(!isOpen())"
-      (keydown.arrowUp)="!isOpen() && isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && isOpen.set(true)"
-      [activeEnabled]="false"
-      bOverlayTrigger
-      #trigger="bOverlayTrigger"
-      [disabled]="disabled()">
-      <span>{{ content() }}</span>
-      <i b-icon icon="ChevronDown" [size]="16"></i>
-    </button>
-    <ng-template
-      bOverlay
-      [trigger]="trigger"
-      [open]="isOpen()"
-      [minWidth]="buttonWidth()"
-      [positions]="['bottom-left', 'bottom-right', 'top-left', 'top-right']"
-      [closeDelay]="closeDelay()"
-      (attach)="onOverlayAttached()"
-      (outsideClick)="isOpen.set(false)"
-      (detach)="isOpen.set(false)">
-      <ng-content />
-    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[b-button]", inputs: ["variant", "size", "activeEnabled", "squared"] }, { kind: "component", type: IconComponent, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: OverlayTriggerDirective, selector: "[bOverlayTrigger]", exportAs: ["bOverlayTrigger"] }, { kind: "directive", type: OverlayDirective, selector: "[bOverlay]", inputs: ["open", "trigger", "closeDelay", "positions"] }] });
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: OverlayOrigin, isStandalone: true, selector: "[bOverlayOrigin]", exportAs: ["bOverlayOrigin"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ComboboxComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayOrigin, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'b-combobox',
-                    imports: [
-                        ButtonComponent,
-                        IconComponent,
-                        OverlayTriggerDirective,
-                        OverlayDirective,
-                    ],
-                    template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen.set(!isOpen())"
-      (keydown.arrowUp)="!isOpen() && isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && isOpen.set(true)"
-      [activeEnabled]="false"
-      bOverlayTrigger
-      #trigger="bOverlayTrigger"
-      [disabled]="disabled()">
-      <span>{{ content() }}</span>
-      <i b-icon icon="ChevronDown" [size]="16"></i>
-    </button>
-    <ng-template
-      bOverlay
-      [trigger]="trigger"
-      [open]="isOpen()"
-      [minWidth]="buttonWidth()"
-      [positions]="['bottom-left', 'bottom-right', 'top-left', 'top-right']"
-      [closeDelay]="closeDelay()"
-      (attach)="onOverlayAttached()"
-      (outsideClick)="isOpen.set(false)"
-      (detach)="isOpen.set(false)">
-      <ng-content />
-    </ng-template>`,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ComboboxComponent),
-                            multi: true,
-                        },
-                    ],
+                    selector: '[bOverlayOrigin]',
+                    hostDirectives: [CdkOverlayOrigin],
+                    exportAs: 'bOverlayOrigin',
                 }]
-        }], propDecorators: { setButtonWidth: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
+        }] });
 
-class InputGroupComponent {
-    /**
-     * Sets the maximum width of the input group (e.g. 300px, 100%).
-     */
-    maxWidth = input('100%', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: InputGroupComponent, isStandalone: true, selector: "b-input-group", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.max-width": "maxWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+class InputGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: InputGroup, isStandalone: true, selector: "b-input-group", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-input-group',
                     template: `<ng-content />`,
-                    host: {
-                        '[style.max-width]': 'maxWidth()',
-                    },
                 }]
         }] });
 
-/**
- * DialogComponent acts as a custom container for dialogs opened via the Angular CDK Dialog module.
- * It provides custom close behavior (ESC key and outside click) and hosts the dialog content.
+/** Dialog content container that renders projected portal content for a dialog instance.
  *
- * @example
- * Used internally by DialogService. Not intended for direct use.
+ * @remarks Extends CdkDialogContainer to integrate with Angular CDK dialog infrastructure.
  */
-class DialogComponent extends CdkDialogContainer {
-    /**
-     * Injected instance of the DialogService.
-     * @internal
-     */
-    dialogService = inject(DialogService);
-    /**
-     * Injected reference to the current DialogRef.
-     * @internal
-     */
+class DialogContent extends CdkDialogContainer {
+    /** Reference to the active dialog instance used to control lifecycle and closing. */
     dialogRef = inject(DialogRef);
-    /**
-     * Injected reference to the host element.
-     * @internal
-     */
-    el = inject(ElementRef);
-    /**
-     * Signal indicating if the dialog is in the process of leaving (closing).
-     */
+    /** Service that orchestrates opening and closing of dialog instances. */
+    dialogService = inject(DialogService);
+    /** Tracks whether the dialog is in its leaving (closing) animation state. */
     leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : []));
-    /**
-     * Closes the dialog by calling the DialogService.
+    /** Initializes the dialog content component by calling the superclass constructor. */
+    constructor() {
+        super();
+    }
+    /** Initializes component logic and subscribes to dialog events. */
+    ngOnInit() {
+        this.handleDialogEvents();
+    }
+    /** Handles all dialog behavioral event subscriptions based on provided configuration data. */
+    handleDialogEvents() {
+        const data = this._config?.data;
+        if (!data) {
+            return;
+        }
+        this.handleBackdropClose(data);
+        this.handleEscapeKeyClose(data);
+    }
+    /** Subscribes to backdrop clicks to close the dialog when enabled in config.
+     *
+     * @param data - Dialog configuration containing close behavior flags.
      */
-    close(type) {
-        this.dialogService.closeDialog(this.dialogRef.id, type);
+    handleBackdropClose(data) {
+        if (data.closeOnBackdropClick) {
+            this.dialogRef.backdropClick.subscribe(() => {
+                this.dialogService.closeDialog(this.dialogRef.id);
+            });
+        }
     }
-    /**
-     * Listens for document click events and closes the dialog if the click occurs outside the dialog element.
-     * @param event MouseEvent
+    /** Subscribes to keydown events to close the dialog on Escape key when enabled.
+     *
+     * @param data - Dialog configuration containing close behavior flags.
      */
-    onDocumentClick(event) {
-        if (!this.el.nativeElement.contains(event.target)) {
-            this.close('outsideClick');
+    handleEscapeKeyClose(data) {
+        if (data.closeOnEscapeKey) {
+            this.dialogRef.keydownEvents.subscribe((event) => {
+                if (event.key === 'Escape') {
+                    this.dialogService.closeDialog(this.dialogRef.id);
+                }
+            });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DialogComponent, isStandalone: true, selector: "b-dialog", host: { listeners: { "keydown.escape": "close(\"escapeKey\")", "document:click": "onDocumentClick($event)" }, properties: { "class.leaving": "leaving()" } }, usesInheritance: true, ngImport: i0, template: `<ng-template cdkPortalOutlet />`, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DialogContent, isStandalone: true, selector: "b-dialog-content", host: { properties: { "class.leaving": "leaving()" } }, usesInheritance: true, ngImport: i0, template: `<ng-template cdkPortalOutlet />`, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-dialog',
+                    selector: 'b-dialog-content',
                     template: `<ng-template cdkPortalOutlet />`,
                     encapsulation: ViewEncapsulation.None,
-                    standalone: true,
                     imports: [CdkPortalOutlet],
                     host: {
-                        '(keydown.escape)': 'close("escapeKey")',
                         '[class.leaving]': 'leaving()',
                     },
                 }]
-        }], propDecorators: { onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
-// dialog.service.ts
 /**
- * Service responsible for managing and controlling dialogs registered via the `DialogDirective`.
- * It uses the Angular CDK Dialog module internally.
+ * Provides registration and lifecycle control for application dialogs.
  */
 class DialogService {
-    /**
-     * Injected instance of the Angular CDK `Dialog` service.
-     * @internal
-     */
-    dialog = inject(Dialog);
-    /**
-     * Injected instance of the `UtilsService`.
-     * @internal
-     */
+    /** Angular CDK dialog service used to manage overlay instances. */
+    dialog = inject(Dialog$1);
+    /** Utility service used for debounced close behavior. */
     utilsService = inject(UtilsService);
-    /**
-     * A map storing the registered dialog templates and their data, keyed by their unique ID.
-     * @internal
-     */
+    /** Registry mapping dialog identifiers to their data. */
     dialogs = new Map();
     /**
-     * Emits the ID of a dialog when it is closed.
-     */
-    dialogClosed = new EventEmitter();
-    /**
-     * Registers a dialog template and its data with the service.
-     * Typically called automatically by the `DialogDirective`.
+     * Registers a dialog definition under a unique identifier, overwriting any existing entry.
      *
-     * @param id - The unique identifier for the dialog.
-     * @param data - The dialog data containing the template and configuration.
+     * @param id - Unique identifier for the dialog.
+     * @param data - Template and configuration to register.
      */
-    addDialog(id, data) {
+    registerDialog(id, data) {
         if (this.dialogs.has(id)) {
             console.warn(`[DialogService] Dialog with id "${id}" is already registered. Overwriting.`);
         }
         this.dialogs.set(id, data);
     }
     /**
-     * Removes a dialog registration from the service.
-     * Typically called automatically by the `DialogDirective` when the template is destroyed.
+     * Removes a previously registered dialog definition.
      *
-     * @param id - The unique identifier of the dialog to remove.
+     * @param id - Identifier of the dialog to remove.
      */
     removeDialog(id) {
         this.dialogs.delete(id);
     }
     /**
-     * Opens the dialog associated with the given ID.
+     * Opens a dialog using its registered template and configuration.
      *
-     * @param id - The unique identifier of the dialog to open.
-     * @throws Error if a dialog with the specified ID is not found.
+     * @param id - Identifier of the dialog to open.
+     * @throws Error - When no dialog is registered with the provided identifier.
      */
     openDialog(id) {
         const dialogData = this.dialogs.get(id);
         if (!dialogData) {
             throw new Error(`[DialogService] Dialog with id "${id}" not found. Ensure the bDialog directive is applied correctly.`);
         }
-        this.utilsService.debounce('open-dialog-' + id, () => {
-            this.dialog.open(dialogData.template, {
-                id: id,
-                hasBackdrop: dialogData.config.hasBackdrop,
-                backdropClass: 'b-dialog-backdrop',
-                disableClose: true,
-                container: DialogComponent,
-            });
-        }, dialogData.config.openDelay);
+        this.dialog.open(dialogData.template, {
+            id: id,
+            disableClose: true,
+            restoreFocus: dialogData.config.restoreFocus,
+            backdropClass: 'b-dialog-content-backdrop',
+            container: DialogContent,
+            data: dialogData.config,
+        });
     }
     /**
-     * Closes the dialog associated with the given ID.
-     * Does nothing if no dialog with the specified ID is currently open.
+     * Closes a dialog by identifier applying any configured close delay.
      *
-     * @param id - The unique identifier of the dialog to close.
-     * @param type - The type of closing action.
+     * @param id - Identifier of the dialog to close.
      */
-    closeDialog(id, type = 'closeButton') {
+    closeDialog(id) {
         const config = this.dialogs.get(id)?.config;
         if (!config) {
             console.warn(`[DialogService] Attempted to close dialog with id "${id}", but no open dialog with that id was found.`);
             return;
         }
-        if ((type === 'escapeKey' && !config.closeOnEscapeKey) ||
-            (type === 'outsideClick' && !config.closeOnBackdropClick)) {
-            return;
-        }
         const dialogRef = this.dialog.getDialogById(id);
         if (dialogRef) {
             const container = dialogRef.containerInstance;
@@ -3530,8 +3187,6 @@ class DialogService {
                 if (container && container.leaving) {
                     container.leaving.set(false);
                 }
-                // Emit the closed dialog ID
-                this.dialogClosed.emit(id);
             }, config.closeDelay);
         }
         else {
@@ -3539,7 +3194,7 @@ class DialogService {
         }
     }
     /**
-     * Closes all currently open dialogs managed by the CDK Dialog service.
+     * Closes all currently open dialogs immediately.
      */
     closeAllDialogs() {
         this.dialog.closeAll();
@@ -3554,114 +3209,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-// dialog.directive.ts
 /**
- * Directive used to register an `ng-template` as a dialog with the `DialogService`.
- * Apply this directive to an `<ng-template>` element, providing a unique ID.
- * The service can then open this template as a dialog by referencing the ID.
+ * Directive that registers and controls a dialog template instance.
  *
- * @example
- * ```html
- * <ng-template bDialog="myModalId" [hasBackdrop]="false">
- * <h2>My Modal Content</h2>
- * <p>This is the content of the dialog.</p>
- * <button (click)="dialogService.closeDialog('myModalId')">Close</button>
- * </ng-template>
- * ```
+ * Registers itself in the {@link DialogService} on init and exposes open/close APIs.
  */
-class DialogDirective {
+class Dialog {
     /**
-     * The unique identifier for this dialog template. Used by the `DialogService` to open this specific dialog.
-     * Applied as the value of the `bDialog` attribute.
+     * Unique dialog identifier bound from the `bDialog` attribute.
      */
     id = input.required(...(ngDevMode ? [{ debugName: "id", alias: 'bDialog' }] : [{ alias: 'bDialog' }]));
     /**
-     * Determines whether the dialog should have a backdrop. Defaults to `true`.
+     * Whether the dialog renders a backdrop element.
+     *
+     * @defaultValue true
      */
     hasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
     /**
-     * Determines whether the dialog should close when the backdrop is clicked. Defaults to `true`.
+     * Closes the dialog when the user clicks on the backdrop.
+     *
+     * @defaultValue true
      */
     closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
     /**
-     * Determines whether the dialog should close when the escape key is pressed. Defaults to `true`.
+     * Closes the dialog when the Escape key is pressed while focused inside.
+     *
+     * @defaultValue true
      */
     closeOnEscapeKey = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscapeKey" }] : []));
     /**
-     * Determines whether the dialog should close when the escape key is pressed or when a pointer event occurs outside the dialog.
-     * Defaults to `false`.
+     * Restores focus to the previously focused element after the dialog closes.
+     *
+     * @defaultValue true
      */
     restoreFocus = input(true, ...(ngDevMode ? [{ debugName: "restoreFocus" }] : []));
     /**
-     * Computed signal that combines the template reference and configuration inputs
-     * into the `DialogData` structure expected by the `DialogService`.
+     * Delay in milliseconds before the dialog is fully closed (useful for animations).
+     *
+     * @defaultValue 150
+     */
+    closeDelay = input(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
+    /**
+     * Computed dialog data passed to the service containing template and configuration.
      */
     data = computed(() => ({
         template: this.templateRef,
         config: {
             hasBackdrop: this.hasBackdrop(),
-            openDelay: this.openDelay(),
-            closeDelay: this.closeDelay(),
             restoreFocus: this.restoreFocus(),
+            closeDelay: this.closeDelay(),
             closeOnBackdropClick: this.closeOnBackdropClick(),
             closeOnEscapeKey: this.closeOnEscapeKey(),
         },
     }), ...(ngDevMode ? [{ debugName: "data" }] : []));
     /**
-     * Delay in milliseconds before the dialog opens. Defaults to `0`.
+     * Delay in milliseconds before opening the dialog (for entrance timing / animations).
+     *
+     * @defaultValue 0
      */
     openDelay = input(0, ...(ngDevMode ? [{ debugName: "openDelay" }] : []));
     /**
-     * Delay in milliseconds before the dialog closes. Defaults to `150`.
-     */
-    closeDelay = input(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
-    /**
-     * Emits when the dialog is closed.
+     * Event emitted after the dialog has been programmatically or automatically closed.
      */
     closed = output();
     /**
-     * Injected instance of the `DialogService`.
-     * @internal
+     * Reference to the dialog service handling registration and state.
      */
     dialogService = inject(DialogService);
     /**
-     * Injected reference to the `ng-template` element this directive is applied to.
-     * @internal
+     * Template reference representing the dialog content projected when opened.
      */
-    templateRef = inject((TemplateRef)); // Specify type as any or a specific context type
+    templateRef = inject((TemplateRef));
     /**
-     * Lifecycle hook called after Angular has initialized all data-bound properties of a directive.
-     * Registers the dialog template and its configuration with the `DialogService`.
+     * Lifecycle hook that registers the dialog with the dialog service.
      */
     ngOnInit() {
-        this.dialogService.addDialog(this.id(), this.data());
+        this.dialogService.registerDialog(this.id(), this.data());
     }
     /**
-     * Opens the dialog using the `DialogService`.
-     * This method can be called to programmatically open the dialog.
+     * Opens the dialog via the dialog service using its identifier.
      */
     open() {
         this.dialogService.openDialog(this.id());
     }
     /**
-     * Closes the dialog using the `DialogService`.
-     * This method can be called to programmatically close the dialog.
+     * Closes the dialog and emits the `closed` output.
      */
     close() {
-        this.dialogService.closeDialog(this.id(), 'closeButton');
+        this.dialogService.closeDialog(this.id());
         this.closed.emit();
     }
     /**
-     * Lifecycle hook called once, before the directive is destroyed.
-     * Removes the dialog registration from the `DialogService`.
+     * Lifecycle hook that removes the dialog from the dialog service registry.
      */
     ngOnDestroy() {
         this.dialogService.removeDialog(this.id());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: DialogDirective, isStandalone: true, selector: "[bDialog]", inputs: { id: { classPropertyName: "id", publicName: "bDialog", isSignal: true, isRequired: true, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeKey: { classPropertyName: "closeOnEscapeKey", publicName: "closeOnEscapeKey", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown.escape": "closeOnEscapeKey() ? close() : null" } }, exportAs: ["bDialog"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: Dialog, isStandalone: true, selector: "[bDialog]", inputs: { id: { classPropertyName: "id", publicName: "bDialog", isSignal: true, isRequired: true, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeKey: { classPropertyName: "closeOnEscapeKey", publicName: "closeOnEscapeKey", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown.escape": "closeOnEscapeKey() ? close() : null" } }, exportAs: ["bDialog"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Dialog, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bDialog]',
@@ -3672,31 +3319,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class CardComponent {
-    /**
-     * The width of the card.
-     * @default '80vw'
-     */
-    maxWidth = input('80vw', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: CardComponent, isStandalone: true, selector: "b-card", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.maxWidth": "maxWidth()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class Card {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: Card, isStandalone: true, selector: "b-card", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card',
                     template: ` <ng-content /> `,
-                    host: {
-                        '[style.maxWidth]': 'maxWidth()',
-                    },
                 }]
         }] });
 
-class CardHeaderComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardHeaderComponent, isStandalone: true, selector: "b-card-header", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class CardHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardHeader, isStandalone: true, selector: "b-card-header", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card-header',
@@ -3704,11 +3343,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class CardTitleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardTitleComponent, isStandalone: true, selector: "b-card-title", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class CardTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardTitle, isStandalone: true, selector: "b-card-title", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTitle, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card-title',
@@ -3716,23 +3355,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class CardSubtitleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardSubtitleComponent, isStandalone: true, selector: "b-card-subtitle", ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardSubtitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-card-subtitle',
-                    template: ` <ng-content /> `,
-                }]
-        }] });
-
-class CardDescriptionComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardDescriptionComponent, isStandalone: true, selector: "b-card-description", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class CardDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardDescription, isStandalone: true, selector: "b-card-description", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardDescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardDescription, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card-description',
@@ -3740,11 +3367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class CardContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardContentComponent, isStandalone: true, selector: "b-card-content", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class CardContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardContent, isStandalone: true, selector: "b-card-content", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card-content',
@@ -3752,11 +3379,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
-class CardFooterComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardFooterComponent, isStandalone: true, selector: "b-card-footer", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+class CardFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: CardFooter, isStandalone: true, selector: "b-card-footer", ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-card-footer',
@@ -3884,5 +3511,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardSubtitleComponent, CardTitleComponent, Checkbox, ColorPickerComponent, ComboboxComponent, CommandComponent, CommandOptionsComponent, DialogDirective, DialogService, DrawerComponent, IconComponent, InViewportDirective, InViewportService, InputComponent, InputGroupComponent, LazyContentDirective, MenuComponent, MenuGroupComponent, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabelComponent, MenuTriggerDirective, OptionComponent, OtpComponent, OtpDigitDirective, OverlayDirective, OverlayTriggerDirective, RangeComponent, ResponsiveService, RowComponent, RowItemComponent, SelectComponent, SelectOptionsComponent, SheetComponent, SpinnerComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TextareaComponent, ThemeService, TooltipDirective, TranslatePipe, TranslationService, TreeComponent, TreeNodeComponent };
+export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogService, Drawer, Input, InputGroup, LazyContentDirective, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, OverlayOrigin, Range, ResponsiveService, RowComponent, RowItemComponent, Select, SelectContent, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, TableComponent, Tabs, TextareaComponent, ThemeService, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationService, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map