@cute-widgets/base 20.0.4 → 20.0.5

package/CHANGELOG.md

@@ -1,6 +1,16 @@
+## Changes in version 20.0.5 (2026-02-15)
+
+### 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.
+
+### 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.
@@ -13,23 +23,18 @@
 * `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.
 
 ## Changes in version 20.0.1 (2025-12-26)
 
----
 * Small changes.
 
 ## Version 20.0.0
 
----
 * Initial version.

package/abstract/index.d.ts

@@ -216,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>;
 }
 
 /**
@@ -310,7 +316,7 @@ 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 */

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,6 +34,7 @@ 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`. */
@@ -52,8 +44,8 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     private _buttonStyle;
     /** Relative size of the Button. */
     magnitude: RelativeSize7 | undefined;
-    /** Whether to enable label wrapping. */
-    wrapLabel: boolean;
+    /** Whether to enable text wrapping. */
+    wrapText: boolean;
     /** Whether to disable the ripple effect on button clicking. */
     get disableRipple(): boolean;
     set disableRipple(value: boolean);
@@ -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,8 +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; }; "wrapLabel": { "alias": "wrapLabel"; "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_wrapLabel: unknown;
+    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;
@@ -134,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. */
@@ -150,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;
@@ -179,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/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/index.d.ts

@@ -95,7 +95,13 @@ declare const bsBreakpoints: {
      * @param code Bootstrap's breakpoint abbreviation.
      * @returns Media query string or _undefined_ if the code has an unknown value.
      */
-    getQuery(code: string): string | undefined;
+    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.

package/core/layout/index.d.ts

@@ -48,7 +48,13 @@ declare const bsBreakpoints: {
      * @param code Bootstrap's breakpoint abbreviation.
      * @returns Media query string or _undefined_ if the code has an unknown value.
      */
-    getQuery(code: string): string | undefined;
+    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.

package/dialog/index.d.ts

@@ -1,27 +1,15 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Injector, OnDestroy, EventEmitter, ComponentRef, OnInit, TemplateRef, InjectionToken, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
-import { HorizontalEdge, LayoutBreakpoint } from '@cute-widgets/base/core/types';
+import { ViewContainerRef, Injector, OnDestroy, EventEmitter, ComponentRef, OnInit, OnChanges, SimpleChanges, InjectionToken, TemplateRef } from '@angular/core';
 import { DragAxis, CdkDrag } from '@angular/cdk/drag-drop';
 import { Direction } from '@angular/cdk/bidi';
 import { ScrollStrategy, OverlayRef, ComponentType } from '@angular/cdk/overlay';
+import { LayoutBreakpoint, HorizontalEdge } from '@cute-widgets/base/core/types';
 import { DialogConfig, CdkDialogContainer, DialogRef, Dialog } from '@angular/cdk/dialog';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { Observable, Subject } from 'rxjs';
 import * as i1 from '@angular/common';
 
-declare class CuteDialogBody {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogBody, "cute-dialog-body, [cute-dialog-body], [cuteDialogBody],             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]  ", ["cuteDialogBody"], {}, {}, never, never, true, never>;
-}
-
-declare class CuteDialogFooter {
-    /** Horizontal alignment of the footer's content */
-    align: HorizontalEdge | 'center';
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogFooter, "cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]  ", ["cuteDialogFooter", "cuteDialogActions"], { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 /**
  * @license Apache-2.0
  *
@@ -89,7 +77,7 @@ declare class CuteDialogConfig<D = any> {
     minWidth?: number | string;
     /** Min-height of the dialog. If a number is provided, assumes pixel units. */
     minHeight?: number | string;
-    /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
+    /** Max-width of the dialog. If a number is provided, assumes pixel units. */
     maxWidth?: number | string;
     /** Max-height of the dialog. If a number is provided, assumes pixel units. */
     maxHeight?: number | string;
@@ -253,12 +241,6 @@ declare class CuteDialogHeader implements OnInit {
     static ngAcceptInputType_draggable: unknown;
 }
 
-declare class CuteDialogTitle {
-    id: unknown;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogTitle, "[cute-dialog-title], [cuteDialogTitle]", ["cuteDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 /**
  * @license Apache-2.0
  *
@@ -283,7 +265,7 @@ declare enum CuteDialogState {
 declare class CuteDialogRef<T, R = any> {
     private _ref;
     private _config;
-    protected _containerInstance: CuteDialogContainer;
+    _containerInstance: CuteDialogContainer;
     /** The instance of component opened into the dialog. */
     componentInstance: T | undefined;
     /**
@@ -365,6 +347,82 @@ declare class CuteDialogRef<T, R = any> {
  */
 declare function _closeDialogVia<R>(ref: CuteDialogRef<R>, interactionType: FocusOrigin, result?: R): void;
 
+/**
+ * @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 that will close the current dialog.
+ */
+declare class CuteDialogClose implements OnInit, OnChanges {
+    dialogRef: CuteDialogRef<any, any>;
+    private _elementRef;
+    private _dialog;
+    /** Screen-reader label for the button. */
+    ariaLabel: string | undefined;
+    /** Default to "button" to prevent accidental form submits. */
+    type: 'submit' | 'button' | 'reset';
+    /** Dialog close input. */
+    dialogResult: any;
+    _cuteDialogClose: any;
+    constructor(...args: unknown[]);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    protected _onButtonClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogClose, "[cute-dialog-close], [cuteDialogClose]", ["cuteDialogClose"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dialogResult": { "alias": "cute-dialog-close"; "required": false; }; "_cuteDialogClose": { "alias": "cuteDialogClose"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare abstract class CuteDialogLayoutSection implements OnInit, OnDestroy {
+    protected _dialogRef: CuteDialogRef<any, any>;
+    private _elementRef;
+    private _dialog;
+    protected abstract _onAdd(): void;
+    protected abstract _onRemove(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogLayoutSection, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogLayoutSection, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
+ */
+declare class CuteDialogTitle extends CuteDialogLayoutSection {
+    protected _header: CuteDialogHeader | null;
+    id: string;
+    constructor();
+    protected _onAdd(): void;
+    protected _onRemove(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogTitle, "[cute-dialog-title], [cuteDialogTitle]", ["cuteDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
+}
+/**
+ * Scrollable content container of a dialog.
+ */
+declare class CuteDialogBody {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogBody, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogBody, "cute-dialog-body, [cute-dialog-body], [cuteDialogBody],             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]  ", ["cuteDialogBody"], {}, {}, never, never, true, never>;
+}
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+declare class CuteDialogFooter extends CuteDialogLayoutSection {
+    /** Horizontal alignment of the footer's content */
+    align: HorizontalEdge | 'center';
+    protected _onAdd(): void;
+    protected _onRemove(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogFooter, "cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]  ", ["cuteDialogFooter", "cuteDialogActions"], { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * @license Apache-2.0
  *
@@ -440,45 +498,11 @@ declare class CuteDialog implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<CuteDialog>;
 }
 
-/**
- * @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 that will close the current dialog.
- */
-declare class CuteDialogClose implements OnInit, OnChanges {
-    dialogRef: CuteDialogRef<any>;
-    private _elementRef;
-    private _dialog;
-    /** Screen-reader label for the button. */
-    ariaLabel: string | undefined;
-    /** Default to "button" to prevent accidental form submits. */
-    type: 'submit' | 'button' | 'reset';
-    /** Dialog close input. */
-    dialogResult: any;
-    _cuteDialogClose: any;
-    constructor(dialogRef: CuteDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: CuteDialog);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    protected _onButtonClick(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogClose, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteDialogClose, "[cute-dialog-close], [cuteDialogClose]", ["cuteDialogClose"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dialogResult": { "alias": "cute-dialog-close"; "required": false; }; "_cuteDialogClose": { "alias": "cuteDialogClose"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 declare class CuteDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteDialogModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<CuteDialogModule, never, [typeof i1.CommonModule, typeof CuteDialogBody, typeof CuteDialogClose, typeof CuteDialogFooter, typeof CuteDialogHeader, typeof CuteDialogTitle, typeof CuteDialogContainer], [typeof CuteDialogBody, typeof CuteDialogClose, typeof CuteDialogFooter, typeof CuteDialogHeader, typeof CuteDialogTitle, typeof CuteDialogContainer]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CuteDialogModule>;
 }
 
-export { CUTE_DIALOG_DATA, CUTE_DIALOG_DEFAULT_OPTIONS, CUTE_DIALOG_SCROLL_STRATEGY, CuteDialog, CuteDialogBody, CuteDialogClose, CuteDialogConfig, CuteDialogContainer, CuteDialogFooter, CuteDialogHeader, CuteDialogModule, CuteDialogRef, CuteDialogState, CuteDialogTitle, _closeDialogVia };
+export { CUTE_DIALOG_DATA, CUTE_DIALOG_DEFAULT_OPTIONS, CUTE_DIALOG_SCROLL_STRATEGY, CuteDialog, CuteDialogBody, CuteDialogClose, CuteDialogConfig, CuteDialogContainer, CuteDialogFooter, CuteDialogHeader, CuteDialogLayoutSection, CuteDialogModule, CuteDialogRef, CuteDialogState, CuteDialogTitle, _closeDialogVia };
 export type { AutoFocusTarget, DialogFullScreenStrategy, DialogPosition, DialogRole };