@basis-ng/primitives 0.0.1-alpha.3 → 0.0.1-alpha.4

package/core/components/button/button.component.d.ts

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class Button {
     /** The variant of the button. */
@@ -12,6 +13,10 @@ export declare class Button {
     readonly toggle: import("@angular/core").InputSignal<boolean>;
     /** The value of the button when it is toggled. */
     readonly isToggled: import("@angular/core").InputSignal<boolean>;
+    /**  Whether the button active animation is enabled. */
+    readonly activeEnabled: import("@angular/core").InputSignal<boolean>;
+    /** The element reference of the button. */
+    el: ElementRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<Button, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Button, "button[b-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "equalPadding": { "alias": "equalPadding"; "required": false; "isSignal": true; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "isToggled": { "alias": "isToggled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Button, "button[b-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "equalPadding": { "alias": "equalPadding"; "required": false; "isSignal": true; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "isToggled": { "alias": "isToggled"; "required": false; "isSignal": true; }; "activeEnabled": { "alias": "activeEnabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/core/components/menu/menu.component.d.ts

@@ -4,11 +4,6 @@ import * as i1 from "@angular/cdk/menu";
  * Represents a menu component that can optionally float.
  */
 export declare class Menu {
-    /**
-     * Determines whether the menu is floating.
-     * @default false
-     */
-    readonly floating: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<Menu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "b-menu", never, { "floating": { "alias": "floating"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenu; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "b-menu", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenu; inputs: {}; outputs: {}; }]>;
 }

package/core/components/select/select-content.component.d.ts

@@ -0,0 +1,39 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+/**
+ * Component representing the content of a select dropdown.
+ * It integrates with Angular CDK Listbox for managing options and their selection.
+ */
+export declare class SelectContentComponent {
+    /**
+     * Signal representing the selected values in the listbox.
+     */
+    readonly value: import("@angular/core").WritableSignal<string[]>;
+    /**
+     * Signal representing the content of the selected option.
+     */
+    readonly content: import("@angular/core").WritableSignal<string>;
+    /**
+     * Event emitter triggered when the dropdown should close.
+     */
+    closeEmitter: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Reference to the host element of the component.
+     */
+    el: ElementRef<any>;
+    /**
+     * Input for setting the maximum height of the dropdown.
+     * Defaults to '300px'.
+     */
+    readonly maxHeight: import("@angular/core").InputSignal<string>;
+    /**
+     * Handles changes to the selected value in the listbox.
+     * Updates the `value` and `content` signals and emits the `closeEmitter` event.
+     *
+     * @param $event - The event object containing the new value and option details.
+     */
+    handleValueChange($event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectContentComponent, "ul[b-select-content]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, never, ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+}

package/core/components/select/select.component.d.ts

@@ -1,48 +1,66 @@
-import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import { SelectContentComponent } from './select-content.component';
+import { Button } from '../button/button.component';
 import * as i0 from "@angular/core";
-export declare class Select implements AfterViewInit {
+/**
+ * Component representing a custom select dropdown.
+ * It provides a button to toggle the dropdown and displays the selected option.
+ */
+export declare class SelectComponent {
     /**
-     * The value of the input.
+     * Placeholder text displayed when no option is selected.
+     * Defaults to 'Select an option'.
      */
-    readonly value: import("@angular/core").WritableSignal<string | null>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
     /**
-     * Whether the input is invalid.
+     * Signal indicating whether the dropdown is open.
      */
-    readonly invalid: import("@angular/core").ModelSignal<boolean>;
+    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
     /**
-     * Whether the input is disabled.
+     * Reference to the button element used to toggle the dropdown.
      */
-    readonly disabled: import("@angular/core").ModelSignal<boolean>;
+    readonly button: import("@angular/core").Signal<Button | undefined>;
+    /**
+     * Reference to the content component of the dropdown.
+     */
+    readonly listBox: import("@angular/core").Signal<SelectContentComponent | undefined>;
+    /**
+     * Computed signal representing the selected values from the dropdown.
+     */
+    readonly value: import("@angular/core").Signal<string[] | undefined>;
+    /**
+     * Computed signal representing the content of the selected option.
+     */
+    readonly content: import("@angular/core").Signal<string | undefined>;
     /**
-     * The maximum width of the input.
+     * Input for setting the maximum width of the dropdown.
+     * Defaults to '100%'.
      */
     readonly maxWidth: import("@angular/core").InputSignal<string>;
     /**
-     * Event emitted when the value changes.
+     * Computed signal for the width of the button element.
      */
-    valueChange: import("@angular/core").OutputEmitterRef<string | null>;
+    readonly buttonWidth: import("@angular/core").Signal<any>;
     /**
-     * Reference to the input element.
+     * Model indicating whether the select component is invalid.
      */
-    readonly el: ElementRef<HTMLSelectElement>;
+    readonly invalid: import("@angular/core").ModelSignal<boolean>;
     /**
-     * Indicates whether the options dropdown is open.
+     * Model indicating whether the select component is disabled.
      */
-    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly disabled: import("@angular/core").ModelSignal<boolean>;
+    constructor();
     /**
-     * Reference to the renderer
-     * @private
+     * Handles changes to the selected value by subscribing to the close event of the listbox.
      */
-    readonly renderer: Renderer2;
+    handleSelectedValueChange(): void;
     /**
-     * After the view has been initialized, set the value of the select.
+     * Opens the dropdown and focuses the listbox.
      */
-    ngAfterViewInit(): void;
+    open(): void;
     /**
-     * Handles the select change event.
-     * @param value - The value of the select.
+     * Closes the dropdown and focuses the button.
      */
-    change(value: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Select, "select[b-select]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "invalid": "invalidChange"; "disabled": "disabledChange"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "invalid": "invalidChange"; "disabled": "disabledChange"; }, ["listBox"], ["*"], true, never>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -1,12 +1,15 @@
 import * as i0 from '@angular/core';
-import { signal, inject, RendererFactory2, Injectable, input, Component, TemplateRef, Directive, computed, model, output, contentChildren, viewChild, Renderer2, effect, HostListener, ElementRef, afterNextRender, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
+import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, computed, model, output, contentChildren, viewChild, Renderer2, effect, HostListener, contentChild, afterNextRender, afterRenderEffect, linkedSignal } from '@angular/core';
 import { NgStyle, NgClass, CommonModule } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { icons, createElement } from 'lucide';
 import { NgModel, ControlContainer } from '@angular/forms';
-import * as i1 from '@angular/cdk/drag-drop';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/listbox';
+import { CdkListbox } from '@angular/cdk/listbox';
+import * as i1$1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/cdk/menu';
+import * as i1$2 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
 
 class ThemeService {
@@ -98,8 +101,12 @@ class Button {
     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. */
+    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 } }, host: { properties: { "class": "variant() + \" size-\" + size()", "class.equal-padding": "equalPadding()", "class.loading": "loading()", "class.toggled": "isToggled()" } }, 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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Button, decorators: [{
             type: Component,
@@ -108,6 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         '[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" }]
         }] });
 
@@ -529,70 +537,233 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
 
-class Select {
+/**
+ * Component representing the content of a select dropdown.
+ * It integrates with Angular CDK Listbox for managing options and their selection.
+ */
+class SelectContentComponent {
     /**
-     * The value of the input.
+     * Signal representing the selected values in the listbox.
      */
-    value = signal(null);
+    value = signal([]);
     /**
-     * Whether the input is invalid.
+     * Signal representing the content of the selected option.
      */
-    invalid = model(false);
+    content = signal('');
     /**
-     * Whether the input is disabled.
+     * Event emitter triggered when the dropdown should close.
      */
-    disabled = model(false);
+    closeEmitter = output();
     /**
-     * The maximum width of the input.
+     * Reference to the host element of the component.
      */
-    maxWidth = input('');
+    el = inject(ElementRef);
     /**
-     * Event emitted when the value changes.
+     * Input for setting the maximum height of the dropdown.
+     * Defaults to '300px'.
      */
-    valueChange = output();
+    maxHeight = input('300px');
     /**
-     * Reference to the input element.
+     * Handles changes to the selected value in the listbox.
+     * Updates the `value` and `content` signals and emits the `closeEmitter` event.
+     *
+     * @param $event - The event object containing the new value and option details.
      */
-    el = inject(ElementRef);
+    handleValueChange($event) {
+        const value = $event.value;
+        this.content.set($event.option.element.innerText);
+        this.value.set(value.length === 0 || (value.length === 1 && value[0] === '') ? [] : value);
+        this.closeEmitter.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SelectContentComponent, isStandalone: true, selector: "ul[b-select-content]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event)" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ul[b-select-content]',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: ['cdkListboxValue'],
+                            outputs: ['cdkListboxValueChange'],
+                        },
+                    ],
+                    host: {
+                        '[cdkListboxValue]': 'value()',
+                        '(cdkListboxValueChange)': 'handleValueChange($event)',
+                        '[style.max-height]': 'maxHeight()',
+                    },
+                }]
+        }] });
+
+/**
+ * Component representing a custom select dropdown.
+ * It provides a button to toggle the dropdown and displays the selected option.
+ */
+class SelectComponent {
     /**
-     * Indicates whether the options dropdown is open.
+     * Placeholder text displayed when no option is selected.
+     * Defaults to 'Select an option'.
+     */
+    placeholder = input('Select an option');
+    /**
+     * Signal indicating whether the dropdown is open.
      */
     isOpen = signal(false);
     /**
-     * Reference to the renderer
-     * @private
+     * Reference to the button element used to toggle the dropdown.
      */
-    renderer = inject(Renderer2);
+    button = viewChild(Button);
     /**
-     * After the view has been initialized, set the value of the select.
+     * Reference to the content component of the dropdown.
      */
-    ngAfterViewInit() {
-        this.value.set(this.el.nativeElement.value);
+    listBox = contentChild(SelectContentComponent);
+    /**
+     * Computed signal representing the selected values from the dropdown.
+     */
+    value = computed(() => this.listBox()?.value());
+    /**
+     * Computed signal representing the content of the selected option.
+     */
+    content = computed(() => this.listBox()?.content());
+    /**
+     * Input for setting the maximum width of the dropdown.
+     * Defaults to '100%'.
+     */
+    maxWidth = input('100%');
+    /**
+     * Computed signal for the width of the button element.
+     */
+    buttonWidth = computed(() => this.button()?.el.nativeElement.offsetWidth);
+    /**
+     * Model indicating whether the select component is invalid.
+     */
+    invalid = model(false);
+    /**
+     * Model indicating whether the select component is disabled.
+     */
+    disabled = model(false);
+    constructor() {
+        /**
+         * Effect to handle changes in the selected value.
+         */
+        effect(() => this.handleSelectedValueChange());
+    }
+    /**
+     * Handles changes to the selected value by subscribing to the close event of the listbox.
+     */
+    handleSelectedValueChange() {
+        this.listBox()?.closeEmitter.subscribe(() => this.close());
     }
     /**
-     * Handles the select change event.
-     * @param value - The value of the select.
+     * Opens the dropdown and focuses the listbox.
      */
-    change(value) {
-        this.valueChange.emit(value);
-        this.value.set(value);
+    open() {
+        this.isOpen.set(true);
+        setTimeout(() => this.listBox()?.el.nativeElement.focus(), 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Select, isStandalone: true, selector: "select[b-select]", inputs: { 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 } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "change": "change($event.target.value)" }, properties: { "class.ng-invalid": "invalid()", "class.disabled": "disabled()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ` <ng-content />`, isInline: true });
+    /**
+     * Closes the dropdown and focuses the button.
+     */
+    close() {
+        setTimeout(() => this.button()?.el.nativeElement.focus(), 0);
+        this.isOpen.set(false);
+    }
+    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 }, 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" }, host: { properties: { "style.max-width": "maxWidth()", "class.ng-invalid": "invalid()", "class.disabled": "disabled()" } }, queries: [{ propertyName: "listBox", first: true, predicate: SelectContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, 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">
+      {{ value() && value()!.length === 0 ? placeholder() : 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Select, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'select[b-select]',
-                    template: ` <ng-content />`,
+                    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">
+      {{ value() && value()!.length === 0 ? placeholder() : 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.ng-invalid]': 'invalid()',
                         '[class.disabled]': 'disabled()',
-                        '[style.max-width]': 'maxWidth()',
-                        '(change)': 'change($event.target.value)',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class Option {
     /**
@@ -1537,10 +1708,6 @@ class Label {
      * The input element.
      */
     input = contentChild(Input);
-    /**
-     * The select element.
-     */
-    select = contentChild(Select);
     /**
      * The switch element.
      */
@@ -1558,12 +1725,10 @@ class Label {
      */
     labelUp = computed(() => {
         const input = this.input();
-        const select = this.select();
         const textarea = this.textarea();
         return (input?.focused() ||
             input?.value() ||
             input?.placeholder() ||
-            select?.value() ||
             textarea?.focused() ||
             textarea?.value() ||
             textarea?.placeholder());
@@ -1574,10 +1739,10 @@ class Label {
     maxWidth = computed(() => {
         const input = this.input();
         const textarea = this.textarea();
-        return input?.maxWidth() || this.select()?.maxWidth() || textarea?.cols();
+        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: "select", first: true, predicate: Select, 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, decorators: [{
             type: Component,
@@ -2027,7 +2192,7 @@ class TreeNode {
         }
     }
     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.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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TreeNode, decorators: [{
             type: Component,
@@ -2113,7 +2278,7 @@ class Tree {
         });
     }
     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.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1.CdkDropListGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tree, decorators: [{
             type: Component,
@@ -2139,13 +2304,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Represents a menu component that can optionally float.
  */
 class Menu {
-    /**
-     * Determines whether the menu is floating.
-     * @default false
-     */
-    floating = input(false);
     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: "17.1.0", version: "19.2.7", type: Menu, isStandalone: true, selector: "b-menu", inputs: { floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.floating": "floating()" } }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Menu, decorators: [{
             type: Component,
@@ -2153,9 +2313,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     selector: 'b-menu',
                     imports: [],
                     template: `<ng-content />`,
-                    host: {
-                        '[class.floating]': 'floating()',
-                    },
                     hostDirectives: [CdkMenu],
                 }]
         }] });
@@ -2181,7 +2338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  */
 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$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
@@ -2207,7 +2364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  */
 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$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
             type: Component,
@@ -2234,7 +2391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  */
 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$1.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
             type: Component,
@@ -2354,7 +2511,7 @@ class MenuTrigger {
         this.trigger.menuPosition = [connectedPosition];
     }
     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$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"] }], ngImport: i0 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuTrigger, decorators: [{
             type: Directive,
@@ -2411,5 +2568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * 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, Option, Range, ResponsiveService, Row, RowItem, Search, Select, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, Option, Range, ResponsiveService, Row, RowItem, Search, SelectComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map