@cute-widgets/base 20.0.3 → 20.0.5

package/CHANGELOG.md

@@ -1,12 +1,39 @@
-## Version 20.0.3
+## Changes in version 20.0.5 (2026-02-15)
 
-* Cosmetic changes
+### Fixes
+* Fixed incorrect display of disabled states in the `CuteButtonToggle` and `CuteButtonToggleGroup` components.
+* Auto scrolling has been fixed for new dynamic `CuteTab` in the vertical header positions.
 
-## Version 20.0.2
+### Improvements
+* Changing a page number in `CutePaginator` now works more smoothly.
+* `CuteDialog` is now more compatible with Angular Material's dialog component.
+* `CuteTabs` and `CuteCollapse` now work with native CSS animations.
+
+## Changes in version 20.0.4 (2026-01-30)
+
+### Fixes:
+* The internal markup of `CuteCardBody` and `CuteCardSubtitle` has been changed.
+* The type of `sort` parameter in `CuteTableDataSource#sortData` has been changed to `Sort` interface.
+
+### Improvements:
+* Add `wrapLabel` input property to the `CuteButton` component. With default value of _false_.
+* `CuteSort` implements the `Sort` interface now and uses native CSS animation.
+* `CuteCardImage` can now be positioned by statically specifying the corresponding attribute: `[cute-card-top-image]`, `[cute-card-bottom-image]`, or `[cute-card-float-image]`.  
+* `CutePaginator` and `CuteSelect` are more responsive now.
+* `CuteChips` have become more cute.
+* The `bsBreakpoints` object has been completely redesigned.
+
+## Changes in version 20.0.3 (2026-01-12)
+
+* Multiple cosmetic changes.
+
+## Changes in version 20.0.2 (2025-12-30)
 
 * `cute-select` now uses native CSS animation.
 
-## Version 20.0.1
+## Changes in version 20.0.1 (2025-12-26)
+
+* Small changes.
 
 ## Version 20.0.0
 

package/abstract/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, InjectionToken, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, SimpleChanges, Signal, EventEmitter } from '@angular/core';
+import { ElementRef, InjectionToken, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, DestroyRef, SimpleChanges, Signal, EventEmitter } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Observable, Subject } from 'rxjs';
 import { RichThemeColor, LayoutBreakpoint } from '@cute-widgets/base/core';
@@ -52,6 +52,7 @@ declare abstract class CuteBaseControl implements CuteWidget, OnInit, AfterViewI
     protected readonly _elementRef: ElementRef<HTMLElement>;
     protected readonly _changeDetectorRef: ChangeDetectorRef;
     protected readonly _renderer: Renderer2;
+    protected readonly _destroyRef: DestroyRef;
     /** Owner widget */
     readonly owner: CuteWidget | null;
     /**
@@ -190,6 +191,8 @@ declare abstract class CuteBaseControl implements CuteWidget, OnInit, AfterViewI
     disable(): void;
     /** Explicitly marks the view as changed so that it can be checked again. */
     markForCheck(): void;
+    /** Checks this view and its children. */
+    detectChanges(): void;
     /** Toggles the `disabled` state of the component */
     toggleDisabled(): void;
     ngOnInit(): void;
@@ -213,10 +216,16 @@ declare abstract class CuteBaseControl implements CuteWidget, OnInit, AfterViewI
  */
 
 interface Expandable {
+    /** Id of the `Expandable` component. */
+    id?: string;
+    /** Changes the expanded state of the `Expandable` component. */
+    expanded: boolean | Signal<boolean>;
+    /** Sets the expanded state of the `Expandable` component to _true_. */
     open(): void;
+    /** Sets the expanded state of the `Expandable` component to _false_. */
     close(): void;
+    /** Toggles the expanded state of the `Expandable` component. */
     toggle(): void;
-    expanded: boolean | Signal<boolean>;
 }
 
 /**
@@ -307,13 +316,13 @@ declare abstract class CuteInputDropdownControl extends CuteInputControl impleme
 
 declare abstract class CuteLayoutControl extends CuteBaseControl {
     protected breakpointObserver: BreakpointObserver;
-    private _subscription;
+    private _bpSubscription;
     /** Returns CSS-class list */
     protected get classList(): string;
     /** Clears floated content within a container */
     clearfix: boolean;
     /** Symbolic name of the screen minimum width which determines how the responsive layout behaves across device or viewport sizes. */
-    breakpoint: LayoutBreakpoint | undefined;
+    breakpoint: LayoutBreakpoint | LayoutBreakpoint[] | undefined;
     /** Event that is raised when the width of viewport is changed and crosses the size of `breakpoint`'s value. */
     breakpointState: EventEmitter<BreakpointState>;
     ngOnChanges(changes: SimpleChanges): void;

package/button/index.d.ts

@@ -1,24 +1,13 @@
+import * as _cute_widgets_base_button from '@cute-widgets/base/button';
 import * as i0 from '@angular/core';
-import { DoCheck, NgZone, InjectionToken, QueryList } from '@angular/core';
+import { DoCheck, NgZone, InjectionToken, QueryList, EventEmitter } from '@angular/core';
 import { CuteFocusableControl } from '@cute-widgets/base/abstract';
 import { RelativeSize7, ThemeColor, toThemeColor } from '@cute-widgets/base/core';
 import { Ripple } from '@cute-widgets/base/core/ripple';
-import { RelativeSize5 } from '@cute-widgets/base/core/types';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { RelativeSize5 } from '@cute-widgets/base/core/types';
 import * as i1 from '@angular/common';
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- *
- * This code is a modification of the `@angular/material` original
- * code licensed under MIT-style License (https://angular.dev/license).
- */
-
 /** Button's appearance style */
 type CuteButtonStyle = "base-button" | "flat-button" | "outline-button" | "raised-button" | "pill-button" | "circle-button" | "close-button" | "icon-button" | "fab-button"
 /** Appearance styles for Angular Material compatibility */
@@ -29,6 +18,8 @@ interface CuteButtonConfig {
     disabledInteractive?: boolean;
     /** Default palette color to apply to buttons. */
     color?: ThemeColor;
+    /** Whether to enable text wrapping. */
+    wrapText?: boolean;
 }
 /** Injection token that can be used to provide the default options the button component. */
 declare const CUTE_BUTTON_CONFIG: InjectionToken<CuteButtonConfig>;
@@ -43,18 +34,19 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     private _destroyed$;
     protected readonly _ripple: Ripple;
     protected readonly _ngZone: NgZone;
+    protected readonly _group: _cute_widgets_base_button.CuteButtonGroup | null;
     protected readonly _isAnchor: boolean;
     private _icons;
-    /** Button's appearance style in the following format: `{style}-button` */
+    /** Button's appearance style in the following format: `{style}-button`. */
     get inputButtonStyle(): CuteButtonStyle;
     set inputButtonStyle(value: CuteButtonStyle | undefined | "");
     private _inputButtonStyle;
     private _buttonStyle;
-    /** Relative size of the Button */
+    /** Relative size of the Button. */
     magnitude: RelativeSize7 | undefined;
-    /** Whether to disable text wrapping */
-    nowrap: boolean;
-    /** Whether to disable the ripple effect on button clicking */
+    /** Whether to enable text wrapping. */
+    wrapText: boolean;
+    /** Whether to disable the ripple effect on button clicking. */
     get disableRipple(): boolean;
     set disableRipple(value: boolean);
     /** `aria-disabled` value of the button. */
@@ -95,7 +87,7 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     protected generateId(): string;
     protected _getTabIndex(): number | undefined;
     private _setupAsAnchor;
-    protected setDisabledState(newState: boolean): boolean;
+    protected setDisabledState(newState: BooleanInput): boolean;
     private _savedTabIndex;
     protected _getAriaDisabled(): boolean | null;
     protected _getDisabledAttribute(): true | null;
@@ -111,7 +103,8 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     private _onMouseEvent;
     private _launchRipple;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteButtonBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonBase, never, never, { "inputButtonStyle": { "alias": "cuteButton"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "nowrap": { "alias": "nowrap"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "withAriaExpandedIndicator": { "alias": "withAriaExpandedIndicator"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "visuallyHiddenLabel": { "alias": "visuallyHiddenLabel"; "required": false; }; }, {}, ["_icons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonBase, never, never, { "inputButtonStyle": { "alias": "cuteButton"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "withAriaExpandedIndicator": { "alias": "withAriaExpandedIndicator"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "visuallyHiddenLabel": { "alias": "visuallyHiddenLabel"; "required": false; }; }, {}, ["_icons"], never, true, never>;
+    static ngAcceptInputType_wrapText: unknown;
     static ngAcceptInputType_ariaDisabled: unknown;
     static ngAcceptInputType_withAriaExpandedIndicator: unknown;
     static ngAcceptInputType_disabledInteractive: unknown;
@@ -133,10 +126,17 @@ declare class CuteButton extends CuteButtonBase {
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 
+/**
+ * Injection token that can be used to reference instances of `CuteButtonGroup`.
+ * It serves as an alternative token to the actual `CuteButtonGroup` class which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+declare const CUTE_BUTTON_GROUP: InjectionToken<CuteButtonGroup>;
 /**
  * Group a series of buttons together on a single line or stack them in a vertical column.
  */
 declare class CuteButtonGroup extends CuteFocusableControl {
+    #private;
     /** Whether to place the nested buttons in the vertical direction. */
     vertical: boolean;
     /** The relative size of the buttons group. */
@@ -149,18 +149,41 @@ declare class CuteButtonGroup extends CuteFocusableControl {
     protected get buttonSmallBinding(): boolean;
     /** Child buttons. */
     _buttons: QueryList<CuteButtonBase> | undefined;
+    /** Raised when the disabled state of a component group changes. */
+    disabledChange: EventEmitter<boolean>;
     constructor();
     protected generateId(): string;
     protected setDisabledState(newState: BooleanInput, emitEvent?: boolean): boolean;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Marks all the child button toggles to be checked. */
+    protected _markButtonsForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteButtonGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonGroup, "cute-button-group", ["cuteButtonGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; }; }, {}, ["_buttons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonGroup, "cute-button-group", ["cuteButtonGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; }; }, { "disabledChange": "disabledChange"; }, ["_buttons"], never, true, never>;
     static ngAcceptInputType_vertical: unknown;
 }
 
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+/**
+ * Injection token that can be used to reference instances of `CuteButtonToolbar`.
+ * It serves as an alternative token to the actual `CuteButtonToolbar` class which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+declare const CUTE_BUTTON_TOOLBAR: InjectionToken<CuteButtonToolbar>;
+/**
+ * Combines sets of button groups into button toolbars for more complex components.
+ */
 declare class CuteButtonToolbar extends CuteFocusableControl {
     private _gap;
-    /** The gutter between buttons */
+    /** The gutter between button groups. */
     get gap(): number;
     set gap(value: number);
     magnitude: RelativeSize5 | undefined;
@@ -178,5 +201,5 @@ declare class CuteButtonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<CuteButtonModule>;
 }
 
-export { CUTE_BUTTON_BASE, CUTE_BUTTON_CONFIG, CuteButton, CuteButtonBase, CuteButtonGroup, CuteButtonModule, CuteButtonToolbar };
+export { CUTE_BUTTON_BASE, CUTE_BUTTON_CONFIG, CUTE_BUTTON_GROUP, CUTE_BUTTON_TOOLBAR, CuteButton, CuteButtonBase, CuteButtonGroup, CuteButtonModule, CuteButtonToolbar };
 export type { CuteButtonConfig, CuteButtonStyle };

package/button-toggle/index.d.ts

@@ -3,6 +3,7 @@ import { OnInit, AfterContentInit, QueryList, EventEmitter, InjectionToken, OnDe
 import { CuteButtonGroup, CuteButtonStyle, CuteButtonBase } from '@cute-widgets/base/button';
 import { ControlValueAccessor } from '@angular/forms';
 import { Direction } from '@angular/cdk/bidi';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { toThemeColor } from '@cute-widgets/base/core';
 import * as i1 from '@angular/common';
 
@@ -89,6 +90,12 @@ declare class CuteButtonToggleGroup extends CuteButtonGroup implements ControlVa
     ngAfterContentInit(): void;
     /** Initializes the tabindex attribute using the radio pattern. */
     private _initializeTabIndex;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     *
+     * @inheritDoc
+     */
+    setDisabledState(newState: BooleanInput, emitEvent?: boolean): boolean;
     /**
      * Sets the model value. Implemented as part of ControlValueAccessor.
      * @param value Value to be set to the model.
@@ -96,7 +103,6 @@ declare class CuteButtonToggleGroup extends CuteButtonGroup implements ControlVa
     writeValue(value: any): void;
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: any): void;
-    setDisabledState(isDisabled: boolean): boolean;
     /** Handle keydown event calling to single-select button toggle. */
     protected _keydown(event: KeyboardEvent): void;
     /** Dispatch change event with current selection and group value. */
@@ -123,8 +129,6 @@ declare class CuteButtonToggleGroup extends CuteButtonGroup implements ControlVa
     private _selectValue;
     /** Syncs up the group's value with the model and emits the change event. */
     private _updateModelValue;
-    /** Marks all the child button toggles to be checked. */
-    private _markButtonsForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteButtonToggleGroup, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonToggleGroup, "cute-button-toggle-group", ["cuteButtonToggleGroup"], { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
     static ngAcceptInputType_multiple: unknown;
@@ -180,7 +184,7 @@ declare class CuteButtonToggle extends CuteButtonBase implements OnInit, OnDestr
     private _animationDisabled;
     protected _multiple: boolean;
     /** The parent button toggle group (exclusive selection). Optional. */
-    protected readonly buttonToggleGroup: CuteButtonToggleGroup;
+    protected readonly buttonToggleGroup: CuteButtonToggleGroup | null;
     /** Unique ID for the underlying `button` element. */
     get buttonId(): string;
     get inputButtonStyle(): Extract<CuteButtonStyle, "outlined" | "outline-button">;

package/card/index.d.ts

@@ -36,13 +36,13 @@ declare class CuteCard extends CuteLayoutControl {
     set backgroundImage(value: string | undefined);
     private _backgroundImage;
     /** `CuteCardHeader` element if it was defined in the `CuteCard` template. */
-    readonly _header: CuteCardHeader | undefined;
+    readonly _header: i0.Signal<CuteCardHeader | undefined>;
     /** `CuteCardFooter` element if it was defined in the `CuteCard` template. */
-    readonly _footer: CuteCardFooter | undefined;
+    readonly _footer: i0.Signal<CuteCardFooter | undefined>;
     constructor();
     protected generateId(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCard, "cute-card", ["cuteCard"], { "backgroundImage": { "alias": "backgroundImage"; "required": false; }; }, {}, ["_header", "_footer"], ["cute-card-header", "img[position=top], [role=img][position=top]", "*", "img[position=bottom], [role=img][position=bottom]", "cute-card-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCard, "cute-card", ["cuteCard"], { "backgroundImage": { "alias": "backgroundImage"; "required": false; }; }, {}, ["_header", "_footer"], ["cute-card-header", "[cute-card-top-image]", "*", "[cute-card-bottom-image]", "cute-card-footer"], true, never>;
 }
 
 /**
@@ -59,6 +59,7 @@ declare class CuteCardAvatar {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardAvatar, "[cute-card-avatar], [cuteCardAvatar]", never, {}, {}, never, never, true, never>;
 }
 
+type CuteCardImagePosition = "top" | "bottom" | "fluid";
 /**
  * Primary image content for a card, intended for use within `<cute-card>`. Can be applied to
  * any media element, such as `<img>` or `<picture>`.
@@ -71,13 +72,14 @@ declare class CuteCardAvatar {
 declare class CuteCardImage {
     protected card: CuteCard;
     /** Image position in the card layout */
-    position: "top" | "bottom" | "fluid";
-    /** Image height in pixels */
+    protected readonly _position: CuteCardImagePosition;
+    /** The intrinsic height of the image, in pixels. */
     get height(): number | undefined;
     set height(value: number | string | undefined);
     private _height;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCardImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardImage, "[cute-card-image], [cuteCardImage]", never, { "position": { "alias": "position"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardImage, "[cute-card-image], [cute-card-top-image], [cute-card-bottom-image], [cute-card-fluid-image]", never, { "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -161,3 +163,4 @@ declare class CuteCardModule {
 }
 
 export { CuteCard, CuteCardActions, CuteCardAvatar, CuteCardBody, CuteCardFooter, CuteCardGroup, CuteCardHeader, CuteCardImage, CuteCardModule, CuteCardOverlay, CuteCardSubtitle, CuteCardTitle };
+export type { CuteCardImagePosition };

package/collapse/index.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, EventEmitter } from '@angular/core';
-import { CuteBaseControl, Expandable } from '@cute-widgets/base/abstract';
-import { Subject } from 'rxjs';
-import { AnimationEvent, AnimationTriggerMetadata } from '@angular/animations';
-import * as i1 from '@angular/common';
+import { AfterContentInit, NgZone, EventEmitter } from '@angular/core';
+import * as i1 from '@angular/cdk/accordion';
+import { CdkAccordionItem } from '@angular/cdk/accordion';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CuteLayoutControl, Expandable } from '@cute-widgets/base/abstract';
+import * as i1$1 from '@angular/common';
 
 /**
  * @license Apache-2.0
@@ -16,19 +17,20 @@ import * as i1 from '@angular/common';
 
 /** Animation states */
 type CuteCollapseState = 'expanded' | 'collapsed';
-/**
- * This collapse component is used to show and hide content.
- * Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
- */
-declare class CuteCollapse extends CuteBaseControl implements Expandable, OnDestroy {
-    /** Sets the element's current state to _collapsed_ or _expanded_ value. */
-    get collapsed(): boolean;
-    set collapsed(value: boolean);
-    private _collapsed;
+declare abstract class CuteCollapseBase extends CuteLayoutControl implements Expandable, AfterContentInit {
+    protected _ngZone: NgZone;
+    protected _accordionItem: CdkAccordionItem;
+    protected _animationsDisabled: boolean;
+    private _cleanupTransitionHandlers;
+    /** Whether the `CuteCollapse` is expanded. */
+    get expanded(): boolean;
+    set expanded(value: boolean);
     /** Expanding/Collapsing directionality, _horizontal_ or _vertical_. Default is _vertical_. */
     horizontal: boolean;
     /** Whether the animation while collapsing/expanding should be disabled */
-    disableAnimation: boolean;
+    get disableAnimation(): boolean;
+    set disableAnimation(value: boolean);
+    private _disableAnimation;
     /** Event emitting before expand element */
     readonly beforeExpand: EventEmitter<void>;
     /** Event emitting before collapse element */
@@ -37,61 +39,60 @@ declare class CuteCollapse extends CuteBaseControl implements Expandable, OnDest
     readonly afterExpand: EventEmitter<void>;
     /** Event emitting after collapse element */
     readonly afterCollapse: EventEmitter<void>;
-    /** Weather the current state is _collapsed_ or _expanded_. Part of `Expandable` interface. */
-    get expanded(): boolean;
-    /** Stream of body animation events. */
-    protected readonly _bodyAnimation$: Subject<AnimationEvent>;
     constructor();
-    protected onAnimationEvent(event: AnimationEvent): void;
+    protected setDisabledState(newState: BooleanInput, emitEvent?: boolean): boolean;
     protected generateId(): string;
     /** Gets the expanded state string. */
     getState(): CuteCollapseState;
-    /** Part of `Expandable` interface */
+    /**
+     * @inheritDoc
+     * Part of `Expandable` interface.
+     */
     toggle(): void;
-    /** Part of `Expandable` interface */
+    /**
+     * @inheritDoc
+     * Part of `Expandable` interface.
+     */
     open(): void;
-    /** Part of `Expandable` interface */
+    /**
+     * @inheritDoc
+     * Part of `Expandable` interface.
+     */
     close(): void;
+    private _transitionStartListener;
+    private _transitionEndListener;
+    protected _setupAnimationEvents(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteCollapse, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCollapse, "cute-collapse", ["cuteCollapse"], { "collapsed": { "alias": "collapsed"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "disableAnimation": { "alias": "disableAnimation"; "required": false; }; }, { "beforeExpand": "beforeExpand"; "beforeCollapse": "beforeCollapse"; "afterExpand": "afterExpand"; "afterCollapse": "afterCollapse"; }, never, ["*"], true, never>;
-    static ngAcceptInputType_collapsed: unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteCollapseBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCollapseBase, never, never, { "expanded": { "alias": "expanded"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "disableAnimation": { "alias": "disableAnimation"; "required": false; }; }, { "beforeExpand": "beforeExpand"; "beforeCollapse": "beforeCollapse"; "afterExpand": "afterExpand"; "afterCollapse": "afterCollapse"; }, never, never, true, [{ directive: typeof i1.CdkAccordionItem; inputs: {}; outputs: { "expandedChange": "expandedChange"; }; }]>;
+    static ngAcceptInputType_expanded: unknown;
     static ngAcceptInputType_horizontal: unknown;
     static ngAcceptInputType_disableAnimation: unknown;
 }
+/**
+ * This collapse component is used to show and hide content.
+ * Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
+ */
+declare class CuteCollapse extends CuteCollapseBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteCollapse, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCollapse, "cute-collapse", ["cuteCollapse"], {}, {}, never, ["*"], true, never>;
+}
 
 declare class CuteCollapseTrigger {
     /** Reference to the `cute-collapse` component to toggle its visibility */
-    get collapseControl(): CuteCollapse | null;
-    set collapseControl(collapse: CuteCollapse | null);
+    get collapseControl(): Expandable | null;
+    set collapseControl(collapse: Expandable | null);
     private _collapseControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCollapseTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCollapseTrigger, "[cuteCollapseTriggerFor]", ["cuteCollapseTrigger"], { "collapseControl": { "alias": "cuteCollapseTriggerFor"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- */
-
-/** Time and timing curve for **collapse** animations. */
-declare const CUTE_COLLAPSE_ANIMATION_TIMING = "225ms cubic-bezier(0.4,0.0,0.2,1)";
-/**
- * Animations used by the CuteWidgets` collapse element.
- */
-declare const cuteCollapseAnimations: {
-    readonly bodyExpansion: AnimationTriggerMetadata;
-};
-
 declare class CuteCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCollapseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CuteCollapseModule, never, [typeof i1.CommonModule, typeof CuteCollapse, typeof CuteCollapseTrigger], [typeof CuteCollapse, typeof CuteCollapseTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CuteCollapseModule, never, [typeof i1$1.CommonModule, typeof CuteCollapse, typeof CuteCollapseTrigger], [typeof CuteCollapse, typeof CuteCollapseTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CuteCollapseModule>;
 }
 
-export { CUTE_COLLAPSE_ANIMATION_TIMING, CuteCollapse, CuteCollapseModule, CuteCollapseTrigger, cuteCollapseAnimations };
+export { CuteCollapse, CuteCollapseBase, CuteCollapseModule, CuteCollapseTrigger };
 export type { CuteCollapseState };

package/core/directives/index.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
-import { LayoutBreakpoint } from '@cute-widgets/base/core/types';
 
 /**
  * Allows users to disable the context menu that appears when they right-click
@@ -90,35 +89,6 @@ declare class CuteTimeAgo implements OnChanges {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteTimeAgo, "[cuteTimeAgo]", never, { "cuteTimeAgo": { "alias": "cuteTimeAgo"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- */
-
-/**
- * ```HTML
- * <div cuteResponsive="md, lg">
- *   This content is visible on medium and large screens.
- * </div>
- * ```
- */
-declare class CuteResponsive implements OnInit {
-    private templateRef;
-    private viewContainer;
-    /** Comma-separated screen size breakpoints (e.g., 'md, lg') or an array of it. */
-    breakPoints?: string | LayoutBreakpoint[];
-    constructor();
-    ngOnInit(): void;
-    private detectScreenSize;
-    private getScreenWidth;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteResponsive, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteResponsive, "[cuteResponsive]", never, { "breakPoints": { "alias": "cuteResponsive"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 /**
  * @license Apache-2.0
  *
@@ -165,4 +135,4 @@ declare class CuteFocusInitial {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteFocusInitial, "[cuteFocusInitial]", never, {}, {}, never, never, true, never>;
 }
 
-export { CuteClickOutside, CuteCopyToClipboard, CuteDisableContextMenu, CuteFocusInitial, CuteIconLink, CuteResponsive, CuteSvgSymbol, CuteTimeAgo };
+export { CuteClickOutside, CuteCopyToClipboard, CuteDisableContextMenu, CuteFocusInitial, CuteIconLink, CuteSvgSymbol, CuteTimeAgo };

package/core/index.d.ts

@@ -54,21 +54,28 @@ declare function _animationsDisabled(): boolean;
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 /**
- * Bootstrap media-queries, or `breakpoints`.
- * PascalCase is being used as Breakpoints is used like an enum.
+ * Bootstrap media queries, or `breakpoints`.
  */
 declare const bsBreakpoints: {
-    SmallAndDown: string;
-    MediumAndDown: string;
-    LargeAndDown: string;
-    XLargeAndDown: string;
-    XXLargeAndDown: string;
-    XSmall: string;
-    Small: string;
-    Medium: string;
-    Large: string;
-    XLarge: string;
-    XXLarge: string;
+    query: {
+        SmallAndDown: string;
+        MediumAndDown: string;
+        LargeAndDown: string;
+        XLargeAndDown: string;
+        XXLargeAndDown: string;
+        XSmall: string;
+        Small: string;
+        Medium: string;
+        Large: string;
+        XLarge: string;
+        XXLarge: string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly xxl: string;
+    };
     readonly grid: {
         xs: number;
         sm: number;
@@ -77,24 +84,30 @@ declare const bsBreakpoints: {
         xl: number;
         xxl: number;
     };
-    readonly xs: string;
-    readonly sm: string;
-    readonly md: string;
-    readonly lg: string;
-    readonly xl: string;
-    readonly xxl: string;
-    /**
-     * Gets the object's property name of the media-query by its value
-     * @param query The media-query text
-     * @returns The property name of the media-query or _undefined_ if it was not found
-     */
-    getQueryName(query: string): string | undefined;
     /**
      * Gets the breakpoint label by Bootstrap's breakpoint abbreviation
-     * @param code Bootstrap's breakpoint abbreviation
-     * @returns More descriptive text of the abbreviation
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns More descriptive text of the abbreviation.
      */
     getLabel(code: string): string;
+    /**
+     * Returns the media query string for the specified breakpoint symbol.
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns Media query string or _undefined_ if the code has an unknown value.
+     */
+    getMediaQuery(code: string): string | undefined;
+    /**
+     * Returns the media query string array for the specified breakpoint one or more symbols.
+     * @param codes Bootstrap's breakpoint abbreviation list.
+     * @returns Media query string array for each specified code of breakpoint.
+     */
+    getMediaQueries(codes: string | string[]): string[];
+    /**
+     * Gets the name of the media-query by its value.
+     * @param query The media-query text.
+     * @returns The name of the media-query or _undefined_ if it was not found.
+     */
+    getQueryName(query: string): string | undefined;
 };
 
 /**
@@ -229,7 +242,7 @@ interface TreeNode<D = unknown> {
     data?: D;
     /** Router link. */
     routerLink?: string | string[];
-    /** Identifies the picture displayed to the left of the item label. */
+    /** Identifies the image displayed next to the item label. */
     icon?: string;
     /** Icon color. */
     iconColor?: string;

package/core/interfaces/index.d.ts

@@ -39,7 +39,7 @@ interface TreeNode<D = unknown> {
     data?: D;
     /** Router link. */
     routerLink?: string | string[];
-    /** Identifies the picture displayed to the left of the item label. */
+    /** Identifies the image displayed next to the item label. */
     icon?: string;
     /** Icon color. */
     iconColor?: string;