npm - @basis-ng/primitives - Versions diffs - 0.0.1-alpha.9 → 0.0.1-alpha.91 - Mend

@basis-ng/primitives 0.0.1-alpha.9 → 0.0.1-alpha.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/fesm2022/basis-ng-primitives.mjs CHANGED Viewed

@@ -1,18 +1,25 @@
 import * as i0 from '@angular/core';
-import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, model, computed, output, contentChildren, viewChild, contentChild, linkedSignal, forwardRef, effect, HostListener, afterNextRender, afterRenderEffect } from '@angular/core';
-import { NgStyle, NgClass, CommonModule } 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 { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-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/drag-drop';
+import * as i1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
+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 { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
-import * as i1$2 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import * as i1$3 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 as Dialog$1 } from '@angular/cdk/dialog';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { HttpClient } from '@angular/common/http';
-class ThemeService {
+class ThemeManager {
     /**
      * Signal representing the current theme.
      *
@@ -21,7 +28,7 @@ class ThemeService {
      * - `'dark'`: Dark theme.
      * - `'auto'`: Automatically determine the theme.
      */
-    theme = signal('auto');
+    theme = signal('auto', ...(ngDevMode ? [{ debugName: "theme" }] : []));
     /**
      * Renderer2 instance for manipulating the DOM.
      * Used to set the `data-theme` attribute on the document root (`<html>`).
@@ -32,6 +39,14 @@ class ThemeService {
      * Injected to create the renderer.
      */
     rendererFactory = inject(RendererFactory2);
+    /**
+     * PLATFORM_ID token to identify the platform.
+     */
+    platformId = inject(PLATFORM_ID);
+    /**
+     * Flag indicating whether the application is running in a browser.
+     */
+    isBrowser = isPlatformBrowser(this.platformId);
     constructor() {
         this.renderer = this.rendererFactory.createRenderer(null, null);
     }
@@ -49,7 +64,10 @@ class ThemeService {
             this.removeTheme();
             return;
         }
-        this.renderer.setAttribute(document.documentElement, 'data-theme', theme);
+        if (this.isBrowser) {
+            // Safe DOM access only in browser
+            this.renderer.setAttribute(document.documentElement, 'data-theme', theme);
+        }
     }
     /**
      * Toggles the theme between `'light'` and `'dark'`.
@@ -63,71 +81,81 @@ class ThemeService {
      * This is used when the theme is set to `'auto'`.
      */
     removeTheme() {
-        this.renderer.removeAttribute(document.documentElement, 'data-theme');
+        if (this.isBrowser) {
+            this.renderer.removeAttribute(document.documentElement, 'data-theme');
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ThemeManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ThemeManager, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ThemeManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
-class Spinner {
-    active = input(true);
-    color = input('var(--foreground)');
-    backgroundColor = input('transparent');
-    size = input(20);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Spinner, 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()) {\r\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\r\n    <svg\r\n      [attr.height]=\"size()\"\r\n      [attr.width]=\"size()\"\r\n      preserveAspectRatio=\"xMidYMid\"\r\n      style=\"\r\n        shape-rendering: auto;\r\n        display: block;\r\n        background: rgba(122, 122, 122, 0);\r\n      \"\r\n      viewBox=\"0 0 100 100\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g>\r\n        <g transform=\"rotate(0 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.9166666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(30 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.8333333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(60 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.75s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(90 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.6666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(120 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5833333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(150 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(180 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.4166666666666667s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(210 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.3333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(240 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.25s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(270 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.16666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(300 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.08333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(330 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"0s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g />\r\n      </g>\r\n    </svg>\r\n  </section>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Spinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'b-spinner', imports: [NgStyle], template: "@if (active()) {\r\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\r\n    <svg\r\n      [attr.height]=\"size()\"\r\n      [attr.width]=\"size()\"\r\n      preserveAspectRatio=\"xMidYMid\"\r\n      style=\"\r\n        shape-rendering: auto;\r\n        display: block;\r\n        background: rgba(122, 122, 122, 0);\r\n      \"\r\n      viewBox=\"0 0 100 100\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g>\r\n        <g transform=\"rotate(0 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.9166666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(30 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.8333333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(60 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.75s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(90 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.6666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(120 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5833333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(150 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(180 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.4166666666666667s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(210 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.3333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(240 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.25s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(270 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.16666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(300 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.08333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(330 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"0s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g />\r\n      </g>\r\n    </svg>\r\n  </section>\r\n}\r\n" }]
-        }] });
+/**
+ * Button component for displaying a clickable button element with configurable variant, size, and shape.
+ *
+ * @public
+ */
 class Button {
-    /** The variant of the button. */
-    variant = input('primary');
-    /** The size of the button. */
-    size = input('default');
-    /** Whether is loading. */
-    loading = input(false);
-    /** Whether the padding should be equal vertically and horizontally. */
-    equalPadding = input(false);
-    /** Whether the button is toggleable. */
-    toggle = input(false);
-    /** The value of the button when it is toggled. */
-    isToggled = input(false);
-    /**  Whether the button active animation is enabled. */
-    activeEnabled = input(true);
-    /** The element reference of the button. */
+    /**
+     * The visual variant of the button.
+     *
+     * @defaultValue 'primary'
+     */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * The size of the button.
+     *
+     * @defaultValue 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * If true, the button will have squared edges.
+     *
+     * @defaultValue false
+     */
+    squared = input(false, ...(ngDevMode ? [{ debugName: "squared" }] : []));
+    /**
+     * Reference to the underlying DOM element.
+     */
     el = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, equalPadding: { classPropertyName: "equalPadding", publicName: "equalPadding", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, isToggled: { classPropertyName: "isToggled", publicName: "isToggled", isSignal: true, isRequired: false, transformFunction: null }, activeEnabled: { classPropertyName: "activeEnabled", publicName: "activeEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" size-\" + size()", "class.equal-padding": "equalPadding()", "class.loading": "loading()", "class.toggled": "isToggled()", "class.active": "activeEnabled()" } }, ngImport: i0, template: "@if (loading()) {\r\n  <b-spinner\r\n    [active]=\"loading()\"\r\n    [size]=\"18\"\r\n    [color]=\"\r\n      variant() === 'primary'\r\n        ? 'var(--primary-foreground)'\r\n        : 'var(--secondary-foreground)'\r\n    \" />\r\n}\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: Spinner, selector: "b-spinner", inputs: ["active", "color", "backgroundColor", "size"] }] });
+    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: "19.2.7", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Button, decorators: [{
             type: Component,
-            args: [{ selector: 'button[b-button]', imports: [Spinner], host: {
-                        '[class]': 'variant() + " size-" + size()',
-                        '[class.equal-padding]': 'equalPadding()',
-                        '[class.loading]': 'loading()',
-                        '[class.toggled]': 'isToggled()',
-                        '[class.active]': 'activeEnabled()',
-                    }, template: "@if (loading()) {\r\n  <b-spinner\r\n    [active]=\"loading()\"\r\n    [size]=\"18\"\r\n    [color]=\"\r\n      variant() === 'primary'\r\n        ? 'var(--primary-foreground)'\r\n        : 'var(--secondary-foreground)'\r\n    \" />\r\n}\r\n<ng-content />\r\n" }]
+            args: [{
+                    selector: 'button[b-button]',
+                    template: ` <ng-content /> `,
+                    host: {
+                        '[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 ButtonGroup {
     /**
      * Whether the buttons should be spaced.
+     *
+     * @defaultValue false
      */
-    spaced = input(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", 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 });
+    spaced = input(false, ...(ngDevMode ? [{ debugName: "spaced" }] : []));
+    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: "19.2.7", ngImport: i0, type: ButtonGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-button-group',
@@ -141,10 +169,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class LazyContentDirective {
     tpl = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LazyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: LazyContentDirective, isStandalone: true, selector: "[b-lazy]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LazyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: LazyContentDirective, isStandalone: true, selector: "[b-lazy]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LazyContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LazyContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[b-lazy]',
@@ -156,47 +184,19 @@ class Input {
     /**
      * The type of the input.
      */
-    type = input('text');
-    /**
-     * The placeholder text for the input.
-     */
-    placeholder = input('');
-    /**
-     * The value of the input.
-     */
-    value = signal(null);
-    /**
-     * Whether the input is invalid.
-     */
-    invalid = model(false);
-    /**
-     * Whether the input is disabled.
-     */
-    disabled = model(false);
-    /**
-     * The maximum width of the input.
-     */
-    maxWidth = input('');
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     /**
      * The number of decimal places for number input.
      */
-    decimals = input(2);
+    decimals = input(2, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
     /**
      * The type of number input (integer or decimal).
      */
-    numberType = input('integer');
+    numberType = input('integer', ...(ngDevMode ? [{ debugName: "numberType" }] : []));
     /**
      * Whether the input type is number.
      */
-    isNumberType = computed(() => this.type() === 'number');
-    /**
-     * Whether the input is focused.
-     */
-    focused = signal(false);
-    /**
-     * Event emitted when the value changes.
-     */
-    valueChange = output();
+    isNumberType = computed(() => this.type() === 'number', ...(ngDevMode ? [{ debugName: "isNumberType" }] : []));
     /**
      * Reference to the input element.
      */
@@ -205,12 +205,26 @@ class Input {
      * Reference to the ngModel directive.
      */
     ngModel = inject(NgModel, { optional: true });
+    /**
+     * The size of the input.
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * After the view has been initialized, set the value of the select.
      */
     ngAfterViewInit() {
         const value = this.el.nativeElement.value || this.ngModel?.model;
-        this.value.set(this.isNumberType() ? this.formatNumber(value) : value);
+        if (this.isNumberType()) {
+            const formattedValue = this.formatNumber(value) || '';
+            this.setValue(formattedValue);
+        }
+    }
+    /**
+     * Sets the value of the input element.
+     * @param value The value to set.
+     */
+    setValue(value) {
+        this.el.nativeElement.value = value;
     }
     /**
      * Handles the input event.
@@ -220,8 +234,7 @@ class Input {
         const target = event.target;
         // If the input is not of number type, update the value and emit the value change event.
         if (!this.isNumberType()) {
-            this.value.set(target.value);
-            this.valueChange.emit(target.value);
+            this.setValue(target.value);
         }
     }
     /**
@@ -229,13 +242,10 @@ class Input {
      * @param event - The blur event.
      */
     onBlur(event) {
-        this.focused.set(false);
         // If the input is of number type, format the value and emit the value change event.
         if (this.isNumberType()) {
             const formattedValue = this.formatNumber(event.target.value);
-            this.el.nativeElement.value = formattedValue || '';
-            this.value.set(formattedValue);
-            this.valueChange.emit(formattedValue);
+            this.setValue(formattedValue || '');
         }
     }
     /**
@@ -254,332 +264,625 @@ class Input {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Input, isStandalone: true, selector: "input[b-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "input": "onInput($event)", "focus": "focused.set(true)", "blur": "onBlur($event)" }, properties: { "type": "type()", "placeholder": "placeholder() || \"\"", "class.ng-invalid": "invalid()", "class.disabled": "disabled()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ``, isInline: true });
+    /**
+     * Método público para disparar el formateo como si se hiciera blur.
+     */
+    blur() {
+        if (this.isNumberType()) {
+            const value = this.el.nativeElement.value;
+            const formattedValue = this.formatNumber(value);
+            this.setValue(formattedValue || '');
+        }
+    }
+    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: "19.2.7", ngImport: i0, type: Input, 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()',
-                        '[placeholder]': 'placeholder() || ""',
-                        '[class.ng-invalid]': 'invalid()',
-                        '[class.disabled]': 'disabled()',
-                        '[style.max-width]': 'maxWidth()',
                         '(input)': 'onInput($event)',
-                        '(focus)': 'focused.set(true)',
                         '(blur)': 'onBlur($event)',
+                        '[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.
+ * Directive to manage overlay behavior and positioning.
+ * Integrates with Angular CDK's `CdkConnectedOverlay` to provide
+ * flexible overlay positioning and triggering mechanisms.
  */
-class OptionComponent {
+class ConnectedOverlay {
+    /**
+     * Controls whether the overlay is open.
+     * @default false
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * The trigger directive that activates the overlay.
+     * This input is required.
+     */
+    trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /**
+     * A computed map of positions to their corresponding `ConnectedPosition` configurations.
+     */
+    positionsMap = computed(() => ({
+        'top-left': {
+            originX: 'start',
+            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" }] : []));
+    /**
+     * List of positions for the overlay.
+     * @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.
+     */
+    connectedPositions = computed(() => this.positions().map(position => this.positionsMap()[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
+    /**
+     * Signal to track the currently active `ConnectionPositionPair`.
+     */
+    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0]);
+    /**
+     * Injected instance of `CdkConnectedOverlay`.
+     */
+    cdkConnectedOverlay = inject(CdkConnectedOverlay);
+    /**
+     * Injected instance of `Overlay`.
+     */
+    overlay = inject(Overlay);
+    /**
+     * Computed direction of the overlay based on the active position pair.
+     */
+    direction = computed(() => {
+        const pair = this.connectedPositionPair();
+        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" }] : []));
+    /**
+     * 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();
     /**
-     * The `ElementRef` of the option.
-     * This provides direct access to the DOM element of the option.
+     * Flag to indicate if this is the first load of the overlay.
      */
-    el = inject(ElementRef);
+    firstLoad = true;
     /**
-     * The `CdkOption` instance associated with this option.
-     * This provides methods and properties for managing the option's state, such as selection and value.
+     * Constructor to initialize the directive and set up reactive effects.
      */
-    cdkOption = inject(CdkOption);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: OptionComponent, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    constructor() {
+        effect(() => {
+            this.handleOrigin();
+            this.handleConnectedPositions();
+            this.handleOpen();
+        });
+    }
+    /**
+     * Handles the origin of the overlay.
+     * This method sets the `cdkConnectedOverlay.origin` to the trigger element.
+     */
+    handleOrigin() {
+        this.cdkConnectedOverlay.origin = this.trigger().trigger;
+    }
+    /**
+     * Handles the connected positions for the overlay.
+     * This method updates the `cdkConnectedOverlay` positions based on the current state.
+     */
+    handleConnectedPositions() {
+        this.cdkConnectedOverlay.positions = this.connectedPositions();
+    }
+    /**
+     * Handles the opening and closing of the overlay based on the `open` input.
+     * Determines whether to open or close the overlay and invokes the appropriate method.
+     */
+    handleOpen() {
+        if (this.open()) {
+            this.cdkConnectedOverlay.attachOverlay();
+        }
+        else {
+            this.cdkConnectedOverlay.detachOverlay();
+            if (this.focusTriggerOnClose())
+                this.trigger().el.nativeElement.focus();
+        }
+    }
+    /**
+     * Toggles the open state of the overlay.
+     * If the overlay is open, it will be closed, and vice versa.
+     */
+    toggleOverlay() {
+        this.open.set(!this.open());
+    }
+    /**
+     * Closes the overlay by setting the `open` state to false.
+     */
+    closeOverlay() {
+        this.open.set(false);
+    }
+    /**
+     * Opens the overlay by setting the `open` state to true.
+     */
+    openOverlay() {
+        this.open.set(true);
+    }
+    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: "19.2.7", ngImport: i0, type: OptionComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConnectedOverlay, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'li[b-option]',
-                    imports: [],
-                    template: `<ng-content />`,
+                    selector: '[bConnectedOverlay]',
                     hostDirectives: [
                         {
-                            directive: CdkOption,
-                            inputs: ['cdkOption: value'],
+                            directive: CdkConnectedOverlay,
+                            inputs: [
+                                'cdkConnectedOverlayWidth: width',
+                                'cdkConnectedOverlayMinWidth: minWidth',
+                                'cdkConnectedOverlayBackdropClass: customBackdropClass',
+                                'cdkConnectedOverlayPanelClass: panelClass',
+                            ],
+                            outputs: [
+                                '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 the list of options in a select.
- * This component integrates with Angular CDK Listbox to manage options and their selection.
+ * Component representing the trigger button for the select dropdown.
+ * Handles user interactions to open or close the select.
  */
-class SelectOptionsComponent {
-    /**
-     * Signal representing the selected values in the listbox.
-     * This is an array of strings corresponding to the selected option values.
-     */
-    value = signal([]);
+class SelectTrigger {
     /**
-     * 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.
+     * Reference to the host element of the trigger button.
      */
     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');
+     * 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 CDK Listbox directive.
-     * This is used to manage the options and their selection state.
+     * Reference to the host element of the value display.
      */
-    listBox = inject(CdkListbox);
+    el = inject(ElementRef);
     /**
-     * Reference to the list of options in the dropdown.
-     * This is a collection of `OptionComponent` instances representing the available options.
+     * Signal holding the display content for the selected value.
      */
-    options = contentChildren(OptionComponent);
+    content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
     /**
-     * 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.
+     * Input signal for the placeholder text when no value is selected.
+     * @param value - The placeholder string to display.
      */
-    handleValueChange(value) {
-        this.value.set(value);
-        this.closeEmitter.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectOptionsComponent, isStandalone: true, selector: "ul[b-select-options]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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: "19.2.7", ngImport: i0, type: SelectOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectValue, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ul[b-select-options]',
-                    imports: [],
-                    template: `<ng-content />`,
-                    hostDirectives: [
-                        {
-                            directive: CdkListbox,
-                            inputs: ['cdkListboxValue'],
-                            outputs: ['cdkListboxValueChange'],
-                        },
-                    ],
-                    host: {
-                        '[cdkListboxValue]': 'value()',
-                        '(cdkListboxValueChange)': 'handleValueChange($event.value)',
-                        '[style.max-height]': 'maxHeight()',
-                    },
+                    selector: 'b-select-value',
+                    template: `{{ content() || placeholder() }}`,
                 }]
         }] });
-class Icon {
+/**
+ * Component representing the content of a select dropdown.
+ * Manages the list of options and their selection state.
+ */
+class SelectContent {
     /**
-     * The sanitizer service.
+     * Reference to the host element of the component.
      */
-    sanitizer = inject(DomSanitizer);
+    el = inject(ElementRef);
     /**
-     * The icon of the text field.
+     * Reference to the CDK Listbox directive.
      */
-    icon = input.required();
+    listBox = inject(CdkListbox);
     /**
-     * The size of the icon.
+     * Collection of CdkOption elements within the listbox.
      */
-    size = input(24);
+    options = contentChildren(CdkOption, ...(ngDevMode ? [{ debugName: "options" }] : []));
     /**
-     * The stroke of the icon.
+     * Key manager for handling keyboard navigation and active descendant management.
      */
-    strokeWidth = input(1.8);
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.options())
+        .withWrap()
+        .withVerticalOrientation(), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
     /**
-     * The color of the icon.
+     * Event emitter that emits when the value changes.
      */
-    color = input('var(--foreground, #798194)');
+    changeValueEmitter = output();
     /**
-     * The svg of the icon.
+     * Input signal indicating whether multiple selections are allowed.
      */
-    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);
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Icon, 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 });
+    multiple = model(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /**
+     * Reference to the ConnectedOverlay to determine the direction of the overlay.
+     */
+    overlay = inject(ConnectedOverlay$1);
+    /**
+     * Computed signal representing the direction of the overlay.
+     */
+    direction = computed(() => this.overlay.direction(), ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Lifecycle hook that initializes the component.
+     * Enables the use of active descendant for the listbox.
+     */
+    ngOnInit() {
+        this.listBox.useActiveDescendant = true;
+    }
+    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: "19.2.7", ngImport: i0, type: Icon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'i[b-icon]',
+                    selector: 'ul[b-select-content]',
                     imports: [],
-                    template: ``,
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: ['cdkListboxMultiple: multiple'],
+                            outputs: ['cdkListboxValueChange'],
+                        },
+                    ],
                     host: {
-                        '[innerHTML]': 'iconSvg()',
+                        '(cdkListboxValueChange)': 'changeValueEmitter.emit($event.value)',
+                        '[animate.enter]': '"b-select-content-entering-" + this.direction()',
+                        '[animate.leave]': '"b-select-content-leaving-" + this.direction()',
                     },
                 }]
         }] });
 /**
- * Component representing a custom select dropdown.
- * This component provides a button to toggle the dropdown and displays the selected option(s).
+ * Select component that provides a customizable dropdown selection interface.
+ * Implements ControlValueAccessor for form integration.
  */
-class SelectComponent {
+class Select {
     /**
-     * Placeholder text displayed when no option is selected.
-     * Defaults to 'Select an option'.
+     * Reference to the overlay directive instance.
+     * Used to control the dropdown overlay for the select component.
      */
-    placeholder = input('Select an option');
+    overlay = contentChild(ConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
     /**
-     * Signal indicating whether the dropdown is currently open.
+     * Reference to the select trigger component.
+     * Used to handle trigger events (click, keydown) for opening/closing the select.
      */
-    isOpen = signal(false);
+    selectTrigger = contentChild(SelectTrigger, ...(ngDevMode ? [{ debugName: "selectTrigger" }] : []));
     /**
-     * Reference to the button element used to toggle the dropdown.
-     * This is used for managing focus and interactions.
+     * Reference to the select value component.
+     * Used to display the selected value(s).
      */
-    button = viewChild(Button);
+    selectValue = contentChild(SelectValue, ...(ngDevMode ? [{ debugName: "selectValue" }] : []));
     /**
-     * Reference to the content component of the dropdown.
-     * This contains the list of selectable options.
+     * Reference to the select content component.
+     * Used to manage the list of selectable options.
      */
-    optionsList = contentChild(SelectOptionsComponent);
+    selectContent = contentChild(SelectContent, ...(ngDevMode ? [{ debugName: "selectContent" }] : []));
     /**
-     * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `OptionsListComponent`.
+     * Input signal for the size of the select component.
+     * Can be 'sm', 'md', or 'lg'. Default is 'md'.
      */
-    value = linkedSignal(() => this.optionsList()?.value());
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Input for setting the maximum width of the dropdown.
-     * Defaults to '100%'.
+     * Input signal for a function to display the selected value(s).
+     * This function receives the value array and returns a string for display.
      */
-    maxWidth = input('100%');
+    displayWith = input.required(...(ngDevMode ? [{ debugName: "displayWith" }] : []));
     /**
-     * Computed signal for the width of the button element.
-     * This is used to set the width of the dropdown overlay.
+     * Signal holding the current selected value(s).
      */
-    buttonWidth = computed(() => this.button()?.el.nativeElement.offsetWidth);
+    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
-     * Model indicating whether the select component is disabled.
-     * When disabled, the dropdown cannot be opened or interacted with.
+     * Initializes effects for value changes and content width adjustment.
      */
-    disabled = model(false);
+    constructor() {
+        effect(() => {
+            this.handleValueChanges();
+            this.handleSelectContentWidth();
+        });
+    }
     /**
-     * Computed signal representing the options available in the dropdown.
-     * This retrieves the options from the `OptionsListComponent`.
+     * Subscribes to value changes from the select content and updates the model.
+     * Closes the overlay if not in multiple selection mode.
      */
-    options = computed(() => this.optionsList()?.options());
+    handleValueChanges() {
+        this.selectContent()?.changeValueEmitter.subscribe((value) => {
+            this.onChange(value);
+            if (!this.selectContent()?.listBox.multiple) {
+                this.overlay()?.closeOverlay();
+            }
+            this.onTouched();
+        });
+    }
     /**
-     * Computed signal representing the content of the selected option(s).
-     * If no option is selected, it returns the placeholder text.
+     * Sets the minimum width of the select content to match the trigger width.
      */
-    content = computed(() => {
-        const selected = this.value();
-        if (selected && selected.length > 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();
+    handleSelectContentWidth() {
+        const selectContentEl = this.selectContent()?.el.nativeElement;
+        if (selectContentEl) {
+            selectContentEl.style.minWidth = `${this.selectTrigger()?.el.nativeElement.offsetWidth}px`;
         }
-    });
-    /**
-     * Signal representing the delay before closing the dropdown.
-     * This is used to provide a smooth transition when closing the dropdown.
-     */
-    closeDelay = signal(150);
+    }
     /**
-     * Reference to the CdkConnectedOverlay directive.
-     * This is used to manage the positioning and visibility of the dropdown overlay.
+     * Angular lifecycle hook. Sets up event handlers for overlay and trigger interactions.
      */
-    cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
+    ngOnInit() {
+        this.handleTriggerClicks();
+        this.handleOverlayAttached();
+        this.handleOverlayDetached();
+        this.handleOverlayOutsideClick();
+        this.handleOverlayBackdropClick();
+        this.handlePanelSizeClass();
+    }
     /**
-     * Lifecycle hook that is called after the component is initialized.
-     * It sets up the necessary subscriptions for handling value changes.
+     * Handles clicks and keydown events on the select trigger to toggle the overlay.
      */
-    ngOnInit() {
-        this.handleSelectedValueChange();
+    handleTriggerClicks() {
+        this.selectTrigger().buttonClicked.subscribe(() => {
+            this.overlay()?.toggleOverlay();
+        });
     }
     /**
-     * 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.
+     * Handles overlay attachment event. Selects current values and focuses the content.
      */
-    handleSelectedValueChange() {
-        this.optionsList()?.closeEmitter.subscribe(() => {
-            this.onChange(this.value()); // Notify Angular Forms about the change
-            this.onTouched(); // Mark the component as touched
-            this.close(); // Close the dropdown
+    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();
+            });
         });
     }
     /**
-     * Opens the dropdown and focuses the listbox.
-     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
+     * Handles overlay detachment event. Closes the overlay.
      */
-    open() {
-        this.isOpen.set(true);
-        setTimeout(() => this.optionsList()?.el.nativeElement.focus(), 0);
+    handleOverlayDetached() {
+        this.overlay()?.detachEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
     }
     /**
-     * Closes the dropdown with a transition effect and refocuses the button.
-     * This method sets the `isOpen` signal to `false` after a delay and removes
-     * the transition class from the overlay panel.
+     * Handles outside click event on the overlay. Closes the overlay.
      */
-    close() {
-        this.cdkConnectedOverlay()?.overlayRef.addPanelClass('cdk-overlay-pane-closing');
-        setTimeout(() => {
-            this.isOpen.set(false);
-            this.cdkConnectedOverlay()?.overlayRef.removePanelClass('cdk-overlay-pane-closing');
-            this.button()?.el.nativeElement.focus();
-        }, this.closeDelay());
+    handleOverlayOutsideClick() {
+        this.overlay()?.outsideClickEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
     }
-    // Control Value Accessor methods
     /**
-     * Callback function to propagate changes to the model.
-     * This is called whenever the value changes.
+     * Handles backdrop click event on the overlay. Closes the overlay.
      */
-    onChange = () => undefined;
+    handleOverlayBackdropClick() {
+        this.overlay()?.backdropClickEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
+    }
     /**
-     * Callback function to mark the component as touched.
-     * This is called when the component loses focus.
+     * Sets the panel size class on the overlay based on the select size input.
      */
-    onTouched = () => undefined;
+    handlePanelSizeClass() {
+        this.overlay().cdkConnectedOverlay.panelClass = `b-size-${this.size()}`;
+    }
+    // Control value accessor methods
     /**
-     * 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.
+     * Writes a new value to the select component.
+     * @param value - The new value array to set.
      */
     writeValue(value) {
-        if (value) {
-            value.forEach(value => {
-                this.optionsList()?.listBox?.selectValue(value);
-            });
-            this.value.set(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 = fn;
+        this.onChange = (val) => {
+            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.
@@ -588,139 +891,193 @@ 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: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, 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: Button, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen() ? close() : open()"
-      (keydown.arrowUp)="!isOpen() && open()"
-      (keydown.arrowDown)="!isOpen() && open()"
-      cdkOverlayOrigin
-      [activeEnabled]="false"
-      #trigger="cdkOverlayOrigin">
-      {{ content() }}
-      <i b-icon icon="ChevronDown" [size]="20"></i>
-    </button>
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayWidth]="buttonWidth()"
-      [cdkConnectedOverlayHasBackdrop]="true"
-      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-      [cdkConnectedOverlayPositions]="[
-        {
-          originX: 'start',
-          originY: 'bottom',
-          overlayX: 'start',
-          overlayY: 'top',
-          offsetY: 5,
-        },
-        {
-          originX: 'start',
-          originY: 'top',
-          overlayX: 'start',
-          overlayY: 'bottom',
-          offsetY: -5,
-        },
-      ]"
-      (backdropClick)="close()"
-      (detach)="close()">
-      <ng-content />
-    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[b-button]", inputs: ["variant", "size", "loading", "equalPadding", "toggle", "isToggled", "activeEnabled"] }, { kind: "component", type: Icon, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], 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: "19.2.7", 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: [Button, Icon, CdkConnectedOverlay, CdkOverlayOrigin],
-                    template: ` <button
-      b-button
-      variant="outlined"
-      (click)="isOpen() ? close() : open()"
-      (keydown.arrowUp)="!isOpen() && open()"
-      (keydown.arrowDown)="!isOpen() && open()"
-      cdkOverlayOrigin
-      [activeEnabled]="false"
-      #trigger="cdkOverlayOrigin">
-      {{ content() }}
-      <i b-icon icon="ChevronDown" [size]="20"></i>
-    </button>
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayWidth]="buttonWidth()"
-      [cdkConnectedOverlayHasBackdrop]="true"
-      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-      [cdkConnectedOverlayPositions]="[
-        {
-          originX: 'start',
-          originY: 'bottom',
-          overlayX: 'start',
-          overlayY: 'top',
-          offsetY: 5,
-        },
-        {
-          originX: 'start',
-          originY: 'top',
-          overlayX: 'start',
-          overlayY: 'bottom',
-          offsetY: -5,
-        },
-      ]"
-      (backdropClick)="close()"
-      (detach)="close()">
-      <ng-content />
-    </ng-template>`,
-                    host: {
-                        '[style.max-width]': 'maxWidth()',
-                        '[class.disabled]': 'disabled()',
-                    },
+                    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"',
+                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
-class Switch {
+/**
+ * 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 {
     /**
-     * Value of the switch.
+     * The `ElementRef` of the option.
+     * This provides direct access to the DOM element of the option.
      */
-    value = model(false);
+    el = inject(ElementRef);
     /**
-     * The size of the switch.
+     * The `CdkOption` instance associated with this option.
+     * This provides methods and properties for managing the option's state, such as selection and value.
      */
-    size = input('default');
+    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'],
+                        },
+                    ],
+                }]
+        }] });
+/**
+ * Adds automatic focus and blur behavior to a select filter input element.
+ *
+ * Applies focus on initialization and refocuses on blur events.
+ */
+class SelectFilter {
     /**
-     * Reference to the switch element.
+     * Reference to the host DOM element.
      */
     el = inject(ElementRef);
     /**
-     * Event emitted when the value changes.
-     */
-    valueChange = output();
-    /**
-     * Initializes the switch value after the view is initialized.
+     * Sets focus to the host element when the directive initializes.
      */
-    ngAfterViewInit() {
+    ngOnInit() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: SelectFilter, isStandalone: true, selector: "[bSelectFilter]", host: { listeners: { "blur": "el.nativeElement.focus()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectFilter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bSelectFilter]',
+                    host: {
+                        '(blur)': 'el.nativeElement.focus()',
+                    },
+                }]
+        }] });
+/**
+ * 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: Spinner, decorators: [{
+            type: Component,
+            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 = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * The size of the switch.
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Reference to the switch element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Initializes the switch value after the view is initialized.
+     */
+    ngAfterViewInit() {
         this.value.set(this.el.nativeElement.checked);
     }
     /**
@@ -739,10 +1096,10 @@ class Switch {
         this.value.set(newValue);
         this.valueChange.emit(newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Switch, 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 ɵ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: { 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: "19.2.7", ngImport: i0, type: Switch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-switch]',
@@ -752,7 +1109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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)',
@@ -760,345 +1119,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
-class Table {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: Table, isStandalone: true, selector: "b-table", ngImport: i0, template: "<ng-content select=\"[b-row-header]\" />\r\n<ng-content select=\"[b-row-subheader]\" />\r\n<div class=\"scroll-section\">\r\n  <ng-content />\r\n</div>\r\n" });
+class TableComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: TableComponent, isStandalone: true, selector: "b-table", ngImport: i0, template: "<ng-content select=\"[b-row-header]\" />\n<ng-content select=\"[b-row-subheader]\" />\n<div class=\"scroll-section\">\n  <ng-content />\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'b-table', template: "<ng-content select=\"[b-row-header]\" />\r\n<ng-content select=\"[b-row-subheader]\" />\r\n<div class=\"scroll-section\">\r\n  <ng-content />\r\n</div>\r\n" }]
+            args: [{ selector: 'b-table', template: "<ng-content select=\"[b-row-header]\" />\n<ng-content select=\"[b-row-subheader]\" />\n<div class=\"scroll-section\">\n  <ng-content />\n</div>\n" }]
         }] });
-class Row {
-    header = input(false);
-    subheader = input(false);
-    clickable = input(false);
-    highlighted = input(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Row, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Row, isStandalone: true, selector: "b-row", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"row-container\"\r\n  [ngClass]=\"{\r\n    clickable: clickable(),\r\n    header: header(),\r\n    subheader: subheader(),\r\n    highlighted: highlighted(),\r\n  }\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+class RowComponent {
+    header = input(false, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    subheader = input(false, ...(ngDevMode ? [{ debugName: "subheader" }] : []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    highlighted = input(false, ...(ngDevMode ? [{ debugName: "highlighted" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: RowComponent, isStandalone: true, selector: "b-row", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"row-container\"\n  [ngClass]=\"{\n    clickable: clickable(),\n    header: header(),\n    subheader: subheader(),\n    highlighted: highlighted(),\n  }\">\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Row, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'b-row', imports: [NgClass], template: "<div\r\n  class=\"row-container\"\r\n  [ngClass]=\"{\r\n    clickable: clickable(),\r\n    header: header(),\r\n    subheader: subheader(),\r\n    highlighted: highlighted(),\r\n  }\">\r\n  <ng-content />\r\n</div>\r\n" }]
+            args: [{ selector: 'b-row', imports: [NgClass], template: "<div\n  class=\"row-container\"\n  [ngClass]=\"{\n    clickable: clickable(),\n    header: header(),\n    subheader: subheader(),\n    highlighted: highlighted(),\n  }\">\n  <ng-content />\n</div>\n" }]
         }] });
-class RowItem {
-    widthPx = input();
-    alignedLeft = input(false);
-    isHeader = input(false);
+class RowItemComponent {
+    widthPx = input(...(ngDevMode ? [undefined, { debugName: "widthPx" }] : []));
+    alignedLeft = input(false, ...(ngDevMode ? [{ debugName: "alignedLeft" }] : []));
+    isHeader = input(false, ...(ngDevMode ? [{ debugName: "isHeader" }] : []));
     style = computed(() => {
         return {
             width: `${this.widthPx()}px`,
             justifyContent: this.alignedLeft() ? 'flex-start' : 'center',
         };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RowItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: RowItem, isStandalone: true, selector: "b-row-item", inputs: { widthPx: { classPropertyName: "widthPx", publicName: "widthPx", isSignal: true, isRequired: false, transformFunction: null }, alignedLeft: { classPropertyName: "alignedLeft", publicName: "alignedLeft", isSignal: true, isRequired: false, transformFunction: null }, isHeader: { classPropertyName: "isHeader", publicName: "isHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    }, ...(ngDevMode ? [{ debugName: "style" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RowItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: RowItemComponent, isStandalone: true, selector: "b-row-item", inputs: { widthPx: { classPropertyName: "widthPx", publicName: "widthPx", isSignal: true, isRequired: false, transformFunction: null }, alignedLeft: { classPropertyName: "alignedLeft", publicName: "alignedLeft", isSignal: true, isRequired: false, transformFunction: null }, isHeader: { classPropertyName: "isHeader", publicName: "isHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RowItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RowItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'b-row-item', imports: [NgStyle], template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\r\n  <ng-content />\r\n</div>\r\n" }]
+            args: [{ selector: 'b-row-item', imports: [NgStyle], template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\n  <ng-content />\n</div>\n" }]
         }] });
 class Tab {
-    el;
-    value = input.required();
-    disabled = input(false);
-    selected = signal(false);
-    highlighted = signal(false);
-    selectEmitter = output();
-    constructor(el) {
-        this.el = el;
-    }
-    /**
-     * Emit the select event when the tab is selected.
-     */
-    onSelect() {
-        this.selectEmitter.emit(this);
-    }
     /**
-     * Highlight the tab on mouse enter if it is not disabled and not in keyboard-active mode.
+     * Reference to the injected CDK Option instance.
      */
-    onMouseEnter() {
-        if (!this.disabled() &&
-            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
-            this.highlighted.set(true);
-        }
-    }
-    /**
-     * Remove the highlight from the tab on mouse leave if it is not disabled and not in keyboard-active mode.
-     */
-    onMouseLeave() {
-        if (!this.disabled() &&
-            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
-            this.highlighted.set(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tab, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Tab, isStandalone: true, selector: "b-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEmitter: "selectEmitter" }, ngImport: i0, template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    cdkOption = inject(CdkOption);
+    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: "19.2.7", ngImport: i0, type: Tab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tab, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tab', imports: [NgClass], template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+            args: [{
+                    selector: 'b-tab',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: ['cdkOption: value'],
+                        },
+                    ],
+                }]
+        }] });
 class Tabs {
-    tabs = contentChildren(Tab);
-    selectedIndex = signal(-1);
-    selectedValue = model(null);
-    highlightedIndex = signal(-1);
-    changesEmitter = output();
-    lastSelectedValue = null;
-    constructor() {
-        effect(() => {
-            this.handleTabSelection();
-            this.handleExternalSelectedValue();
-            this.handleScrollToSelectedTab();
-        });
-    }
-    /**
-     * Handle the selection of a tab.
-     */
-    handleTabSelection() {
-        this.tabs().forEach((tab, index) => {
-            tab.selectEmitter.subscribe(tabEmitted => {
-                this.selectTab(tabEmitted, index);
-                this.highlightTab(index);
-                this.handleTabStates();
-                this.changesEmitter.emit(tab.value());
-            });
-        });
-    }
-    /**
-     * Select a tab.
-     * @param {Tab} tab - The tab to select.
-     * @param {number} index - The index of the tab.
-     */
-    selectTab(tab, index) {
-        this.selectedValue.set(tab.value());
-        this.lastSelectedValue = tab.value();
-        this.selectedIndex.set(index);
-    }
     /**
-     * Highlight a tab.
-     * @param {number} index - The index of the tab to highlight.
+     * Reference to the injected CDK Listbox instance.
      */
-    highlightTab(index) {
-        this.highlightedIndex.set(index);
-    }
+    cdkListbox = inject(CdkListbox);
     /**
-     * Handle the states of the tabs.
+     * The size of the tabs.
+     *
+     * @defaultValue 'md'
      */
-    handleTabStates() {
-        this.tabs().forEach((tab, index) => {
-            tab.selected.set(index === this.selectedIndex());
-            tab.highlighted.set(index === this.highlightedIndex());
-        });
-    }
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Handle the external selected value.
+     * Collection of child options within the listbox.
      */
-    handleExternalSelectedValue() {
-        if (this.lastSelectedValue !== this.selectedValue()) {
-            const selectedOptionIndex = this.tabs().findIndex(tab => tab.value() === this.selectedValue());
-            if (selectedOptionIndex !== -1) {
-                this.selectTab(this.tabs()[selectedOptionIndex], selectedOptionIndex);
-                this.highlightTab(selectedOptionIndex);
-                this.handleTabStates();
-            }
-        }
-    }
+    tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     /**
-     * Scroll to the selected tab.
+     * Collection of cdk options within the listbox.
      */
-    handleScrollToSelectedTab() {
-        if (this.selectedIndex() !== -1) {
-            this.scrollToTab(this.selectedIndex(), 'smooth');
-        }
-    }
-    /**
-     * Handle keyboard events for navigation and selection.
-     * @param {KeyboardEvent} event - The keyboard event.
-     */
-    handleKeyboard(event) {
-        switch (event.key) {
-            case 'ArrowRight':
-                event.preventDefault();
-                this.focusOption('next');
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.focusOption('previous');
-                break;
-            case 'Enter':
-                event.preventDefault();
-                this.selectFocusedTab();
-                break;
-        }
-    }
+    cdkOptions = computed(() => this.tabs().map(tab => tab.cdkOption), ...(ngDevMode ? [{ debugName: "cdkOptions" }] : []));
     /**
-     * Focus on the next or previous tab.
-     * @param {'next' | 'previous'} direction - The direction to move the focus.
+     * Key manager for handling keyboard navigation and active descendant management.
      */
-    focusOption(direction) {
-        let index = this.highlightedIndex();
-        const increment = direction === 'next' ? 1 : -1;
-        index += increment;
-        while (index >= 0 &&
-            index < this.tabs().length &&
-            this.tabs()[index].disabled()) {
-            index += increment;
-        }
-        if (index >= 0 && index < this.tabs().length) {
-            this.highlightTab(index);
-            this.handleTabStates();
-            this.scrollToTab(this.highlightedIndex(), 'smooth');
-        }
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.cdkOptions())
+        .withWrap()
+        .withHorizontalOrientation('ltr'), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
+    previousTab() {
+        this.listKeyManager().setPreviousItemActive();
     }
-    /**
-     * Select the currently focused tab.
-     */
-    selectFocusedTab() {
-        this.selectTab(this.tabs()[this.highlightedIndex()], this.highlightedIndex());
-        this.handleTabStates();
+    nextTab() {
+        this.listKeyManager().setNextItemActive();
     }
-    /**
-     * Scroll to a specific tab.
-     * @param {number} index - The index of the tab to scroll to.
-     * @param {string} behavior - The scroll behavior ('instant' or 'smooth').
-     */
-    scrollToTab(index, behavior) {
-        const tabsElements = this.tabs();
-        if (tabsElements[index].el.nativeElement) {
-            tabsElements[index].el.nativeElement.scrollIntoView({
-                block: 'nearest',
-                behavior: behavior,
-            });
-        }
+    ngOnInit() {
+        this.cdkListbox.useActiveDescendant = true;
+        this.cdkListbox.orientation = 'horizontal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Tabs, isStandalone: true, selector: "b-tabs", inputs: { selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", changesEmitter: "changesEmitter" }, host: { listeners: { "keydown": "handleKeyboard($event)" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" });
+    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: "19.2.7", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tabs', template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { handleKeyboard: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-class InViewportService {
-    elements = signal({});
-    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: "19.2.7", ngImport: i0, type: InViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportService, decorators: [{
-            type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    selector: 'b-tabs',
+                    imports: [],
+                    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()',
+                        '(keydown.arrowDown)': 'nextTab()',
+                    },
                 }]
         }] });
-class InViewportDirective {
-    inViewportId = input.required();
-    inViewportInitialVisibility = input(false);
-    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: "19.2.7", ngImport: i0, type: InViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", 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: "19.2.7", 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-side-sheet
+ * @selector b-sheet
  */
-class SideSheet {
+class Sheet {
     /**
-     * Indicates whether the side sheet is open.
+     * Indicates whether the sheet is open.
      */
-    isOpen = model(false);
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /**
      * Specifies the side of the screen where the sheet is positioned.
      * Can be either 'left' or 'right'.
      */
-    side = input('right');
-    /**
-     * Specifies the width of the side sheet.
-     */
-    width = input('300px');
-    /**
-     * Computes whether the side sheet is positioned on the left side.
-     */
-    isLeft = computed(() => this.side() === 'left');
+    side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : []));
     /**
-     * Computes whether the side sheet is positioned on the right side.
+     * Computes whether the sheet is positioned on the right side.
      */
-    isRight = computed(() => this.side() === 'right');
+    isRight = computed(() => this.side() === 'right', ...(ngDevMode ? [{ debugName: "isRight" }] : []));
     /**
-     * Event emitted when the side sheet is closed.
+     * Event emitted when the sheet is closed.
      */
     closeSheet = output();
     /**
-     * Reference to the host element of the side sheet.
+     * Reference to the host element of the sheet.
      */
     el = inject(ElementRef);
     /**
-     * Closes the side sheet when clicking outside of it.
+     * Closes the sheet when clicking outside of it.
      *
      * @param event - The click event.
      */
@@ -1107,65 +1277,98 @@ class SideSheet {
             this.isOpen.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SideSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SideSheet, isStandalone: true, selector: "b-side-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)\">\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"19\"\r\n    height=\"19\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"0.094rem\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    class=\"lucide lucide-x\">\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n</button>\r\n<ng-content />\r\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: "19.2.7", ngImport: i0, type: SideSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Sheet, decorators: [{
             type: Component,
-            args: [{ selector: 'b-side-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)\">\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"19\"\r\n    height=\"19\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"0.094rem\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    class=\"lucide lucide-x\">\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n</button>\r\n<ng-content />\r\n" }]
+                    },
+                }]
         }], propDecorators: { closeOnOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
-class BottomSheet {
-    /**
-     * Indicates whether the bottom sheet is open.
-     */
-    isOpen = model(false);
+class Drawer {
     /**
-     * The height of the bottom sheet.
+     * Indicates whether the drawer is open.
      */
-    height = input('30dvh');
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /**
-     * Event emitted when the bottom sheet is closed.
+     * Event emitted when the drawer is closed.
      */
     closeSheet = output();
     /**
      * Indicates whether a drag event is in progress.
      */
-    isDragging = signal(false);
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     /**
      * The starting Y position of the drag event.
      */
-    startY = signal(0);
+    startY = signal(0, ...(ngDevMode ? [{ debugName: "startY" }] : []));
     /**
-     * The current Y translation of the bottom sheet in percentage.
+     * The current Y translation of the drawer in percentage.
      */
-    translateY = signal(100);
+    translateY = signal(100, ...(ngDevMode ? [{ debugName: "translateY" }] : []));
     /**
-     * The threshold for closing the bottom sheet, in percentage.
+     * The threshold for closing the drawer, in percentage.
      */
-    closeThreshold = input(30);
+    closeThreshold = input(30, ...(ngDevMode ? [{ debugName: "closeThreshold" }] : []));
     /**
-     * The computed transform property for the bottom sheet.
+     * The computed transform property for the drawer.
      */
     transform = computed(() => this.isDragging()
         ? `translateY(${this.translateY()}%)`
         : this.isOpen()
             ? 'translateY(0%)'
-            : 'translateY(100%)');
+            : 'translateY(100%)', ...(ngDevMode ? [{ debugName: "transform" }] : []));
     /**
-     * The reference to the Bottom Sheet DOM element.
+     * The reference to the drawer DOM element.
      */
     el = inject(ElementRef);
     /**
-     * Closes the bottom sheet when clicking outside of it.
+     * Closes the drawer when clicking outside of it.
      * @param event The click event.
      */
     closeOnOutsideClick(event) {
@@ -1175,7 +1378,7 @@ class BottomSheet {
         }
     }
     /**
-     * Starts the drag event for the bottom sheet.
+     * Starts the drag event for the drawer.
      * @param event The pointer event that starts the drag.
      */
     startDrag(event) {
@@ -1198,7 +1401,7 @@ class BottomSheet {
         window.addEventListener('pointerup', end);
     }
     /**
-     * Updates the drag position of the bottom sheet.
+     * Updates the drag position of the drawer.
      * @param clientY The current Y position of the pointer.
      */
     updateDrag(clientY) {
@@ -1211,7 +1414,7 @@ class BottomSheet {
         this.translateY.set(newPos);
     }
     /**
-     * Snaps the bottom sheet to either open or closed state based on the drag position.
+     * Snaps the drawer to either open or closed state based on the drag position.
      */
     snapToOpenOrClose() {
         if (this.translateY() > this.closeThreshold()) {
@@ -1221,17 +1424,16 @@ class BottomSheet {
             this.isOpen.set(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: BottomSheet, isStandalone: true, selector: "b-bottom-sheet", 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)\">\r\n  <div class=\"drag-indicator\"></div>\r\n</div>\r\n<ng-content />\r\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: "19.2.7", ngImport: i0, type: BottomSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
-            args: [{ selector: 'b-bottom-sheet', standalone: true, imports: [CommonModule], host: {
-                        '[style.height]': 'height()',
+            args: [{ selector: 'b-drawer', standalone: true, imports: [CommonModule], host: {
                         '[class.dragging]': 'isDragging()',
                         '[style.transform]': 'transform()',
                         '[class.open]': 'isOpen()',
-                    }, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\r\n  <div class=\"drag-indicator\"></div>\r\n</div>\r\n<ng-content />\r\n" }]
+                    }, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\n  <div class=\"drag-indicator\"></div>\n</div>\n<ng-content />\n" }]
         }], propDecorators: { closeOnOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -1241,15 +1443,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Service that handles responsive design functionality
  * Detects current device type based on window width and configurable breakpoints
  */
-class ResponsiveService {
+class ResponsiveManager {
     /** 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);
+    windowWidth = signal(0, ...(ngDevMode ? [{ debugName: "windowWidth" }] : []));
     /**
      * Computed signal that returns the current device type based on window width
      * @returns The current device type ('mobile', 'tablet', or 'desktop')
@@ -1264,7 +1466,7 @@ class ResponsiveService {
             return 'tablet';
         }
         return 'desktop';
-    });
+    }, ...(ngDevMode ? [{ debugName: "currentDevice" }] : []));
     constructor() {
         afterRenderEffect(() => {
             this.initializeWindowWidth();
@@ -1297,403 +1499,295 @@ class ResponsiveService {
             ...newBreakpoints,
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResponsiveManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResponsiveManager, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResponsiveManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
-class AttachedBox {
-    /**
-     * Input signal to define the interaction type: 'click' or 'hover'.
-     * Default is 'click'.
-     */
-    type = input('click');
+/**
+ * Component representing a One-Time Password (OTP) input group.
+ *
+ * This component manages a set of digit inputs for entering OTP codes, handling keyboard navigation,
+ * paste events, and integration with Angular Forms via ControlValueAccessor.
+ *
+ * @example
+ * <b-otp>
+ *   <input b-otp-digit />
+ *   <input b-otp-digit />
+ *   <input b-otp-digit />
+ *   <input b-otp-digit />
+ * </b-otp>
+ */
+/**
+ * Otp manages a group of digit inputs for OTP entry.
+ * Implements keyboard navigation, paste handling, and ControlValueAccessor for Angular Forms.
+ */
+class Otp {
     /**
-     * The trigger element that will be used to open the content.
+     * The visual size of the OTP inputs. Accepts 'sm', 'md', or 'lg'. Default is 'md'.
      */
-    trigger = inject(ElementRef);
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * The content that will be displayed when the trigger is activated.
+     * Computed signal for the number of digit inputs.
      */
-    content = viewChild('content');
+    length = computed(() => this.digitInputs().length, ...(ngDevMode ? [{ debugName: "length" }] : []));
     /**
-     * The position of the content relative to the trigger.
-     * Example values: 'top-left', 'bottom-center', etc.
+     * Emits the full OTP value when changed.
      */
-    position = model('right-top');
+    otpChange = output();
     /**
-     * Signal indicating whether the content is visible or not.
+     * Query for all child digit inputs (OtpDigitDirective).
      */
-    isContentVisible = signal(false);
+    digitInputs = contentChildren(OtpDigitDirective, ...(ngDevMode ? [{ debugName: "digitInputs" }] : []));
     /**
-     * The gap (spacing) between the trigger and the content.
+     * Internal array holding the current values of each digit input.
      */
-    gap = model(10);
+    values = [];
     /**
-     * Signal that dynamically calculates and provides the adjusted position of the content.
-     * This position is adjusted to prevent overflow and ensure optimal visibility.
+     * Model indicating whether the OTP input group is disabled.
      */
-    adjustedPosition = linkedSignal(() => this.calculateAdjustedPosition());
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
-     * Signal that provides the animation parameters based on the adjusted
-     * position of the content. These parameters are used to animate the content.
+     * Callback for propagating value changes to Angular Forms.
      */
-    animationParams = computed(() => {
-        const position = this.adjustedPosition();
-        const direction = position.split('-')[0];
-        const isCenter = position.includes('center');
-        const defaultParams = {
-            duration: '0.15s',
-            enterDelay: '0s',
-            leaveDelay: '0.1s',
-            scaleFrom: 0.99,
-            scaleTo: 1,
-            translateFrom: '',
-            translateTo: '',
-        };
-        switch (direction) {
-            case 'top':
-                return {
-                    ...defaultParams,
-                    translateFrom: isCenter
-                        ? 'translate(-50%, 10px)'
-                        : 'translateY(10px)',
-                    translateTo: isCenter ? 'translate(-50%, 0)' : 'translateY(0)',
-                };
-            case 'bottom':
-                return {
-                    ...defaultParams,
-                    translateFrom: isCenter
-                        ? 'translate(-50%, -10px)'
-                        : 'translateY(-10px)',
-                    translateTo: isCenter ? 'translate(-50%, 0)' : 'translateY(0)',
-                };
-            case 'left':
-                return {
-                    ...defaultParams,
-                    translateFrom: isCenter
-                        ? 'translate(10px, -50%)'
-                        : 'translateX(10px)',
-                    translateTo: isCenter ? 'translate(0, -50%)' : 'translateX(0)',
-                };
-            case 'right':
-                return {
-                    ...defaultParams,
-                    translateFrom: isCenter
-                        ? 'translate(-10px, -50%)'
-                        : 'translateX(-10px)',
-                    translateTo: isCenter ? 'translate(0, -50%)' : 'translateX(0)',
-                };
-            default:
-                return defaultParams;
-        }
-    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
     /**
-     * Recalculates and updates the content's adjusted position when the window is scrolled.
-     * This ensures the content remains correctly positioned relative to the trigger even when scrolling.
+     * Callback for marking the component as touched in Angular Forms.
      */
-    onWindowEvent() {
-        this.adjustedPosition.set(this.calculateAdjustedPosition());
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngAfterContentInit() {
+        // Inicializar listeners en los inputs hijos
+        this.digitInputs().forEach((input, idx) => {
+            const el = input.el.nativeElement;
+            // maxLength y type se aplican por la directiva
+            el.disabled = this.disabled();
+            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);
+            });
+            el.addEventListener('keydown', (event) => {
+                this.onKeyDown(event, idx);
+            });
+            el.addEventListener('paste', (event) => {
+                this.onPaste(event);
+            });
+        });
+        this.resetValues();
     }
     /**
-     * Closes the content when a click event occurs outside both the trigger and content elements.
-     * @param event The mouse event representing the click.
-     */
-    onClickOutside(event) {
-        if (this.isContentVisible() &&
-            this.isClickedOutsideContent(event) &&
-            this.isClickedOutsideTrigger(event)) {
-            this.isContentVisible.set(false);
+     * Handles input event for each digit input.
+     * Moves focus to next input if value entered.
+     *
+     * @param event - Input event
+     *
+     * @param idx - Index of the digit input
+     */
+    onInput(event, idx) {
+        const input = event.target;
+        const val = input.value;
+        this.values[idx] = val;
+        if (val && idx < this.length() - 1) {
+            this.focusDigit(idx + 1);
         }
+        this.emitValue();
     }
     /**
-     * Determines if a click event occurred outside the trigger and content elements.
-     * @param event The mouse event representing the click.
-     * @returns True if the click was outside both the trigger and content elements, false otherwise.
+     * Handles keyboard navigation for digit inputs.
+     * Supports Backspace, ArrowLeft, ArrowRight.
+     *
+     * @param event - Keyboard event
+     *
+     * @param idx - Index of the digit input
      */
-    isClickedOutsideContent(event) {
-        const contentElement = this.content()?.nativeElement;
-        if (!contentElement) {
-            return false;
+    onKeyDown(event, idx) {
+        const input = event.target;
+        if (event.key === 'Backspace') {
+            if (!input.value && idx > 0) {
+                this.focusDigit(idx - 1);
+            }
+            this.values[idx] = '';
+            this.emitValue();
         }
-        return !contentElement.contains(event.target);
-    }
-    /**
-     * Determines if a click event occurred outside the trigger element.
-     * @param event The mouse event representing the click.
-     * @returns True if the click was outside the trigger element, false otherwise.
-     */
-    isClickedOutsideTrigger(event) {
-        const triggerElement = this.trigger?.nativeElement;
-        if (!triggerElement) {
-            return false;
+        else if (event.key === 'ArrowLeft' && idx > 0) {
+            this.focusDigit(idx - 1);
         }
-        return !triggerElement.contains(event.target);
-    }
-    /**
-     * Handles keyboard events for the component.
-     * @param event The keyboard event to handle.
-     */
-    handleKeyboardEvent(event) {
-        if (event.key === 'Escape' || event.key === 'Enter') {
-            this.toggleContentVisibility();
+        else if (event.key === 'ArrowRight' && idx < this.length() - 1) {
+            this.focusDigit(idx + 1);
         }
     }
     /**
-     * Handles mouse events for the component.
-     * @param event The mouse event to handle.
-     */
-    handleMouseEvent(event) {
-        if (this.isClickedOutsideContent(event) &&
-            !this.isClickedOutsideTrigger(event)) {
-            this.toggleContentVisibility();
-        }
+     * Handles paste event for the OTP input group.
+     * Distributes pasted characters across digit inputs.
+     *
+     * @param event - Clipboard event
+     */
+    onPaste(event) {
+        event.preventDefault();
+        const paste = event.clipboardData?.getData('text') ?? '';
+        const chars = paste.slice(0, this.length()).split('');
+        chars.forEach((c, i) => {
+            this.values[i] = c;
+            const input = this.digitInputs()[i];
+            if (input) {
+                input.el.nativeElement.value = c;
+            }
+        });
+        this.emitValue();
+        this.focusDigit(chars.length - 1);
     }
     /**
-     * Toggles the visibility of the content, switching between visible and hidden states.
-     * This method is typically called in response to user interaction with the trigger element.
+     * Focuses the digit input at the given index.
+     *
+     * @param idx - Index of the digit input to focus
      */
-    toggleContentVisibility() {
-        this.isContentVisible.set(!this.isContentVisible());
+    focusDigit(idx) {
+        const input = this.digitInputs()[idx];
+        if (input) {
+            input.el.nativeElement.focus();
+        }
     }
     /**
-     * Shows the content (used for hover interaction).
+     * Emits the full OTP value via output and ControlValueAccessor.
      */
-    showContent() {
-        this.isContentVisible.set(true);
+    emitValue() {
+        const otp = this.values.join('');
+        this.otpChange.emit(otp);
+        this.onChange(otp);
+        this.onTouched();
     }
     /**
-     * Hides the content (used for hover interaction).
+     * Resets all digit input values to empty.
      */
-    hideContent() {
-        this.isContentVisible.set(false);
+    resetValues() {
+        this.values = Array(this.length()).fill('');
+        this.digitInputs().forEach(input => {
+            input.el.nativeElement.value = '';
+        });
     }
+    // ControlValueAccessor implementation
     /**
-     * Calculates the optimal adjusted position for the content relative to the trigger.
-     * This method considers available space in the viewport to prevent content overflow
-     * and ensures the content is fully visible to the user.
-     * @returns The adjusted position as a Position type string (e.g., 'bottom-left').
+     * Writes a new value to the OTP input group.
+     * Called by Angular Forms to update the value.
+     *
+     * @param value - New OTP value
      */
-    calculateAdjustedPosition() {
-        if (!this.trigger?.nativeElement || !this.content()?.nativeElement) {
-            return this.position();
-        }
-        const triggerElement = this.trigger.nativeElement;
-        const contentElement = this.content().nativeElement;
-        const triggerRect = triggerElement.getBoundingClientRect();
-        const contentRect = contentElement.getBoundingClientRect();
-        const extraMargin = this.gap();
-        const [primary, secondary] = this.position().split('-');
-        const adjustedPrimary = this.adjustPrimaryDirection(primary, triggerRect, contentRect, extraMargin);
-        const adjustedSecondary = this.adjustSecondaryAlignment(secondary, adjustedPrimary, triggerRect, contentRect);
-        return `${adjustedPrimary}-${adjustedSecondary}`;
-    }
-    /**
-     * Adjusts the primary direction (top, bottom, left, right) of the content's position
-     * based on available viewport space. This ensures the content does not overflow the screen
-     * in the primary direction.
-     * @param primary The initially desired primary direction.
-     * @param triggerRect The bounding rectangle of the trigger element.
-     * @param contentRect The bounding rectangle of the content element.
-     * @param margin Extra margin to consider for spacing around the content.
-     * @returns The adjusted primary direction.
-     */
-    adjustPrimaryDirection(primary, triggerRect, contentRect, margin) {
-        if (['top', 'bottom'].includes(primary)) {
-            const neededSpace = contentRect.height + margin;
-            const spaceBelow = window.innerHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            if (primary === 'bottom' &&
-                spaceBelow < neededSpace &&
-                spaceAbove > spaceBelow) {
-                return 'top';
-            }
-            if (primary === 'top' &&
-                spaceAbove < neededSpace &&
-                spaceBelow > spaceAbove) {
-                return 'bottom';
-            }
-        }
-        else {
-            const neededSpace = contentRect.width + margin;
-            const spaceRight = window.innerWidth - triggerRect.right;
-            const spaceLeft = triggerRect.left;
-            if (primary === 'right' &&
-                spaceRight < neededSpace &&
-                spaceLeft > spaceRight) {
-                return 'left';
-            }
-            if (primary === 'left' &&
-                spaceLeft < neededSpace &&
-                spaceRight > spaceLeft) {
-                return 'right';
-            }
-        }
-        return primary;
-    }
-    /**
-     * Adjusts the secondary alignment (left, right, center for top/bottom primary, top, bottom, center for left/right primary)
-     * of the content's position to prevent horizontal or vertical overflow. This method ensures that
-     * the content is fully visible within the viewport in the secondary dimension.
-     * @param secondary The initially desired secondary alignment.
-     * @param primary The already adjusted primary direction.
-     * @param triggerRect The bounding rectangle of the trigger element.
-     * @param contentRect The bounding rectangle of the content element.
-     * @returns The adjusted secondary alignment.
-     */
-    adjustSecondaryAlignment(secondary, primary, triggerRect, contentRect) {
-        if (['top', 'bottom'].includes(primary)) {
-            if (secondary === 'left') {
-                const contentRightPos = triggerRect.left + contentRect.width;
-                if (contentRightPos > window.innerWidth) {
-                    return 'right';
-                }
-            }
-            else if (secondary === 'right') {
-                const contentLeftPos = triggerRect.right - contentRect.width;
-                if (contentLeftPos < 0) {
-                    return 'left';
-                }
-            }
-            else if (secondary === 'center') {
-                const triggerCenter = triggerRect.left + triggerRect.width / 2;
-                const contentLeftPos = triggerCenter - contentRect.width / 2;
-                const contentRightPos = contentLeftPos + contentRect.width;
-                if (contentLeftPos < 0) {
-                    return 'left';
-                }
-                else if (contentRightPos > window.innerWidth) {
-                    return 'right';
+    writeValue(value) {
+        this.values = Array(this.length()).fill('');
+        if (value) {
+            value
+                .slice(0, this.length())
+                .split('')
+                .forEach((c, i) => {
+                this.values[i] = c;
+                const input = this.digitInputs()[i];
+                if (input) {
+                    input.el.nativeElement.value = c;
                 }
-            }
+            });
         }
-        else if (['left', 'right'].includes(primary)) {
-            if (secondary === 'top') {
-                const contentBottomPos = triggerRect.top + contentRect.height;
-                if (contentBottomPos > window.innerHeight) {
-                    return 'bottom';
-                }
-            }
-            else if (secondary === 'bottom') {
-                const contentTopPos = triggerRect.bottom - contentRect.height;
-                if (contentTopPos < 0) {
-                    return 'top';
-                }
-            }
-            else if (secondary === 'center') {
-                const triggerCenter = triggerRect.top + triggerRect.height / 2;
-                const contentTopPos = triggerCenter - contentRect.height / 2;
-                const contentBottomPos = contentTopPos + contentRect.height;
-                if (contentTopPos < 0) {
-                    return 'top';
-                }
-                else if (contentBottomPos > window.innerHeight) {
-                    return 'bottom';
-                }
-            }
+        else {
+            this.resetValues();
         }
-        return secondary;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AttachedBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: AttachedBox, isStandalone: true, selector: "b-attached-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange", gap: "gapChange" }, host: { listeners: { "click": "type() === \"click\" ? handleMouseEvent($event) : null", "keydown": "handleKeyboardEvent($event)", "mouseenter": "type() === \"hover\" ? showContent() : null", "mouseleave": "type() === \"hover\" ? hideContent() : null", "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()", "document:click": "onClickOutside($event)" }, properties: { "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[b-attached-box-trigger]\" />\r\n<div\r\n  #content\r\n  class=\"b-attached-box-content\"\r\n  [class]=\"adjustedPosition()\"\r\n  [class.visible]=\"isContentVisible()\"\r\n  [style.--gap.px]=\"gap()\"\r\n  [style.--duration]=\"animationParams().duration\"\r\n  [style.--enter-delay]=\"animationParams().enterDelay\"\r\n  [style.--leave-delay]=\"animationParams().leaveDelay\"\r\n  [style.--scale-from]=\"animationParams().scaleFrom\"\r\n  [style.--scale-to]=\"animationParams().scaleTo\"\r\n  [style.--translate-from]=\"animationParams().translateFrom\"\r\n  [style.--translate-to]=\"animationParams().translateTo\">\r\n  <ng-content select=\"[b-attached-box-content]\" />\r\n</div>\r\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AttachedBox, decorators: [{
-            type: Component,
-            args: [{ selector: 'b-attached-box', host: {
-                        '[attr.tabindex]': '0',
-                        '(click)': 'type() === "click" ? handleMouseEvent($event) : null',
-                        '(keydown)': 'handleKeyboardEvent($event)',
-                        '(mouseenter)': 'type() === "hover" ? showContent() : null',
-                        '(mouseleave)': 'type() === "hover" ? hideContent() : null',
-                    }, template: "<ng-content select=\"[b-attached-box-trigger]\" />\r\n<div\r\n  #content\r\n  class=\"b-attached-box-content\"\r\n  [class]=\"adjustedPosition()\"\r\n  [class.visible]=\"isContentVisible()\"\r\n  [style.--gap.px]=\"gap()\"\r\n  [style.--duration]=\"animationParams().duration\"\r\n  [style.--enter-delay]=\"animationParams().enterDelay\"\r\n  [style.--leave-delay]=\"animationParams().leaveDelay\"\r\n  [style.--scale-from]=\"animationParams().scaleFrom\"\r\n  [style.--scale-to]=\"animationParams().scaleTo\"\r\n  [style.--translate-from]=\"animationParams().translateFrom\"\r\n  [style.--translate-to]=\"animationParams().translateTo\">\r\n  <ng-content select=\"[b-attached-box-content]\" />\r\n</div>\r\n" }]
-        }], propDecorators: { onWindowEvent: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-class Label {
-    /**
-     * The input element.
-     */
-    input = contentChild(Input);
-    /**
-     * The switch element.
-     */
-    switch = contentChild(Switch);
     /**
-     * The checkbox element.
-     */
-    checkbox = contentChild(Checkbox);
-    /**
-     * The textarea element.
+     * Registers a callback to be called when the value changes.
+     *
+     * @param fn - Callback function
      */
-    textarea = contentChild(Textarea);
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
     /**
-     * Whether the label should be up.
+     * Registers a callback to be called when the component is touched.
+     *
+     * @param fn - Callback function
      */
-    labelUp = computed(() => {
-        const input = this.input();
-        const textarea = this.textarea();
-        return (input?.focused() ||
-            input?.value() ||
-            input?.placeholder() ||
-            textarea?.focused() ||
-            textarea?.value() ||
-            textarea?.placeholder());
-    });
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
     /**
-     * The label width.
+     * Sets the disabled state of the OTP input group.
+     * Called by Angular Forms to enable/disable the component.
+     *
+     * @param isDisabled - Boolean indicating disabled state
      */
-    maxWidth = computed(() => {
-        const input = this.input();
-        const textarea = this.textarea();
-        return input?.maxWidth() || textarea?.cols();
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Label, isStandalone: true, selector: "b-label", host: { properties: { "class.up": "labelUp()", "style.max-width": "maxWidth()", "class.is-switch": "switch()", "class.is-checkbox": "checkbox()", "class.is-textarea": "textarea()" } }, queries: [{ propertyName: "input", first: true, predicate: Input, descendants: true, isSignal: true }, { propertyName: "switch", first: true, predicate: Switch, descendants: true, isSignal: true }, { propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true, isSignal: true }, { propertyName: "textarea", first: true, predicate: Textarea, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        this.digitInputs().forEach(input => {
+            input.el.nativeElement.disabled = isDisabled;
+            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: 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(() => Otp),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "digitInputs", predicate: OtpDigitDirective, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Otp, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-label',
-                    imports: [],
+                    selector: 'b-otp',
                     template: `<ng-content />`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Otp),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+class OtpDigitDirective {
+    /** Reference to the native input element. */
+    el = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpDigitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: OtpDigitDirective, isStandalone: true, selector: "input[b-otp-digit]", host: { attributes: { "maxlength": "1" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpDigitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[b-otp-digit]',
                     host: {
-                        '[class.up]': 'labelUp()',
-                        '[style.max-width]': 'maxWidth()',
-                        '[class.is-switch]': 'switch()',
-                        '[class.is-checkbox]': 'checkbox()',
-                        '[class.is-textarea]': 'textarea()',
+                        maxlength: '1',
                     },
                 }]
         }] });
 class Badge {
     /** The variant of the badge. */
-    variant = input('primary');
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /** The size of the badge. */
-    size = input('default');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", 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": "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: "19.2.7", ngImport: i0, type: Badge, 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"',
                     },
                 }]
         }] });
@@ -1702,7 +1796,7 @@ class Checkbox {
     /**
      * Value of the checkbox.
      */
-    value = model(false);
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * Reference to the checkbox element.
      */
@@ -1711,6 +1805,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.
      */
@@ -1725,10 +1823,10 @@ class Checkbox {
         this.value.set(newValue);
         this.valueChange.emit(newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", 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 ɵ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: { 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: "19.2.7", ngImport: i0, type: Checkbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-checkbox]',
@@ -1740,222 +1838,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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 Textarea {
-    /**
-     * The placeholder text for the textarea.
-     */
-    placeholder = input('');
-    /**
-     * The value of the textarea.
-     */
-    value = signal(null);
-    /**
-     * The number of rows for the textarea.
-     */
-    rows = input(3);
+class TextareaComponent {
     /**
-     * The number of columns for the textarea.
+     * The size of the textarea.
      */
-    cols = input(30);
-    /**
-     * Whether the textarea is invalid.
-     */
-    invalid = model(false);
+    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.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,
+            args: [{
+                    selector: 'textarea[b-textarea]',
+                    template: ``,
+                    host: {
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
+                    },
+                }]
+        }] });
+class Range {
     /**
-     * Whether the textarea is disabled.
+     * Current value of the range.
      */
-    disabled = model(false);
+    value = model('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
-     * Whether the textarea is focused.
-     * This will be used by the Label component.
+     * Size of the range slider (sm, md, lg)
      */
-    focused = signal(false);
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Event emitted when the value changes.
+     * Reference to the range element.
      */
-    valueChange = output();
+    el = inject(ElementRef);
     /**
-     * Reference to the textarea element.
+     * Initializes the range value after the view is initialized.
      */
-    el = inject(ElementRef);
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.value);
+    }
     /**
-     * Handles the input event.
-     * @param event The input event.
+     * Handles the input event to update the value.
      */
     onInput(event) {
-        const target = event.target;
-        this.value.set(target.value);
-        this.valueChange.emit(target.value);
+        this.value.set(event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Textarea, isStandalone: true, selector: "textarea[b-textarea]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "input": "onInput($event)", "focus": "focused.set(true)", "blur": "focused.set(false)" }, properties: { "placeholder": "placeholder() || \"\"", "rows": "rows()", "cols": "cols()", "class.ng-invalid": "invalid()", "class.disabled": "disabled()" } }, 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: "19.2.7", ngImport: i0, type: Textarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Range, decorators: [{
             type: Component,
             args: [{
-                    selector: 'textarea[b-textarea]',
+                    selector: 'input[b-range]',
                     template: ``,
                     host: {
-                        '[placeholder]': 'placeholder() || ""',
-                        '[rows]': 'rows()',
-                        '[cols]': 'cols()',
-                        '[class.ng-invalid]': 'invalid()',
-                        '[class.disabled]': 'disabled()',
+                        '[attr.value]': 'value()',
                         '(input)': 'onInput($event)',
-                        '(focus)': 'focused.set(true)',
-                        '(blur)': 'focused.set(false)',
+                        '[class.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
-class InputGroup {
+class TooltipTrigger {
     /**
-     * Whether the input group elements are separated by a border.
+     * Emits when the tooltip should become active/visible (mouseover or focus).
      */
-    bordered = input(true);
+    activeEmitter = output();
     /**
-     * The maximum width of the input.
+     * Emits when the tooltip should become inactive/hidden (mouseout or blur).
      */
-    maxWidth = input('');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputGroup, isStandalone: true, selector: "b-input-group", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.bordered": "bordered()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    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: "19.2.7", ngImport: i0, type: InputGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bTooltipTrigger]',
+                    host: {
+                        '(mouseover)': 'activeEmitter.emit()',
+                        '(focus)': 'activeEmitter.emit()',
+                        '(mouseout)': 'inactiveEmitter.emit()',
+                        '(blur)': 'inactiveEmitter.emit()',
+                    },
+                }]
+        }] });
+class TooltipContent {
+    /**
+     * Reference to the ConnectedOverlay to determine the direction of the overlay.
+     */
+    overlay = inject(ConnectedOverlay$1);
+    /**
+     * Computed signal representing the direction of the overlay.
+     */
+    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: TooltipContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-input-group',
+                    selector: 'b-tooltip-content',
+                    imports: [],
                     template: `<ng-content />`,
                     host: {
-                        '[class.bordered]': 'bordered()',
-                        '[style.max-width]': 'maxWidth()',
+                        '[animate.enter]': '"b-tooltip-content-entering-" + this.direction()',
+                        '[animate.leave]': '"b-tooltip-content-leaving-" + this.direction()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
-class Range {
+class Tooltip {
     /**
-     * Current value of the range.
+     * Reference to the overlay directive instance.
+     * Used to control the dropdown overlay for the select component.
+     *
+     * @readonly
      */
-    value = model('0');
+    overlay = contentChild(ConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
     /**
-     * Maximum width of the range slider.
+     * Reference to the tooltip trigger directive.
+     * Used to handle trigger events (click, keydown) for opening/closing the tooltip.
+     *
+     * @readonly
      */
-    maxWidth = input('100%');
+    tooltipTrigger = contentChild(TooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltipTrigger" }] : []));
     /**
-     * Reference to the range element.
+     * Reference to the tooltip content component.
+     * Used to manage the content of the tooltip.
+     *
+     * @readonly
      */
-    el = inject(ElementRef);
+    tooltipContent = contentChild(TooltipContent, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
     /**
-     * Initializes the range value after the view is initialized.
+     * Input signal to set the size of the tooltip.
+     * Can be 'sm', 'md', or 'lg'. Default is 'md'.
+     *
+     * @readonly
+     * @defaultValue 'md'
      */
-    ngAfterViewInit() {
-        this.value.set(this.el.nativeElement.value);
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Input signal to set the visual variant of the tooltip.
+     * Can be 'primary', 'secondary', 'ghost', 'outlined', or 'destructive'.
+     * Default is 'primary'.
+     *
+     * @readonly
+     * @defaultValue 'primary'
+     */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Lifecycle hook that is called after data-bound properties are initialized.
+     * Sets up mouse event handling for the tooltip trigger.
+     */
+    ngAfterContentInit() {
+        this.handleTooltipEvents();
+        this.handlePanelClasses();
     }
     /**
-     * Handles the input event to update the value.
+     * Sets up subscriptions to mouse events from the tooltip trigger.
+     * Logs messages to the console on mouse over and mouse out events.
+     *
+     * @private
      */
-    onInput(event) {
-        this.value.set(event.target.value);
+    handleTooltipEvents() {
+        this.tooltipTrigger()?.activeEmitter.subscribe(() => {
+            this.overlay()?.openOverlay();
+        });
+        this.tooltipTrigger()?.inactiveEmitter.subscribe(() => {
+            this.overlay()?.closeOverlay();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Range, 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 });
+    /**
+     * Sets the panel size class on the overlay based on the tooltip size input.
+     */
+    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: 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: "19.2.7", ngImport: i0, type: Range, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Tooltip, decorators: [{
             type: Component,
             args: [{
-                    selector: 'input[b-range]',
-                    template: ``,
+                    selector: 'b-tooltip',
+                    template: `<ng-content />`,
                     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"',
                     },
                 }]
         }] });
-/**
- * TooltipComponent is a reusable UI component that displays a tooltip
- * with customizable position, gap, variant, and size.
- */
-class TooltipComponent {
-    /**
-     * The position of the tooltip relative to its trigger element.
-     * Defaults to 'top-center'.
-     */
-    position = input('top-center');
-    /**
-     * The gap (in pixels) between the tooltip and its trigger element.
-     * Defaults to 8.
-     */
-    gap = input(8);
-    /**
-     * The visual variant of the tooltip. Options include:
-     * - 'primary'
-     * - 'secondary'
-     * - 'ghost'
-     * - 'outlined'
-     * Defaults to 'primary'.
-     */
-    variant = input('primary');
-    /**
-     * The size of the tooltip. Options include:
-     * - 'small'
-     * - 'default'
-     * Defaults to 'default'.
-     */
-    size = input('default');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "b-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <b-attached-box [type]="'hover'" [position]="position()" [gap]="gap()">
-      <ng-content b-attached-box-trigger />
-      <div
-        b-attached-box-content
-        class="b-tooltip-content"
-        [class]="variant() + ' size-' + size()">
-        <ng-content select="[b-tooltip-content]" />
-      </div>
-    </b-attached-box>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttachedBox, selector: "b-attached-box", inputs: ["type", "position", "gap"], outputs: ["positionChange", "gapChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-tooltip',
-                    template: `
-    <b-attached-box [type]="'hover'" [position]="position()" [gap]="gap()">
-      <ng-content b-attached-box-trigger />
-      <div
-        b-attached-box-content
-        class="b-tooltip-content"
-        [class]="variant() + ' size-' + size()">
-        <ng-content select="[b-tooltip-content]" />
-      </div>
-    </b-attached-box>
-  `,
-                    standalone: true,
-                    imports: [AttachedBox],
-                }]
-        }] });
 class ColorPicker {
-    /**
-     * Specifies the maximum width of the input.
-     */
-    maxWidth = input('');
     /**
      * Represents the value of the input.
      */
-    value = signal('#ffffff');
+    value = signal('#ffffff', ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * Computed signal for the text color with single quotes.
      */
     valueWithSingleQuotes = computed(() => {
         return `'${this.value()}'`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "valueWithSingleQuotes" }] : []));
     /**
      * A computed signal that dynamically calculates the text color based on the resolved value.
      */
@@ -1967,19 +2070,23 @@ class ColorPicker {
         const b = parseInt(hex.substring(4, 6), 16);
         const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
         return luminance > 128 ? '#000000' : '#FFFFFF';
-    });
+    }, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
     /**
      * Indicates whether the input is focused.
      */
-    focused = signal(false);
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
     /**
      * A reference to the `NgModel` directive.
      */
-    ngModel = contentChild(NgModel);
+    ngModel = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModel" }] : []));
     /**
      * Indicates whether to show the color value.
      */
-    showColor = input(true);
+    showColor = input(true, ...(ngDevMode ? [{ debugName: "showColor" }] : []));
+    /**
+     * The size of the color picker input.
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
      * A reference to the native element.
      */
@@ -2043,10 +2150,10 @@ class ColorPicker {
         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: "19.2.7", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: ColorPicker, 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 } }, 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()" } }, 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: "19.2.7", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[b-color-picker]',
@@ -2054,13 +2161,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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.b-size-sm]': 'size() === "sm"',
+                        '[class.b-size-md]': 'size() === "md"',
+                        '[class.b-size-lg]': 'size() === "lg"',
                     },
                 }]
         }] });
@@ -2073,7 +2182,7 @@ class TreeNode {
     /**
      * Indicates whether the node is extended (expanded).
      */
-    extended = model(false);
+    extended = model(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
     /**
      * Reference to the `CdkDrag` directive for drag-and-drop functionality.
      */
@@ -2081,7 +2190,7 @@ class TreeNode {
     /**
      * Reference to a nested `Tree` component, if present.
      */
-    nestedTree = contentChild(Tree);
+    nestedTree = contentChild(Tree, ...(ngDevMode ? [{ debugName: "nestedTree" }] : []));
     /**
      * Emits an event when the node is closed.
      */
@@ -2110,17 +2219,103 @@ class TreeNode {
             this.closeEmitter.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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" }, queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: "<section>\r\n  @if (!node.disabled) {\r\n    <i b-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\r\n  }\r\n  <div\r\n    class=\"projected-content\"\r\n    (click)=\"nestedTree() && handleExtension()\"\r\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\r\n    (keydown.space)=\"nestedTree() && handleExtension()\"\r\n    role=\"button\"\r\n    tabindex=\"0\">\r\n    <ng-content />\r\n  </div>\r\n  @if (nestedTree()) {\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\">\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  }\r\n</section>\r\n@if (nestedTree() && extended()) {\r\n  <div class=\"nested\">\r\n    <ng-content select=\"b-tree\" />\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: Icon, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    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: "19.2.7", ngImport: i0, type: TreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNode, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tree-node', imports: [Icon, CdkDragHandle], hostDirectives: [
+            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'],
                         },
-                    ], template: "<section>\r\n  @if (!node.disabled) {\r\n    <i b-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\r\n  }\r\n  <div\r\n    class=\"projected-content\"\r\n    (click)=\"nestedTree() && handleExtension()\"\r\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\r\n    (keydown.space)=\"nestedTree() && handleExtension()\"\r\n    role=\"button\"\r\n    tabindex=\"0\">\r\n    <ng-content />\r\n  </div>\r\n  @if (nestedTree()) {\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\">\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  }\r\n</section>\r\n@if (nestedTree() && extended()) {\r\n  <div class=\"nested\">\r\n    <ng-content select=\"b-tree\" />\r\n  </div>\r\n}\r\n" }]
+                    ],
+                    providers: [
+                        provideIcons({
+                            lucideGripVertical,
+                        }),
+                    ],
+                }]
         }] });
 /**
@@ -2128,14 +2323,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * and manages nested tree nodes.
  */
 class Tree {
-    /**
-     * The ID of the tree component.
-     */
-    maxWidth = input('100%');
     /**
      * Determines whether the tree is draggable.
      */
-    draggable = input(false);
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
     /**
      * Reference to the `CdkDropList` directive used for drag-and-drop.
      */
@@ -2143,11 +2334,11 @@ class Tree {
     /**
      * Collection of nested `TreeNode` components.
      */
-    nestedNodes = contentChildren(TreeNode);
+    nestedNodes = contentChildren(TreeNode, ...(ngDevMode ? [{ debugName: "nestedNodes" }] : []));
     /**
      * Determines whether to close nodes recursively.
      */
-    closeRecursively = input(false);
+    closeRecursively = input(false, ...(ngDevMode ? [{ debugName: "closeRecursively" }] : []));
     /**
      * Emits an event when a drop occurs in the tree.
      */
@@ -2196,17 +2387,16 @@ class Tree {
             node.nestedTree()?.closeNestedNodes();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Tree, 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: TreeNode, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1$1.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: "19.2.7", ngImport: i0, type: Tree, 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: [
                         {
@@ -2223,16 +2413,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Represents a menu component that can optionally float.
  */
 class Menu {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: Menu, isStandalone: true, selector: "b-menu", hostDirectives: [{ directive: i1$2.CdkMenu }], 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: 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: "19.2.7", ngImport: i0, type: Menu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Menu, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-menu',
-                    imports: [],
                     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 group of menu items.
+ */
+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: MenuGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-menu-group',
+                    template: `<ng-content />`,
+                    hostDirectives: [CdkMenuGroup],
                 }]
         }] });
@@ -2240,14 +2451,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Represents a label for a menu.
  */
 class MenuLabel {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuLabel, isStandalone: true, selector: "b-menu-label", ngImport: i0, template: `<ng-content />`, isInline: true });
+    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: "19.2.7", ngImport: i0, type: MenuLabel, 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 />`,
                 }]
         }] });
@@ -2255,15 +2465,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 /**
  * Represents a menu item with support for typeahead and disabled states.
  */
-class MenuItemComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "b-menu-item", hostDirectives: [{ directive: i1$2.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+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: 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: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-menu-item',
-                    imports: [],
+                    selector: 'button[b-menu-item]',
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2275,21 +2488,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             outputs: ['cdkMenuItemTriggered: triggered'],
                         },
                     ],
+                    host: {
+                        '[class.squared]': 'squared()',
+                    },
                 }]
         }] });
 /**
  * Represents a checkbox menu item.
  */
-class MenuItemCheckboxComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemCheckboxComponent, isStandalone: true, selector: "b-menu-item-checkbox", hostDirectives: [{ directive: i1$2.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+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: 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: "19.2.7", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemCheckbox, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-menu-item-checkbox',
-                    imports: [],
+                    selector: 'button[b-menu-item-checkbox]',
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2302,21 +2521,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             outputs: ['cdkMenuItemTriggered: triggered'],
                         },
                     ],
+                    host: {
+                        '[class.squared]': 'squared()',
+                    },
                 }]
         }] });
 /**
  * Represents a radio menu item.
  */
-class MenuItemRadioComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemRadioComponent, isStandalone: true, selector: "b-menu-item-radio", hostDirectives: [{ directive: i1$2.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+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: 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: "19.2.7", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemRadio, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-menu-item-radio',
-                    imports: [],
+                    selector: 'button[b-menu-item-radio]',
                     template: `<ng-content />`,
                     hostDirectives: [
                         {
@@ -2329,13 +2554,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             outputs: ['cdkMenuItemTriggered: triggered'],
                         },
                     ],
+                    host: {
+                        '[class.squared]': 'squared()',
+                    },
                 }]
         }] });
-class MenuTrigger {
+class MenuTriggerDirective {
     trigger = inject(CdkMenuTrigger);
-    menuTriggerPosition = input('right-top');
-    submenu = input(false);
+    menuTriggerPosition = input('right-top', ...(ngDevMode ? [{ debugName: "menuTriggerPosition" }] : []));
+    submenu = input(false, ...(ngDevMode ? [{ debugName: "submenu" }] : []));
     ngOnInit() {
         this.setPosition();
     }
@@ -2426,13 +2654,18 @@ class MenuTrigger {
                 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: "19.2.7", ngImport: i0, type: MenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: MenuTrigger, 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$2.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"] }], ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[menuTriggerFor]',
@@ -2447,45 +2680,865 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class Alert {
     /** The type of the alert. */
-    type = input('info');
+    type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
     /** The title of the alert. */
-    title = input(null);
-    /** The icon of the alert. */
-    icon = input(null);
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** The icon name for ng-icon. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /** Whether the alert is dismissible. */
-    dismissible = input(false);
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
     /** Event emitted when the alert is dismissed. */
     dismissed = output();
-    /** The maximum width of the alert. */
-    maxWidth = input(null);
-    /** The color foreground of the alert. */
-    colorForeground = computed(() => {
-        return this.type() === 'info'
-            ? 'var(--secondary-foreground)'
-            : `var(--${this.type()}-foreground)`;
-    });
     dismiss() {
         this.dismissed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 }, 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()) {\r\n  <div class=\"icon\">\r\n    <i b-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </div>\r\n}\r\n<div class=\"content\">\r\n  @if (title()) {\r\n    <div class=\"title\">\r\n      {{ title() }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"body\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n@if (dismissible()) {\r\n  <button class=\"close-btn\" (click)=\"dismiss()\">\r\n    <i b-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </button>\r\n}\r\n", dependencies: [{ kind: "component", type: Icon, 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: "19.2.7", ngImport: i0, type: Alert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Alert, decorators: [{
             type: Component,
-            args: [{ selector: 'b-alert', imports: [Icon], 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()) {\r\n  <div class=\"icon\">\r\n    <i b-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </div>\r\n}\r\n<div class=\"content\">\r\n  @if (title()) {\r\n    <div class=\"title\">\r\n      {{ title() }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"body\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n@if (dismissible()) {\r\n  <button class=\"close-btn\" (click)=\"dismiss()\">\r\n    <i b-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </button>\r\n}\r\n" }]
+                    },
+                    providers: [provideIcons({ lucideX })],
+                }]
+        }] });
+/**
+ * Component representing a list of command options.
+ * It uses Angular CDK's listbox and option utilities for accessibility and keyboard navigation.
+ */
+class CommandOptionsComponent {
+    /**
+     * Collection of child options within the listbox.
+     */
+    options = contentChildren(CdkOption, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Key manager for handling keyboard navigation and active descendant management.
+     */
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.options())
+        .withWrap()
+        .withVerticalOrientation(), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
+    /**
+     * Signal representing the currently selected values.
+     */
+    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Signal representing the currently highlighted option.
+     */
+    highlightedOption = signal('1', ...(ngDevMode ? [{ debugName: "highlightedOption" }] : []));
+    /**
+     * No options message displayed when there are no available options in the dropdown.
+     */
+    noOptionsMessage = input('', ...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : []));
+    /**
+     * Reference to the injected CDK Listbox instance.
+     */
+    cdkListbox = inject(CdkListbox);
+    /**
+     * Emitter for closing the command options.
+     */
+    closeEmitter = output();
+    /**
+     * Signal indicando si se permite selección múltiple.
+     */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /**
+     * Lifecycle hook that initializes the component.
+     * Enables the use of active descendant for the listbox.
+     */
+    ngOnInit() {
+        this.cdkListbox.useActiveDescendant = true;
+    }
+    /**
+     * Selects the currently active option and updates the listbox value.
+     */
+    selectOption(value) {
+        const selectValue = value
+            ? value
+            : (this.listKeyManager().activeItem?.value ?? []);
+        //  If the selectValue is an empty array or contains only an empty string, clear the selection
+        if (selectValue.length === 1 && selectValue[0] === '') {
+            this.value.set([]);
+            this.cdkListbox.value = [];
+            this.closeEmitter.emit();
+            return;
+        }
+        this.value.set(selectValue);
+        this.cdkListbox.value = this.value();
+        this.closeEmitter.emit();
+    }
+    /**
+     * Moves the active item to the next option and updates the highlighted option.
+     */
+    nextOption() {
+        this.listKeyManager().setNextItemActive();
+        this.highlightedOption.set(this.listKeyManager().activeItem?.value ?? '');
+        this.updateHighlightedOption();
+    }
+    /**
+     * Moves the active item to the previous option and updates the highlighted option.
+     */
+    previousOption() {
+        this.listKeyManager().setPreviousItemActive();
+        this.highlightedOption.set(this.listKeyManager().activeItem?.value ?? '');
+        this.updateHighlightedOption();
+    }
+    /**
+     * Updates the CSS class of options to reflect the currently highlighted option.
+     */
+    updateHighlightedOption() {
+        this.options().forEach(option => {
+            if (option.value === this.highlightedOption()) {
+                option.element.classList.add('cdk-option-highlighted');
+            }
+            else {
+                option.element.classList.remove('cdk-option-highlighted');
+            }
+        });
+    }
+    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: 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$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() }}
+      </div>
+    }`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CommandOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ul[b-command-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()',
+                        '[cdkListboxMultiple]': 'multiple()',
+                        '(cdkListboxValueChange)': 'handleValueChange($event.value)',
+                        '(keydown.enter)': 'onEnter()',
+                    },
+                }]
+        }] });
+/**
+ * Utility service for common operations.
+ */
+class Utils {
+    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: Utils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Utils, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Utils, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+/**
+ * Component representing a command input with associated options.
+ * It provides keyboard navigation and focus trapping for accessibility.
+ */
+class CommandComponent {
+    /**
+     * Reference to the child `CommandOptionsComponent` if present.
+     * Used to interact with the options for navigation and selection.
+     */
+    commandOptions = contentChild(CommandOptionsComponent, ...(ngDevMode ? [{ debugName: "commandOptions" }] : []));
+    /**
+     * Input representing the maximum height of the component.
+     * This can be used to control the visual appearance of the command component.
+     */
+    maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    /**
+     * Computed signal representing the selected value from the command options.
+     * This is linked to the value of the `CommandOptionsComponent`.
+     */
+    value = computed(() => this.commandOptions()?.value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Computed signal representing the options available in the command options.
+     * This is linked to the options of the `CommandOptionsComponent`.
+     */
+    options = computed(() => this.commandOptions()?.options(), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Reference to the BreakpointObserver service for responsive design.
+     */
+    breakpointObserver = inject(BreakpointObserver);
+    /**
+     * Signal representing whether the current viewport is desktop or not.
+     * This is determined by checking if the Handset breakpoint is matched.
+     */
+    isDesktop = signal(!this.breakpointObserver.isMatched(Breakpoints.Handset), ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
+    /**
+     * Reference to the host element of the component.
+     * This provides access to the DOM element of the command component.
+     */
+    el = inject(ElementRef);
+    /**
+     * Output that emits the current input value.
+     */
+    inputValueChange = output();
+    /**
+     * Input to control debounce time (ms) for valueChange emission.
+     */
+    debounce = input(0, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
+    /**
+     * Reference to the Utils for debounce logic.
+     */
+    utils = inject(Utils);
+    /**
+     * Unique key for debounce timer.
+     */
+    debounceKey = 'command-input';
+    /**
+     * Handler for input event, emits value with debounce if set.
+     */
+    onInput(event) {
+        const value = event.target.value;
+        const debounceMs = this.debounce();
+        if (debounceMs && debounceMs > 0) {
+            this.utils.debounce(this.debounceKey, () => this.inputValueChange.emit(value), debounceMs);
+        }
+        else {
+            this.inputValueChange.emit(value);
+        }
+    }
+    ngOnDestroy() {
+        this.utils.stopDebounce(this.debounceKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: CommandComponent, isStandalone: true, selector: "b-command", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValueChange: "inputValueChange" }, host: { properties: { "style.maxHeight": "maxHeight()" } }, queries: [{ propertyName: "commandOptions", first: true, predicate: CommandOptionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<input
+      type="text"
+      b-input
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="isDesktop()"
+      #trappedInput
+      (keydown.arrowDown)="commandOptions()?.nextOption()"
+      (keydown.arrowUp)="commandOptions()?.previousOption()"
+      (keydown.enter)="commandOptions()?.selectOption()"
+      (blur)="isDesktop() && trappedInput.el.nativeElement.focus()"
+      (input)="onInput($event)" />
+    <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: [Input, CdkTrapFocus],
+                    template: `<input
+      type="text"
+      b-input
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="isDesktop()"
+      #trappedInput
+      (keydown.arrowDown)="commandOptions()?.nextOption()"
+      (keydown.arrowUp)="commandOptions()?.previousOption()"
+      (keydown.enter)="commandOptions()?.selectOption()"
+      (blur)="isDesktop() && trappedInput.el.nativeElement.focus()"
+      (input)="onInput($event)" />
+    <ng-content />`,
+                    host: {
+                        '[style.maxHeight]': 'maxHeight()',
+                    },
+                }]
+        }] });
+/**
+ * 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 OverlayOrigin {
+    /**
+     * 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: 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: OverlayOrigin, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bOverlayOrigin]',
+                    hostDirectives: [CdkOverlayOrigin],
+                    exportAs: 'bOverlayOrigin',
+                }]
+        }] });
+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: InputGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-input-group',
+                    template: `<ng-content />`,
+                }]
+        }] });
+/** Dialog content container that renders projected portal content for a dialog instance.
+ *
+ * @remarks Extends CdkDialogContainer to integrate with Angular CDK dialog infrastructure.
+ */
+class DialogContent extends CdkDialogContainer {
+    /** Reference to the active dialog instance used to control lifecycle and closing. */
+    dialogRef = inject(DialogRef);
+    /** Service that orchestrates opening and closing of dialog instances. */
+    dialogManager = inject(DialogManager);
+    /** Tracks whether the dialog is in its leaving (closing) animation state. */
+    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : []));
+    /** 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.
+     */
+    handleBackdropClose(data) {
+        if (data.closeOnBackdropClick) {
+            this.dialogRef.backdropClick.subscribe(() => {
+                this.dialogManager.closeDialog(this.dialogRef.id);
+            });
+        }
+    }
+    /** Subscribes to keydown events to close the dialog on Escape key when enabled.
+     *
+     * @param data - Dialog configuration containing close behavior flags.
+     */
+    handleEscapeKeyClose(data) {
+        if (data.closeOnEscapeKey) {
+            this.dialogRef.keydownEvents.subscribe((event) => {
+                if (event.key === 'Escape') {
+                    this.dialogManager.closeDialog(this.dialogRef.id);
+                }
+            });
+        }
+    }
+    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: DialogContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-dialog-content',
+                    template: `<ng-template cdkPortalOutlet />`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [CdkPortalOutlet],
+                    host: {
+                        '[class.leaving]': 'leaving()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Provides registration and lifecycle control for application dialogs.
+ */
+class DialogManager {
+    /** Angular CDK dialog service used to manage overlay instances. */
+    dialog = inject(Dialog$1);
+    /** Utility service used for debounced close behavior. */
+    utils = inject(Utils);
+    /** Registry mapping dialog identifiers to their data. */
+    dialogs = new Map();
+    /**
+     * Registers a dialog definition under a unique identifier, overwriting any existing entry.
+     *
+     * @param id - Unique identifier for the dialog.
+     * @param data - Template and configuration to register.
+     */
+    registerDialog(id, data) {
+        if (this.dialogs.has(id)) {
+            console.warn(`[DialogManager] Dialog with id "${id}" is already registered. Overwriting.`);
+        }
+        this.dialogs.set(id, data);
+    }
+    /**
+     * Removes a previously registered dialog definition.
+     *
+     * @param id - Identifier of the dialog to remove.
+     */
+    removeDialog(id) {
+        this.dialogs.delete(id);
+    }
+    /**
+     * Opens a dialog using its registered template and configuration.
+     *
+     * @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(`[DialogManager] Dialog with id "${id}" not found. Ensure the bDialog directive is applied correctly.`);
+        }
+        this.dialog.open(dialogData.template, {
+            id: id,
+            disableClose: true,
+            restoreFocus: dialogData.config.restoreFocus,
+            backdropClass: 'b-dialog-content-backdrop',
+            container: DialogContent,
+            data: dialogData.config,
+        });
+    }
+    /**
+     * Closes a dialog by identifier applying any configured close delay.
+     *
+     * @param id - Identifier of the dialog to close.
+     */
+    closeDialog(id) {
+        const config = this.dialogs.get(id)?.config;
+        if (!config) {
+            console.warn(`[DialogManager] Attempted to close dialog with id "${id}", but no open dialog with that id was found.`);
+            return;
+        }
+        const dialogRef = this.dialog.getDialogById(id);
+        if (dialogRef) {
+            const container = dialogRef.containerInstance;
+            if (container && container.leaving) {
+                container.leaving.set(true);
+            }
+            this.utils.debounce('close-dialog-' + id, () => {
+                dialogRef.close();
+                if (container && container.leaving) {
+                    container.leaving.set(false);
+                }
+            }, config.closeDelay);
+        }
+        else {
+            console.warn(`[DialogManager] Attempted to close dialog with id "${id}", but no open dialog with that id was found.`);
+        }
+    }
+    /**
+     * Closes all currently open dialogs immediately.
+     */
+    closeAllDialogs() {
+        this.dialog.closeAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogManager, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+/**
+ * Directive that registers and controls a dialog template instance.
+ *
+ * Registers itself in the {@link DialogManager} on init and exposes open/close APIs.
+ */
+class Dialog {
+    /**
+     * Unique dialog identifier bound from the `bDialog` attribute.
+     */
+    id = input.required(...(ngDevMode ? [{ debugName: "id", alias: 'bDialog' }] : [{ alias: 'bDialog' }]));
+    /**
+     * Whether the dialog renders a backdrop element.
+     *
+     * @defaultValue true
+     */
+    hasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
+    /**
+     * Closes the dialog when the user clicks on the backdrop.
+     *
+     * @defaultValue true
+     */
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    /**
+     * Closes the dialog when the Escape key is pressed while focused inside.
+     *
+     * @defaultValue true
+     */
+    closeOnEscapeKey = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscapeKey" }] : []));
+    /**
+     * Restores focus to the previously focused element after the dialog closes.
+     *
+     * @defaultValue true
+     */
+    restoreFocus = input(true, ...(ngDevMode ? [{ debugName: "restoreFocus" }] : []));
+    /**
+     * 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(),
+            restoreFocus: this.restoreFocus(),
+            closeDelay: this.closeDelay(),
+            closeOnBackdropClick: this.closeOnBackdropClick(),
+            closeOnEscapeKey: this.closeOnEscapeKey(),
+        },
+    }), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * Delay in milliseconds before opening the dialog (for entrance timing / animations).
+     *
+     * @defaultValue 0
+     */
+    openDelay = input(0, ...(ngDevMode ? [{ debugName: "openDelay" }] : []));
+    /**
+     * Event emitted after the dialog has been programmatically or automatically closed.
+     */
+    closed = output();
+    /**
+     * Reference to the dialog service handling registration and state.
+     */
+    dialogManager = inject(DialogManager);
+    /**
+     * Template reference representing the dialog content projected when opened.
+     */
+    templateRef = inject((TemplateRef));
+    /**
+     * Lifecycle hook that registers the dialog with the dialog service.
+     */
+    ngOnInit() {
+        this.dialogManager.registerDialog(this.id(), this.data());
+    }
+    /**
+     * Opens the dialog via the dialog service using its identifier.
+     */
+    open() {
+        this.dialogManager.openDialog(this.id());
+    }
+    /**
+     * Closes the dialog and emits the `closed` output.
+     */
+    close() {
+        this.dialogManager.closeDialog(this.id());
+        this.closed.emit();
+    }
+    /**
+     * Lifecycle hook that removes the dialog from the dialog service registry.
+     */
+    ngOnDestroy() {
+        this.dialogManager.removeDialog(this.id());
+    }
+    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: Dialog, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bDialog]',
+                    exportAs: 'bDialog',
+                    host: {
+                        '(keydown.escape)': 'closeOnEscapeKey() ? close() : null',
+                    },
+                }]
+        }] });
+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: Card, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+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: CardHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card-header',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+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: CardTitle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card-title',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+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: CardDescription, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card-description',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+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: CardContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card-content',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+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: CardFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-card-footer',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+/**
+ * Service for managing translations and language switching.
+ *
+ * @remarks
+ * - Loads language files via HTTP.
+ * - Provides reactive signals for language and dictionary.
+ * - Use `translate(key)` to get the translated string for the current language.
+ *
+ * @example
+ * ```typescript
+ * translationManager.setLanguage('es');
+ * translationManager.translate('home.title');
+ * ```
+ */
+class TranslationManager {
+    /** Current language code. */
+    _language = signal('en', ...(ngDevMode ? [{ debugName: "_language" }] : []));
+    /** Dictionary of translations. */
+    _dictionary = signal({}, ...(ngDevMode ? [{ debugName: "_dictionary" }] : []));
+    /** Reactive signal for current language. */
+    language = computed(() => this._language(), ...(ngDevMode ? [{ debugName: "language" }] : []));
+    /** Reactive signal for current dictionary. */
+    dictionary = computed(() => this._dictionary(), ...(ngDevMode ? [{ debugName: "dictionary" }] : []));
+    /** HttpClient for loading language files. */
+    http = inject(HttpClient);
+    /**
+     * Sets the current language and loads its dictionary.
+     * @param lang - Language code (e.g., 'en', 'es').
+     */
+    setLanguage(lang) {
+        this._language.set(lang);
+        this.loadLanguage(lang);
+    }
+    /**
+     * Sets the translation dictionary directly.
+     * @param dict - Translation dictionary object.
+     */
+    setDictionary(dict) {
+        this._dictionary.set(dict);
+    }
+    /**
+     * Translates a key using the current language.
+     * @param key - Dot-separated translation key (e.g., 'home.title').
+     * @returns Translated string or the key if not found.
+     */
+    translate(key) {
+        const lang = this._language();
+        const dict = this._dictionary();
+        const value = this.resolveKey(dict[lang], key);
+        return value ?? key;
+    }
+    /**
+     * Resolves a dot-separated key in an object.
+     * @param obj - Object to resolve key in.
+     * @param key - Dot-separated key string.
+     * @returns Value or undefined if not found.
+     */
+    resolveKey(obj, key) {
+        if (!obj)
+            return undefined;
+        return key
+            .split('.')
+            .reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+    }
+    /**
+     * Loads a language file via HTTP and updates the dictionary.
+     * @param lang - Language code to load.
+     */
+    loadLanguage(lang) {
+        this.http.get(`/lang/${lang}.json`).subscribe({
+            next: translations => {
+                const dict = { ...this._dictionary() };
+                dict[lang] = translations;
+                this._dictionary.set(dict);
+            },
+            error: () => {
+                // If loading fails, do not update the dictionary
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslationManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslationManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslationManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class TranslatePipe {
+    translationManager = inject(TranslationManager);
+    cdr = inject(ChangeDetectorRef);
+    lastLang;
+    transform(key) {
+        const lang = this.translationManager.language();
+        if (lang !== this.lastLang) {
+            this.lastLang = lang;
+            this.cdr.markForCheck();
+        }
+        return this.translationManager.translate(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    pure: false,
+                }]
         }] });
 /*
  * Public API Surface of basis-ng
  */
-/* Theme Service */
+/* Theme Manager */
 /**
  * Generated bundle index. Do not edit.
  */
-export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, OptionComponent, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogManager, Drawer, Input, InputGroup, LazyContentDirective, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, OverlayOrigin, Range, ResponsiveManager, RowComponent, RowItemComponent, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, TableComponent, Tabs, TextareaComponent, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map