@acorex/components 21.0.1-next.49 → 21.0.1-next.50

package/{types/acorex-components-data-table.d.ts → data-table/index.d.ts}

@@ -1,7 +1,7 @@
 import * as i2 from '@acorex/cdk/common';
-import { MXBaseComponent, AXDataSource, AXEvent, AXSortOrder, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { MXBaseComponent, AXDataSource, AXEvent, AXSortOrder, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, ChangeDetectorRef, OnInit, AfterViewInit, WritableSignal, Signal, QueryList } from '@angular/core';
+import { TemplateRef, EventEmitter, ChangeDetectorRef, OnInit, DoCheck, QueryList, WritableSignal, ElementRef, AfterViewInit, Signal } from '@angular/core';
 import * as i11 from '@acorex/core/format';
 import { AXFormatOptions } from '@acorex/core/format';
 import * as i8 from '@acorex/components/button';
@@ -596,6 +596,255 @@ declare class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<AXRowSelectColumnComponent, "ax-select-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Component for a data table with infinite scrolling capabilities.
+ *
+ * @category Components
+ */
+declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable implements OnInit, DoCheck {
+    private document;
+    private platformID;
+    private ngZone;
+    /**
+     *  @ignore
+     */
+    protected columns: QueryList<AXDataTableColumnComponent>;
+    /**
+     *  @ignore
+     */
+    protected startFixedColumn(): AXDataTableColumnComponent[];
+    /**
+     *  @ignore
+     */
+    protected endFixedColumn(): AXDataTableColumnComponent[];
+    /**
+     *  @ignore
+     */
+    protected notFixedColumn(): AXDataTableColumnComponent[];
+    /**
+     *  @ignore
+     */
+    protected notFixedColumnCount(): number;
+    /**
+     *  @ignore
+     */
+    protected fixedColumnCount(): number;
+    /**
+     * Emits an event when the page changes.
+     *
+     * @event
+     */
+    onPageChanged: EventEmitter<AXValueChangedEvent<number>>;
+    /**
+     *  @ignore
+     */
+    private clickSubject;
+    /**
+     * Emits an event when a row is clicked.
+     *
+     * @event
+     */
+    onRowClick: EventEmitter<AXDataTableRowClick>;
+    /**
+     * Emits an event when a row is double-clicked.
+     *
+     * @event
+     */
+    onRowDbClick: EventEmitter<AXDataTableRowDbClick>;
+    /**
+     * Template for rendering rows in the data table.
+     */
+    rowTemplate?: TemplateRef<unknown>;
+    /**
+     * Template to display when the data table is empty.
+     */
+    emptyTemplate?: TemplateRef<unknown>;
+    /**
+     * Controls the visibility of the table header.
+     *
+     * @defaultValue true
+     */
+    showHeader: boolean;
+    /**
+     * Defines the mode for fetching data.
+     *
+     * @defaultValue 'auto'
+     */
+    fetchDataMode: 'auto' | 'manual';
+    /**
+     * Configuration for the loading state of the data table.
+     *
+     * @defaultValue { enabled: true, animation: true }
+     */
+    loading: {
+        enabled: boolean;
+        animation: boolean;
+        loadingTemplate?: TemplateRef<unknown>;
+    };
+    /**
+     *  @ignore
+     */
+    protected listDataSource: AXListDataSource<unknown>;
+    /**
+     *  @ignore
+     */
+    protected isLoading: WritableSignal<boolean>;
+    /**
+     *  @ignore
+     */
+    protected hasItems: boolean;
+    /**
+     *  @ignore
+     */
+    protected totalRows: number;
+    /**
+     *  @ignore
+     */
+    protected currentPage: number;
+    /**
+     *  @ignore
+     */
+    protected totalPages: number;
+    /**
+     *  @ignore
+     */
+    protected startRowIndex: number;
+    /**
+     *  @ignore
+     */
+    private lastIndex;
+    /**
+     * Event emitted when the focused row changes.
+     *
+     * @event
+     */
+    focusedRowChange: EventEmitter<unknown>;
+    /**
+     *  @ignore
+     */
+    private _focusedRow;
+    /**
+     * Retrieves the currently focused row.
+     */
+    get focusedRow(): unknown;
+    /**
+     * Sets the currently focused row and emits a change event.
+     *
+     * @param v - The row data to be set as focused.
+     */
+    set focusedRow(v: unknown);
+    /**
+     * Defines the height of each item in the table.
+     *
+     * @default 40
+     */
+    itemHeight: number | 'auto';
+    /**
+     *  @ignore
+     */
+    protected width: string;
+    /**
+     *  @ignore
+     */
+    protected height: string;
+    /**
+     *  @ignore
+     */
+    private viewport;
+    /**
+     * Emitted when the scroll index changes in the table.
+     *
+     * @event
+     */
+    onScrolledIndexChanged: EventEmitter<AXDataTableScrollIndexChanged>;
+    trackByIdx(i: any): any;
+    /**
+     *  @ignore
+     */
+    ngOnInit(): void;
+    /**
+     *  @ignore
+     */
+    headerContainer: ElementRef<HTMLDivElement>;
+    /**
+     *  @ignore
+     */
+    footerContainer: ElementRef;
+    /**
+     *  @ignore
+     */
+    scrollableContainer: ElementRef<HTMLDivElement>;
+    /**
+     *  @ignore
+     */
+    protected _handleOnscrolledIndexChange(e: number): void;
+    /**
+     *  @ignore
+     */
+    ngDoCheck(): void;
+    /**
+     *  @ignore
+     */
+    private updateTotalCount;
+    /**
+     *  @ignore
+     */
+    private updateHeight;
+    /**
+     *  @ignore
+     */
+    private updateWidth;
+    /**
+     *  @ignore
+     */
+    private updateHScroll;
+    /**
+     *  @ignore
+     */
+    private copyFixedColumns;
+    /**
+     * Updates the viewport by checking its size and scrolling to the last index.
+     * Marks the component for change detection.
+     * @ignore
+     */
+    render(): void;
+    /**
+     * Resets the index to zero and refreshes the data source.
+     * @ignore
+     */
+    refresh(): void;
+    /**
+     *  @ignore
+     */
+    protected handleRowClick(event: MouseEvent, item: unknown): void;
+    /**
+     *  @ignore
+     */
+    private handleRowSingleClick;
+    /**
+     *  @ignore
+     */
+    protected handleRowDoubleClick(e: MouseEvent, item: unknown): void;
+    /**
+     * Handles column header clicks to toggle sorting on the column.
+     *
+     * @param e - The mouse event triggered by the click.
+     * @param column - The column that was clicked.
+     * @ignore
+     */
+    handleColumnClick(e: MouseEvent, column: AXDataTableColumnComponent): void;
+    /**
+     *  @ignore
+     */
+    protected getSort(column: AXDataTableColumnComponent): string | undefined;
+    /**
+     *  @ignore
+     */
+    protected _handleOnScroll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXInfiniteScrollDataTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXInfiniteScrollDataTableComponent, "ax-infinite-scroll-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "onPageChanged": "onPageChanged"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "focusedRowChange": "focusedRowChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], true, never>;
+}
+
 /**
  * Component for displaying and managing a data table with advanced features.
  *
@@ -970,9 +1219,9 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
 
 declare class AXDataTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.ScrollingModule, typeof i4.AXTranslationModule, typeof i5.AXResultModule, typeof i6.AXLoadingModule, typeof i7.AXSkeletonModule, typeof i8.AXButtonModule, typeof i9.AXDecoratorModule, typeof i10.AXDropdownModule, typeof i11.AXFormatModule, typeof i2.AXRippleDirective, typeof i12.AXDataPagerModule, typeof i13.CdkDropList, typeof i13.CdkDrag, typeof i13.CdkDragPlaceholder, typeof i13.CdkDragHandle, typeof AXDataTableComponent, typeof AXDataTableTextColumnComponent, typeof AXRowIndexColumnComponent, typeof AXRowSelectColumnComponent, typeof AXRowExpandColumnComponent, typeof AXRowCommandColumnComponent, typeof AXRowDropdownCommandColumnComponent, typeof AXDataTableColumnResizableDirective], [typeof AXDataTableComponent, typeof AXDataTableTextColumnComponent, typeof AXRowIndexColumnComponent, typeof AXRowSelectColumnComponent, typeof AXRowExpandColumnComponent, typeof AXRowCommandColumnComponent, typeof AXRowDropdownCommandColumnComponent, typeof AXDataTableColumnResizableDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.ScrollingModule, typeof i4.AXTranslationModule, typeof i5.AXResultModule, typeof i6.AXLoadingModule, typeof i7.AXSkeletonModule, typeof i8.AXButtonModule, typeof i9.AXDecoratorModule, typeof i10.AXDropdownModule, typeof i11.AXFormatModule, typeof i2.AXRippleDirective, typeof i12.AXDataPagerModule, typeof i13.CdkDropList, typeof i13.CdkDrag, typeof i13.CdkDragPlaceholder, typeof i13.CdkDragHandle, typeof AXInfiniteScrollDataTableComponent, typeof AXDataTableComponent, typeof AXDataTableTextColumnComponent, typeof AXRowIndexColumnComponent, typeof AXRowSelectColumnComponent, typeof AXRowExpandColumnComponent, typeof AXRowCommandColumnComponent, typeof AXRowDropdownCommandColumnComponent, typeof AXDataTableColumnResizableDirective], [typeof AXInfiniteScrollDataTableComponent, typeof AXDataTableComponent, typeof AXDataTableTextColumnComponent, typeof AXRowIndexColumnComponent, typeof AXRowSelectColumnComponent, typeof AXRowExpandColumnComponent, typeof AXRowCommandColumnComponent, typeof AXRowDropdownCommandColumnComponent, typeof AXDataTableColumnResizableDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
 }
 
-export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
+export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
 export type { AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };

package/fesm2022/acorex-components-accordion.mjs

@@ -30,7 +30,6 @@ class AXAccordionItemComponent {
         return [
             `${this.disabled() ? 'ax-state-disabled' : ''}`,
             `ax-${this.parent?.look() ? this.parent.look() : this.look()}`,
-            'ax-default',
         ];
     }
     open() {
@@ -42,10 +41,10 @@ class AXAccordionItemComponent {
     toggle() {
         this.isCollapsed.update((prev) => !prev);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem) * 3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem) * 2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem) * 4);padding-inline-start:calc(var(--spacing,.25rem) * 4);padding-inline-end:calc(var(--spacing,.25rem) * 4)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-accordion-item', imports: [
                         AXLoadingModule,
@@ -53,8 +52,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXAccordionItemHeaderDirective,
                         AXAccordionItemDirective,
                         AXAccordionItemContentDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem) * 3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem) * 2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem) * 4);padding-inline-start:calc(var(--spacing,.25rem) * 4);padding-inline-end:calc(var(--spacing,.25rem) * 4)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accordionItem: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionItemDirective), { isSignal: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], __hostClass: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"] }]
+        }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -62,10 +61,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AXAccordionGroupComponent {
     constructor() {
         this.accordionGroup = viewChild(AXAccordionGroupDirective, ...(ngDevMode ? [{ debugName: "accordionGroup" }] : []));
-        this.content = contentChildren(AXAccordionItemComponent, { ...(ngDevMode ? { debugName: "content" } : {}), descendants: true });
+        this.content = contentChildren(AXAccordionItemComponent, ...(ngDevMode ? [{ debugName: "content", descendants: true }] : [{ descendants: true }]));
         this.accordion = input(true, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
         this.activeIndex = model(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
-        this.look = input('', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
         this.collapsedOnItemClick = input(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
         this.#eff = effect(() => {
             const accordionItemDirective = [];
@@ -76,8 +75,11 @@ class AXAccordionGroupComponent {
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
     #eff;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXAccordionGroupComponent, isStandalone: true, selector: "ax-accordion-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, providers: [
+    get __hostClass() {
+        return `ax-${this.look()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXAccordionGroupComponent, isStandalone: true, selector: "ax-accordion-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: MXLookableComponent,
                 useExisting: AXAccordionGroupComponent,
@@ -92,9 +94,9 @@ class AXAccordionGroupComponent {
     >
       <ng-content select="ax-accordion-item"></ng-content>
     </div>
-  `, isInline: true, styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem) * 2)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "directive", type: AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "directive", type: AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-accordion-group', imports: [AXLoadingModule, AXAccordionGroupDirective], template: `
     <div
@@ -111,15 +113,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             useExisting: AXAccordionGroupComponent,
                         },
                         { provide: AXComponent, useExisting: AXAccordionGroupComponent },
-                    ], styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem) * 2)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { accordionGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionGroupDirective), { isSignal: true }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXAccordionItemComponent), { ...{ descendants: true }, isSignal: true }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], collapsedOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedOnItemClick", required: false }] }] } });
+                    ], styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent], exports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent], exports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXAccordionItemComponent, AXAccordionGroupComponent],