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

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

@@ -1,22 +1,37 @@
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Button component that provides various styles and configurations.
+ */
 export declare class Button {
-    /** The variant of the button. */
+    /**
+     * Defines the visual style of the button.
+     *
+     * @defaultValue 'primary'
+     */
     readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "ghost" | "outlined">;
-    /** The size of the button. */
-    readonly size: import("@angular/core").InputSignal<"small" | "default">;
-    /** Whether is loading. */
-    readonly loading: import("@angular/core").InputSignal<boolean>;
-    /** Whether the padding should be equal vertically and horizontally. */
-    readonly equalPadding: import("@angular/core").InputSignal<boolean>;
-    /** Whether the button is toggleable. */
-    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. */
+    /**
+     * Specifies the size of the button.
+     *
+     * @defaultValue '2'
+     */
+    readonly size: import("@angular/core").InputSignal<"1" | "2" | "3">;
+    /**
+     * Determines whether the button has an active state enabled.
+     *
+     * @defaultValue true
+     */
     readonly activeEnabled: import("@angular/core").InputSignal<boolean>;
-    /** The element reference of the button. */
+    /**
+     * Indicates whether the button should have squared corners.
+     *
+     * @defaultValue false
+     */
+    readonly squared: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Reference to the host DOM element.
+     */
     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; }; "activeEnabled": { "alias": "activeEnabled"; "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; }; "activeEnabled": { "alias": "activeEnabled"; "required": false; "isSignal": true; }; "squared": { "alias": "squared"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -0,0 +1,114 @@
+import { OnInit } from '@angular/core';
+import { Button } from '../button/button.component';
+import { ControlValueAccessor } from '@angular/forms';
+import { CommandComponent } from '../command/command.component';
+import * as i0 from "@angular/core";
+/**
+ * Component representing a combobox dropdown.
+ * This component provides a button to toggle the dropdown and displays the selected option(s) with an input field.
+ */
+export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
+    /**
+     * Placeholder text displayed when no option is selected.
+     * Defaults to 'Select an option'.
+     */
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    /**
+     * Signal indicating whether the dropdown is currently open.
+     */
+    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Reference to the button element used to toggle the dropdown.
+     * This is used for managing focus and interactions.
+     */
+    readonly button: import("@angular/core").Signal<Button | undefined>;
+    /**
+     * Reference to the content component of the dropdown.
+     * This contains the list of selectable options.
+     */
+    readonly command: import("@angular/core").Signal<CommandComponent | undefined>;
+    /**
+     * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `CommandComponent`.
+     */
+    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
+    /**
+     * Linked signal for the width of the button element.
+     * This is used to set the width of the dropdown overlay.
+     */
+    readonly buttonWidth: import("@angular/core").WritableSignal<any>;
+    /**
+     * Model indicating whether the combobox component is disabled.
+     * When disabled, the dropdown cannot be opened or interacted with.
+     */
+    readonly disabled: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * Computed signal representing the options available in the dropdown.
+     * This retrieves the options from the `CommandComponent`.
+     */
+    readonly options: import("@angular/core").Signal<readonly import("@angular/cdk/listbox").CdkOption<any>[] | undefined>;
+    /**
+     * Computed signal representing the content of the selected option(s).
+     * If no option is selected, it returns the placeholder text.
+     */
+    readonly content: import("@angular/core").Signal<string | undefined>;
+    /**
+     * Signal representing the delay before closing the dropdown.
+     * This is used to provide a smooth transition when closing the dropdown.
+     */
+    readonly closeDelay: import("@angular/core").WritableSignal<number>;
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     * It sets up the necessary subscriptions for handling value changes.
+     */
+    ngOnInit(): void;
+    /**
+     * Subscribes to the `closeEmitter` of the `CommandComponent` to handle
+     * changes to the selected value. This ensures the dropdown closes and the
+     * value is propagated to Angular Forms.
+     */
+    handleSelectedValueChange(): void;
+    /**
+     * Focuses the input element within the command component when the overlay is attached.
+     */
+    onOverlayAttached(): void;
+    /**
+     * Sets the width of the button element when the window is resized.
+     * This ensures that the dropdown overlay matches the width of the button.
+     */
+    setButtonWidth(): void;
+    /**
+     * Callback function to propagate changes to the model.
+     * This is called whenever the value changes.
+     */
+    private onChange;
+    /**
+     * Callback function to mark the component as touched.
+     * This is called when the component loses focus.
+     */
+    private onTouched;
+    /**
+     * Writes a new value to the component.
+     * This method is called by Angular Forms to update the value of the combobox component.
+     * @param value - The new value to set.
+     */
+    writeValue(value: string[]): void;
+    /**
+     * Registers a callback function to be called when the value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (value: string[]) => void): void;
+    /**
+     * Registers a callback function to be called when the component is touched.
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * 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.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComboboxComponent, "b-combobox", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["command"], ["*"], true, never>;
+}

package/core/components/command/command-options.component.d.ts

@@ -0,0 +1,58 @@
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+/**
+ * Component representing a list of command options.
+ * It uses Angular CDK's listbox and option utilities for accessibility and keyboard navigation.
+ */
+export declare class CommandOptionsComponent implements OnInit {
+    /**
+     * Collection of child options within the listbox.
+     */
+    readonly options: import("@angular/core").Signal<readonly CdkOption<any>[]>;
+    /**
+     * Key manager for handling keyboard navigation and active descendant management.
+     */
+    readonly listKeyManager: import("@angular/core").Signal<ActiveDescendantKeyManager<CdkOption<any>>>;
+    /**
+     * Signal representing the currently selected values.
+     */
+    readonly value: import("@angular/core").WritableSignal<string[]>;
+    /**
+     * Signal representing the currently highlighted option.
+     */
+    readonly highlightedOption: import("@angular/core").WritableSignal<string>;
+    /**
+     * Reference to the injected CDK Listbox instance.
+     */
+    cdkListbox: CdkListbox<any>;
+    /**
+     * Emitter for closing the command options.
+     */
+    closeEmitter: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Lifecycle hook that initializes the component.
+     * Enables the use of active descendant for the listbox.
+     */
+    ngOnInit(): void;
+    /**
+     * Selects the currently active option and updates the listbox value.
+     */
+    selectOption(value?: string[]): void;
+    /**
+     * Moves the active item to the next option and updates the highlighted option.
+     */
+    nextOption(): void;
+    /**
+     * Moves the active item to the previous option and updates the highlighted option.
+     */
+    previousOption(): void;
+    /**
+     * Updates the CSS class of options to reflect the currently highlighted option.
+     */
+    updateHighlightedOption(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommandOptionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommandOptionsComponent, "ul[b-command-options]", never, {}, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: {}; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+}

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

@@ -0,0 +1,46 @@
+import { ElementRef } from '@angular/core';
+import { CommandOptionsComponent } from './command-options.component';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i0 from "@angular/core";
+/**
+ * Component representing a command input with associated options.
+ * It provides keyboard navigation and focus trapping for accessibility.
+ */
+export declare class CommandComponent {
+    /**
+     * Reference to the child `CommandOptionsComponent` if present.
+     * Used to interact with the options for navigation and selection.
+     */
+    readonly commandOptions: import("@angular/core").Signal<CommandOptionsComponent | undefined>;
+    /**
+     * Input representing the maximum height of the component.
+     * This can be used to control the visual appearance of the command component.
+     */
+    readonly maxHeight: import("@angular/core").InputSignal<string>;
+    /**
+     * Computed signal representing the selected value from the command options.
+     * This is linked to the value of the `CommandOptionsComponent`.
+     */
+    readonly value: import("@angular/core").Signal<string[] | undefined>;
+    /**
+     * Computed signal representing the options available in the command options.
+     * This is linked to the options of the `CommandOptionsComponent`.
+     */
+    readonly options: import("@angular/core").Signal<readonly import("@angular/cdk/listbox").CdkOption<any>[] | undefined>;
+    /**
+     * Reference to the BreakpointObserver service for responsive design.
+     */
+    breakpointObserver: BreakpointObserver;
+    /**
+     * Signal representing whether the current viewport is desktop or not.
+     * This is determined by checking if the Handset breakpoint is matched.
+     */
+    readonly isDesktop: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Reference to the host element of the component.
+     * This provides access to the DOM element of the command component.
+     */
+    el: ElementRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommandComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommandComponent, "b-command", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, ["commandOptions"], ["*"], true, never>;
+}

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

@@ -5,22 +5,6 @@ export declare class Input implements AfterViewInit {
      * The type of the input.
      */
     readonly type: import("@angular/core").InputSignal<"number" | "text" | "password" | "email">;
-    /**
-     * The placeholder text for the input.
-     */
-    readonly placeholder: import("@angular/core").InputSignal<string>;
-    /**
-     * The value of the input.
-     */
-    readonly value: import("@angular/core").WritableSignal<string | number | null>;
-    /**
-     * Whether the input is invalid.
-     */
-    readonly invalid: import("@angular/core").ModelSignal<boolean>;
-    /**
-     * Whether the input is disabled.
-     */
-    readonly disabled: import("@angular/core").ModelSignal<boolean>;
     /**
      * The maximum width of the input.
      */
@@ -37,14 +21,6 @@ export declare class Input implements AfterViewInit {
      * Whether the input type is number.
      */
     readonly isNumberType: import("@angular/core").Signal<boolean>;
-    /**
-     * Whether the input is focused.
-     */
-    readonly focused: import("@angular/core").WritableSignal<boolean>;
-    /**
-     * Event emitted when the value changes.
-     */
-    valueChange: import("@angular/core").OutputEmitterRef<string | number | null>;
     /**
      * Reference to the input element.
      */
@@ -53,10 +29,19 @@ export declare class Input implements AfterViewInit {
      * Reference to the ngModel directive.
      */
     private ngModel;
+    /**
+     * The size of the input.
+     */
+    readonly size: import("@angular/core").InputSignal<"1" | "2" | "3">;
     /**
      * After the view has been initialized, set the value of the select.
      */
     ngAfterViewInit(): void;
+    /**
+     * Sets the value of the input element.
+     * @param value The value to set.
+     */
+    setValue(value: string): void;
     /**
      * Handles the input event.
      * @param event The input event.
@@ -74,5 +59,5 @@ export declare class Input implements AfterViewInit {
      */
     formatNumber(value: string | null): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Input, "input[b-input]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "numberType": { "alias": "numberType"; "required": false; "isSignal": true; }; }, { "invalid": "invalidChange"; "disabled": "disabledChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Input, "input[b-input]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "numberType": { "alias": "numberType"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/core/components/input-group/input-group.component.d.ts

@@ -1,13 +1,9 @@
 import * as i0 from "@angular/core";
-export declare class InputGroup {
+export declare class InputGroupComponent {
     /**
-     * Whether the input group elements are separated by a border.
-     */
-    readonly bordered: import("@angular/core").InputSignal<boolean>;
-    /**
-     * The maximum width of the input.
+     * Sets the maximum width of the input group (e.g. 300px, 100%).
      */
     readonly maxWidth: import("@angular/core").InputSignal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroup, "b-input-group", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupComponent, "b-input-group", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/core/components/menu/shared/components/menu-group/menu-group.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/menu";
+/**
+ * Represents a group of menu items.
+ */
+export declare class MenuGroupComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuGroupComponent, "b-menu-group", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuGroup; inputs: {}; outputs: {}; }]>;
+}

package/core/components/menu/shared/components/menu-item/menu-item.component.d.ts

@@ -5,5 +5,5 @@ import * as i1 from "@angular/cdk/menu";
  */
 export declare class MenuItemComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "b-menu-item", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItem; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "button[b-menu-item]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItem; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
 }

package/core/components/menu/shared/components/menu-item-checkbox/menu-item-checkbox.component.d.ts

@@ -5,5 +5,5 @@ import * as i1 from "@angular/cdk/menu";
  */
 export declare class MenuItemCheckboxComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemCheckboxComponent, "b-menu-item-checkbox", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItemCheckbox; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; "cdkMenuItemChecked": "active"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemCheckboxComponent, "button[b-menu-item-checkbox]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItemCheckbox; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; "cdkMenuItemChecked": "active"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
 }

package/core/components/menu/shared/components/menu-item-radio/menu-item-radio.component.d.ts

@@ -5,5 +5,5 @@ import * as i1 from "@angular/cdk/menu";
  */
 export declare class MenuItemRadioComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemRadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemRadioComponent, "b-menu-item-radio", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItemRadio; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; "cdkMenuItemChecked": "active"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemRadioComponent, "button[b-menu-item-radio]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuItemRadio; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuitemTypeaheadLabel": "typeaheadLabel"; "cdkMenuItemChecked": "active"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
 }

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

@@ -0,0 +1,51 @@
+import { CdkListbox } from '@angular/cdk/listbox';
+import { ElementRef } from '@angular/core';
+import { OptionComponent } from '../../../shared/components/option.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+/**
+ * Component representing the list of options in a select.
+ * This component integrates with Angular CDK Listbox to manage options and their selection.
+ */
+export declare class SelectOptionsComponent {
+    /**
+     * Signal representing the selected values in the listbox.
+     * This is an array of strings corresponding to the selected option values.
+     */
+    readonly value: import("@angular/core").WritableSignal<string[]>;
+    /**
+     * Event emitter triggered when the dropdown should close.
+     * This is used to notify the parent component to close the dropdown.
+     */
+    closeEmitter: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Reference to the host element of the component.
+     * This provides access to the DOM element of the options list.
+     */
+    el: ElementRef<any>;
+    /**
+     * Input for setting the maximum height of the dropdown.
+     * Defaults to '300px'. This controls the vertical size of the dropdown.
+     */
+    readonly maxHeight: import("@angular/core").InputSignal<string>;
+    /**
+     * Reference to the CDK Listbox directive.
+     * This is used to manage the options and their selection state.
+     */
+    listBox: CdkListbox<any>;
+    /**
+     * Reference to the list of options in the dropdown.
+     * This is a collection of `OptionComponent` instances representing the available options.
+     */
+    readonly options: import("@angular/core").Signal<readonly OptionComponent[]>;
+    /**
+     * Handles changes to the selected value in the listbox.
+     * This method updates the `value` signal, emits the `closeEmitter` event,
+     * and ensures the parent component is notified of the selection change.
+     *
+     * @param value - The new array of selected values.
+     */
+    handleValueChange(value: string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionsComponent, "ul[b-select-options]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+}

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

@@ -1,66 +1,114 @@
-import { SelectContentComponent } from './select-content.component';
+import { OnInit } from '@angular/core';
+import { SelectOptionsComponent } from './select-options.component';
 import { Button } from '../button/button.component';
+import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
  * Component representing a custom select dropdown.
- * It provides a button to toggle the dropdown and displays the selected option.
+ * This component provides a button to toggle the dropdown and displays the selected option(s).
  */
-export declare class SelectComponent {
+export declare class SelectComponent implements OnInit, ControlValueAccessor {
     /**
      * Placeholder text displayed when no option is selected.
      * Defaults to 'Select an option'.
      */
     readonly placeholder: import("@angular/core").InputSignal<string>;
     /**
-     * Signal indicating whether the dropdown is open.
+     * Signal indicating whether the dropdown is currently open.
      */
     readonly isOpen: import("@angular/core").WritableSignal<boolean>;
     /**
      * Reference to the button element used to toggle the dropdown.
+     * This is used for managing focus and interactions.
      */
     readonly button: import("@angular/core").Signal<Button | undefined>;
     /**
      * Reference to the content component of the dropdown.
+     * This contains the list of selectable options.
      */
-    readonly listBox: import("@angular/core").Signal<SelectContentComponent | undefined>;
+    readonly optionsList: import("@angular/core").Signal<SelectOptionsComponent | undefined>;
     /**
      * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `OptionsListComponent`.
      */
-    readonly value: import("@angular/core").Signal<string[] | undefined>;
+    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
     /**
-     * Computed signal representing the content of the selected option.
+     * Linked signal for the width of the button element.
+     * This is used to set the width of the dropdown overlay.
      */
-    readonly content: import("@angular/core").Signal<string | undefined>;
+    readonly buttonWidth: import("@angular/core").WritableSignal<any>;
     /**
-     * Input for setting the maximum width of the dropdown.
-     * Defaults to '100%'.
+     * Model indicating whether the select component is disabled.
+     * When disabled, the dropdown cannot be opened or interacted with.
      */
-    readonly maxWidth: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").ModelSignal<boolean>;
     /**
-     * Computed signal for the width of the button element.
+     * Computed signal representing the options available in the dropdown.
+     * This retrieves the options from the `OptionsListComponent`.
      */
-    readonly buttonWidth: import("@angular/core").Signal<any>;
+    readonly options: import("@angular/core").Signal<readonly import("@basis-ng/primitives").OptionComponent[] | undefined>;
     /**
-     * Model indicating whether the select component is invalid.
+     * Computed signal representing the content of the selected option(s).
+     * If no option is selected, it returns the placeholder text.
      */
-    readonly invalid: import("@angular/core").ModelSignal<boolean>;
+    readonly content: import("@angular/core").Signal<string | undefined>;
     /**
-     * Model indicating whether the select component is disabled.
+     * Signal representing the delay before closing the dropdown.
+     * This is used to provide a smooth transition when closing the dropdown.
      */
-    readonly disabled: import("@angular/core").ModelSignal<boolean>;
-    constructor();
+    readonly closeDelay: import("@angular/core").WritableSignal<number>;
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     * It sets up the necessary subscriptions for handling value changes.
+     */
+    ngOnInit(): void;
     /**
-     * Handles changes to the selected value by subscribing to the close event of the listbox.
+     * 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.
      */
     handleSelectedValueChange(): void;
     /**
-     * Opens the dropdown and focuses the listbox.
+     * Focuses the options list when the overlay is attached.
+     */
+    onOverlayAttached(): void;
+    /**
+     * Sets the width of the dropdown overlay based on the button's width.
+     * This ensures that the dropdown aligns properly with the button.
+     */
+    setButtonWidth(): void;
+    /**
+     * Callback function to propagate changes to the model.
+     * This is called whenever the value changes.
+     */
+    private onChange;
+    /**
+     * Callback function to mark the component as touched.
+     * This is called when the component loses focus.
+     */
+    private onTouched;
+    /**
+     * Writes a new value to the component.
+     * This method is called by Angular Forms to update the value of the select component.
+     * @param value - The new value to set.
+     */
+    writeValue(value: string[]): void;
+    /**
+     * Registers a callback function to be called when the value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (value: string[]) => void): void;
+    /**
+     * Registers a callback function to be called when the component is touched.
+     * @param fn - The callback function.
      */
-    open(): void;
+    registerOnTouched(fn: () => void): void;
     /**
-     * Closes the dropdown and focuses the button.
+     * 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.
      */
-    close(): void;
+    setDisabledState(isDisabled: boolean): 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["optionsList"], ["*"], true, never>;
 }

package/core/components/tabs/tab.component.d.ts

@@ -0,0 +1,11 @@
+import { CdkOption } from '@angular/cdk/listbox';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+export declare class TabComponent {
+    /**
+     * Reference to the injected CDK Option instance.
+     */
+    cdkOption: CdkOption<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "b-tab", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkOption; inputs: { "cdkOption": "value"; }; outputs: {}; }]>;
+}