@spartan-ng/brain 0.0.1-alpha.555 → 0.0.1-alpha.557

package/accordion/index.d.ts

@@ -1,5 +1,10 @@
-import { BrnAccordion, BrnAccordionItem, BrnAccordionTrigger } from './lib/brn-accordion';
+import { BrnAccordion } from './lib/brn-accordion';
 import { BrnAccordionContent } from './lib/brn-accordion-content';
+import { BrnAccordionItem } from './lib/brn-accordion-item';
+import { BrnAccordionTrigger } from './lib/brn-accordion-trigger';
 export * from './lib/brn-accordion';
 export * from './lib/brn-accordion-content';
+export * from './lib/brn-accordion-item';
+export * from './lib/brn-accordion-token';
+export * from './lib/brn-accordion-trigger';
 export declare const BrnAccordionImports: readonly [typeof BrnAccordion, typeof BrnAccordionContent, typeof BrnAccordionItem, typeof BrnAccordionTrigger];

package/accordion/lib/brn-accordion-content.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
 export declare class BrnAccordionContent {
+    private readonly _config;
     private readonly _item;
     private readonly _elementRef;
     protected readonly _width: import("@angular/core").WritableSignal<number | null>;
     protected readonly _height: import("@angular/core").WritableSignal<number | null>;
-    protected readonly _dimensionsInitiated: import("@angular/core").WritableSignal<boolean>;
     protected readonly _inert: import("@angular/core").Signal<true | undefined>;
     readonly state: import("@angular/core").Signal<"open" | "closed">;
     readonly id: string;
@@ -14,13 +14,7 @@ export declare class BrnAccordionContent {
      * @default 'overflow: hidden'
      */
     readonly style: import("@angular/core").InputSignal<string>;
-    /**
-     * The style to be applied to the host element while the dimensions are being calculated.
-     * @default 'opacity: 0'
-     */
-    readonly styleWhileDimensionsAreInitiating: import("@angular/core").InputSignal<string>;
-    protected readonly _mutableStyle: import("@angular/core").WritableSignal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BrnAccordionContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionContent, "brn-accordion-content,[brnAccordionContent]", never, { "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleWhileDimensionsAreInitiating": { "alias": "styleWhileDimensionsAreInitiating"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionContent, "brn-accordion-content,[brnAccordionContent]", never, { "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/accordion/lib/brn-accordion-item.d.ts

@@ -0,0 +1,28 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+export declare class BrnAccordionItem {
+    private static _itemIdGenerator;
+    readonly id: number;
+    private readonly _accordion;
+    /**
+     * Whether the item is opened or closed.
+     * @default false
+     */
+    readonly isOpened: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Computed state of the item, either 'open' or 'closed'
+     * @default closed
+     */
+    readonly state: import("@angular/core").Signal<"open" | "closed">;
+    /**
+     * Emits boolean when the item is opened or closed.
+     */
+    readonly stateChange: import("@angular/core").OutputEmitterRef<"open" | "closed">;
+    /**
+     * Emits state change when item is opened or closed
+     */
+    readonly openedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<BrnAccordionItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionItem, "[brnAccordionItem]", ["brnAccordionItem"], { "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "openedChange": "openedChange"; }, never, never, true, never>;
+}

package/accordion/lib/brn-accordion-token.d.ts

@@ -0,0 +1,19 @@
+import { type ExistingProvider, InjectionToken, type Type, type ValueProvider } from '@angular/core';
+import type { MeasurementDisplay } from '@spartan-ng/brain/core';
+import type { BrnAccordion } from './brn-accordion';
+import type { BrnAccordionItem } from './brn-accordion-item';
+export declare const BrnAccordionToken: InjectionToken<BrnAccordion>;
+export declare function injectBrnAccordion(): BrnAccordion;
+export declare function provideBrnAccordion(accordion: Type<BrnAccordion>): ExistingProvider;
+export declare const BrnAccordionItemToken: InjectionToken<BrnAccordionItem>;
+export declare function injectBrnAccordionItem(): BrnAccordionItem;
+export declare function provideBrnAccordionItem(item: Type<BrnAccordionItem>): ExistingProvider;
+export interface BrBrnAccordionConfig {
+    /**
+     * The display style to use when measuring element dimensions.
+     * @default 'block'
+     */
+    measurementDisplay: MeasurementDisplay;
+}
+export declare function provideBrnAccordionConfig(config: Partial<BrBrnAccordionConfig>): ValueProvider;
+export declare function injectBrnAccordionConfig(): BrBrnAccordionConfig;

package/accordion/lib/brn-accordion-trigger.d.ts

@@ -0,0 +1,16 @@
+import type { FocusableOption } from '@angular/cdk/a11y';
+import * as i0 from "@angular/core";
+export declare class BrnAccordionTrigger implements FocusableOption {
+    private readonly _accordion;
+    private readonly _item;
+    private readonly _el;
+    readonly state: import("@angular/core").Signal<"open" | "closed">;
+    readonly id: string;
+    readonly ariaControls: string;
+    constructor();
+    protected toggle(event: Event): void;
+    focus(): void;
+    private validateAriaStructure;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BrnAccordionTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionTrigger, "[brnAccordionTrigger]", never, {}, {}, never, never, true, never>;
+}

package/accordion/lib/brn-accordion.d.ts

@@ -1,47 +1,6 @@
-import { type FocusableOption } from '@angular/cdk/a11y';
-import { type BooleanInput } from '@angular/cdk/coercion';
 import { type AfterContentInit, type OnDestroy } from '@angular/core';
+import { BrnAccordionTrigger } from './brn-accordion-trigger';
 import * as i0 from "@angular/core";
-export declare class BrnAccordionItem {
-    private static _itemIdGenerator;
-    readonly id: number;
-    private readonly _accordion;
-    /**
-     * Whether the item is opened or closed.
-     * @default false
-     */
-    readonly isOpened: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Computed state of the item, either 'open' or 'closed'
-     * @default closed
-     */
-    readonly state: import("@angular/core").Signal<"open" | "closed">;
-    /**
-     * Emits boolean when the item is opened or closed.
-     */
-    readonly stateChange: import("@angular/core").OutputEmitterRef<"open" | "closed">;
-    /**
-     * Emits state change when item is opened or closed
-     */
-    readonly openedChange: import("@angular/core").OutputEmitterRef<boolean>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<BrnAccordionItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionItem, "[brnAccordionItem]", ["brnAccordionItem"], { "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "openedChange": "openedChange"; }, never, never, true, never>;
-}
-export declare class BrnAccordionTrigger implements FocusableOption {
-    private readonly _accordion;
-    private readonly _item;
-    private readonly _el;
-    readonly state: import("@angular/core").Signal<"open" | "closed">;
-    readonly id: string;
-    readonly ariaControls: string;
-    constructor();
-    protected toggle(event: Event): void;
-    focus(): void;
-    private validateAriaStructure;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BrnAccordionTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnAccordionTrigger, "[brnAccordionTrigger]", never, {}, {}, never, never, true, never>;
-}
 export declare class BrnAccordion implements AfterContentInit, OnDestroy {
     private readonly _el;
     private readonly _focusMonitor;

package/collapsible/index.d.ts

@@ -3,5 +3,6 @@ import { BrnCollapsibleContent } from './lib/brn-collapsible-content';
 import { BrnCollapsibleTrigger } from './lib/brn-collapsible-trigger';
 export * from './lib/brn-collapsible';
 export * from './lib/brn-collapsible-content';
+export * from './lib/brn-collapsible-token';
 export * from './lib/brn-collapsible-trigger';
 export declare const BrnCollapsibleImports: readonly [typeof BrnCollapsible, typeof BrnCollapsibleTrigger, typeof BrnCollapsibleContent];

package/collapsible/lib/brn-collapsible-content.d.ts

@@ -1,18 +1,15 @@
-import { type OnInit } from '@angular/core';
-import { BrnCollapsible } from './brn-collapsible';
 import * as i0 from "@angular/core";
-export declare class BrnCollapsibleContent implements OnInit {
-    protected readonly _collapsible: BrnCollapsible | null;
+export declare class BrnCollapsibleContent {
+    private readonly _config;
     private readonly _elementRef;
-    private readonly _platformId;
+    protected readonly _collapsible: import("@spartan-ng/brain/collapsible").BrnCollapsible | null;
+    protected readonly _width: import("@angular/core").WritableSignal<number | null>;
+    protected readonly _height: import("@angular/core").WritableSignal<number | null>;
     /**
      * The id of the collapsible content element.
      */
     readonly id: import("@angular/core").InputSignal<string | null | undefined>;
-    protected readonly _width: import("@angular/core").WritableSignal<number | null>;
-    protected readonly _height: import("@angular/core").WritableSignal<number | null>;
     constructor();
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BrnCollapsibleContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BrnCollapsibleContent, "brn-collapsible-content", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnCollapsibleContent, "[brnCollapsibleContent],brn-collapsible-content", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/collapsible/lib/brn-collapsible-token.d.ts

@@ -0,0 +1,16 @@
+import type { ValueProvider } from '@angular/core';
+import { type ExistingProvider, InjectionToken, type Type } from '@angular/core';
+import type { MeasurementDisplay } from '@spartan-ng/brain/core';
+import type { BrnCollapsible } from './brn-collapsible';
+export declare const BrnCollapsibleToken: InjectionToken<BrnCollapsible>;
+export declare function injectBrnCollapsible(): BrnCollapsible | null;
+export declare function provideBrnCollapsible(collapsible: Type<BrnCollapsible>): ExistingProvider;
+export interface BrCollapsibleConfig {
+    /**
+     * The display style to use when measuring element dimensions.
+     * @default 'block'
+     */
+    measurementDisplay: MeasurementDisplay;
+}
+export declare function provideBrnCollapsibleConfig(config: Partial<BrCollapsibleConfig>): ValueProvider;
+export declare function injectBrnCollapsibleConfig(): BrCollapsibleConfig;

package/collapsible/lib/brn-collapsible-trigger.d.ts

@@ -1,9 +1,9 @@
-import { BrnCollapsible } from './brn-collapsible';
 import * as i0 from "@angular/core";
 export declare class BrnCollapsibleTrigger {
-    protected readonly _collapsible: BrnCollapsible | null;
+    protected readonly _collapsible: import("@spartan-ng/brain/collapsible").BrnCollapsible | null;
+    readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
     constructor();
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BrnCollapsibleTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnCollapsibleTrigger, "button[brnCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnCollapsibleTrigger, "button[brnCollapsibleTrigger]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/collapsible/lib/brn-collapsible.d.ts

@@ -7,6 +7,10 @@ export declare class BrnCollapsible {
      * The expanded or collapsed state of the collapsible component.
      */
     readonly expanded: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * The current state of the collapsible component as 'open' or 'closed'.
+     */
+    readonly state: import("@angular/core").Signal<BrnCollapsibleState>;
     /**
      * The disabled state of the collapsible component.
      */
@@ -16,5 +20,5 @@ export declare class BrnCollapsible {
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BrnCollapsible, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BrnCollapsible, "brn-collapsible", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BrnCollapsible, "[brnCollapsible],brn-collapsible", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
 }

package/core/helpers/measure-dimensions.d.ts

@@ -0,0 +1,5 @@
+export type MeasurementDisplay = 'block' | 'inline-block' | 'flex' | 'grid' | 'table' | 'contents' | (string & {});
+export declare const measureDimensions: (elementToMeasure: HTMLElement, measurementDisplay: MeasurementDisplay) => {
+    width: number;
+    height: number;
+};

package/core/index.d.ts

@@ -5,6 +5,7 @@ export * from './helpers/debounced-signal';
 export * from './helpers/dev-mode';
 export * from './helpers/exposes-side';
 export * from './helpers/exposes-state';
+export * from './helpers/measure-dimensions';
 export * from './helpers/table-classes-settable';
 export * from './helpers/wait-for-element-animations';
 export * from './helpers/zone-free';

package/fesm2022/spartan-ng-brain-accordion.mjs

@@ -1,71 +1,39 @@
 import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { inject, input, computed, output, effect, untracked, Directive, ElementRef, isDevMode, signal, contentChildren, linkedSignal, afterNextRender } from '@angular/core';
+import { InjectionToken, inject, ElementRef, isDevMode, Directive, computed, signal, contentChildren, input, afterNextRender, output, effect, untracked } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
+import { measureDimensions } from '@spartan-ng/brain/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
-class BrnAccordionItem {
-    static _itemIdGenerator = 0;
-    id = ++BrnAccordionItem._itemIdGenerator;
-    _accordion = inject(BrnAccordion);
-    /**
-     * Whether the item is opened or closed.
-     * @default false
-     */
-    isOpened = input(false, { transform: coerceBooleanProperty });
-    /**
-     * Computed state of the item, either 'open' or 'closed'
-     * @default closed
-     */
-    state = computed(() => (this._accordion.openItemIds().includes(this.id) ? 'open' : 'closed'));
-    /**
-     * Emits boolean when the item is opened or closed.
-     */
-    stateChange = output();
-    /**
-     * Emits state change when item is opened or closed
-     */
-    openedChange = output();
-    constructor() {
-        if (!this._accordion) {
-            throw Error('Accordion item can only be used inside an Accordion. Add brnAccordion to ancestor.');
-        }
-        effect(() => {
-            const state = this.state();
-            untracked(() => {
-                this.stateChange.emit(state);
-                this.openedChange.emit(state === 'open');
-            });
-        });
-        effect(() => {
-            const isOpened = this.isOpened();
-            untracked(() => {
-                if (isOpened) {
-                    this._accordion.openItem(this.id);
-                }
-                else {
-                    this._accordion.closeItem(this.id);
-                }
-            });
-        });
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnAccordionItem, isStandalone: true, selector: "[brnAccordionItem]", inputs: { isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", openedChange: "openedChange" }, host: { properties: { "attr.data-state": "state()" } }, exportAs: ["brnAccordionItem"], ngImport: i0 });
+const BrnAccordionToken = new InjectionToken('BrnAccordionToken');
+function injectBrnAccordion() {
+    return inject(BrnAccordionToken);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnAccordionItem]',
-                    host: {
-                        '[attr.data-state]': 'state()',
-                    },
-                    exportAs: 'brnAccordionItem',
-                }]
-        }], ctorParameters: () => [] });
+function provideBrnAccordion(accordion) {
+    return { provide: BrnAccordionToken, useExisting: accordion };
+}
+const BrnAccordionItemToken = new InjectionToken('BrnAccordionItemToken');
+function injectBrnAccordionItem() {
+    return inject(BrnAccordionItemToken);
+}
+function provideBrnAccordionItem(item) {
+    return { provide: BrnAccordionItemToken, useExisting: item };
+}
+const defaultConfig = {
+    measurementDisplay: 'block',
+};
+const BrnAccordionConfigToken = new InjectionToken('BrnBrnAccordionConfig');
+function provideBrnAccordionConfig(config) {
+    return { provide: BrnAccordionConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+function injectBrnAccordionConfig() {
+    return inject(BrnAccordionConfigToken, { optional: true }) ?? defaultConfig;
+}
+
 class BrnAccordionTrigger {
-    _accordion = inject(BrnAccordion);
-    _item = inject(BrnAccordionItem);
+    _accordion = injectBrnAccordion();
+    _item = injectBrnAccordionItem();
     _el = inject((ElementRef));
     state = this._item.state;
     id = `brn-accordion-trigger-${this._item.id}`;
@@ -136,6 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                 }]
         }], ctorParameters: () => [] });
+
 const HORIZONTAL_KEYS_TO_PREVENT_DEFAULT = [
     'ArrowLeft',
     'ArrowRight',
@@ -254,7 +223,7 @@ class BrnAccordion {
         }
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnAccordion, isStandalone: true, selector: "[brnAccordion]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()", "attr.data-orientation": "orientation()" } }, queries: [{ propertyName: "triggers", predicate: BrnAccordionTrigger, descendants: true, isSignal: true }], exportAs: ["brnAccordion"], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnAccordion, isStandalone: true, selector: "[brnAccordion]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()", "attr.data-orientation": "orientation()" } }, providers: [provideBrnAccordion(BrnAccordion)], queries: [{ propertyName: "triggers", predicate: BrnAccordionTrigger, descendants: true, isSignal: true }], exportAs: ["brnAccordion"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordion, decorators: [{
             type: Directive,
@@ -264,31 +233,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[attr.data-state]': 'state()',
                         '[attr.data-orientation]': 'orientation()',
                     },
+                    providers: [provideBrnAccordion(BrnAccordion)],
                     exportAs: 'brnAccordion',
                 }]
         }] });
 
 class BrnAccordionContent {
-    _item = inject(BrnAccordionItem);
+    _config = injectBrnAccordionConfig();
+    _item = injectBrnAccordionItem();
     _elementRef = inject(ElementRef);
     _width = signal(null);
     _height = signal(null);
-    _dimensionsInitiated = signal(false);
-    _inert = computed(() => (this.state() === 'closed' ? true : undefined));
-    state = this._item.state;
-    id = `brn-accordion-content-${this._item.id}`;
-    ariaLabeledBy = `brn-accordion-trigger-${this._item.id}`;
+    _inert = computed(() => (this.state?.() === 'closed' ? true : undefined));
+    state = this._item?.state;
+    id = `brn-accordion-content-${this._item?.id}`;
+    ariaLabeledBy = `brn-accordion-trigger-${this._item?.id}`;
     /**
      * The style to be applied to the host element after the dimensions are calculated.
      * @default 'overflow: hidden'
      */
     style = input('overflow: hidden');
-    /**
-     * The style to be applied to the host element while the dimensions are being calculated.
-     * @default 'opacity: 0'
-     */
-    styleWhileDimensionsAreInitiating = input('overflow: hidden');
-    _mutableStyle = linkedSignal(() => this._dimensionsInitiated() ? this.style() : this.styleWhileDimensionsAreInitiating());
     constructor() {
         if (!this._item) {
             throw Error('Accordion Content can only be used inside an AccordionItem. Add brnAccordionItem to parent.');
@@ -297,37 +261,96 @@ class BrnAccordionContent {
             const content = this._elementRef.nativeElement.firstChild;
             if (!content)
                 return;
-            const { width, height } = content.getBoundingClientRect();
+            const { width, height } = measureDimensions(content, this._config.measurementDisplay);
             this._width.set(width);
             this._height.set(height);
-            this._dimensionsInitiated.set(true);
         });
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnAccordionContent, isStandalone: true, selector: "brn-accordion-content,[brnAccordionContent]", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleWhileDimensionsAreInitiating: { classPropertyName: "styleWhileDimensionsAreInitiating", publicName: "styleWhileDimensionsAreInitiating", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, properties: { "attr.data-state": "state()", "attr.aria-labelledby": "ariaLabeledBy", "id": "id", "style.--brn-accordion-content-width.px": "_width()", "style.--brn-accordion-content-height.px": "_height()", "attr.inert": "_inert()", "attr.style": "_mutableStyle()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnAccordionContent, isStandalone: true, selector: "brn-accordion-content,[brnAccordionContent]", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, properties: { "attr.data-state": "state?.()", "attr.aria-labelledby": "ariaLabeledBy", "id": "id", "style.--brn-accordion-content-width.px": "_width()", "style.--brn-accordion-content-height.px": "_height()", "attr.inert": "_inert()", "attr.style": "style()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'brn-accordion-content,[brnAccordionContent]',
                     host: {
-                        '[attr.data-state]': 'state()',
+                        '[attr.data-state]': 'state?.()',
                         '[attr.aria-labelledby]': 'ariaLabeledBy',
                         role: 'region',
                         '[id]': 'id',
                         '[style.--brn-accordion-content-width.px]': '_width()',
                         '[style.--brn-accordion-content-height.px]': '_height()',
                         '[attr.inert]': '_inert()',
-                        '[attr.style]': '_mutableStyle()',
+                        '[attr.style]': 'style()',
                     },
                 }]
         }], ctorParameters: () => [] });
 
+class BrnAccordionItem {
+    static _itemIdGenerator = 0;
+    id = ++BrnAccordionItem._itemIdGenerator;
+    _accordion = injectBrnAccordion();
+    /**
+     * Whether the item is opened or closed.
+     * @default false
+     */
+    isOpened = input(false, { transform: coerceBooleanProperty });
+    /**
+     * Computed state of the item, either 'open' or 'closed'
+     * @default closed
+     */
+    state = computed(() => (this._accordion.openItemIds()?.includes(this.id) ? 'open' : 'closed'));
+    /**
+     * Emits boolean when the item is opened or closed.
+     */
+    stateChange = output();
+    /**
+     * Emits state change when item is opened or closed
+     */
+    openedChange = output();
+    constructor() {
+        if (!this._accordion) {
+            throw Error('Accordion item can only be used inside an Accordion. Add brnAccordion to ancestor.');
+        }
+        effect(() => {
+            const state = this.state();
+            untracked(() => {
+                this.stateChange.emit(state);
+                this.openedChange.emit(state === 'open');
+            });
+        });
+        effect(() => {
+            const isOpened = this.isOpened();
+            untracked(() => {
+                if (isOpened) {
+                    this._accordion.openItem(this.id);
+                }
+                else {
+                    this._accordion.closeItem(this.id);
+                }
+            });
+        });
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnAccordionItem, isStandalone: true, selector: "[brnAccordionItem]", inputs: { isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", openedChange: "openedChange" }, host: { properties: { "attr.data-state": "state()" } }, providers: [provideBrnAccordionItem(BrnAccordionItem)], exportAs: ["brnAccordionItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnAccordionItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAccordionItem]',
+                    host: {
+                        '[attr.data-state]': 'state()',
+                    },
+                    providers: [provideBrnAccordionItem(BrnAccordionItem)],
+                    exportAs: 'brnAccordionItem',
+                }]
+        }], ctorParameters: () => [] });
+
 const BrnAccordionImports = [BrnAccordion, BrnAccordionContent, BrnAccordionItem, BrnAccordionTrigger];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BrnAccordion, BrnAccordionContent, BrnAccordionImports, BrnAccordionItem, BrnAccordionTrigger };
+export { BrnAccordion, BrnAccordionContent, BrnAccordionImports, BrnAccordionItem, BrnAccordionItemToken, BrnAccordionToken, BrnAccordionTrigger, injectBrnAccordion, injectBrnAccordionConfig, injectBrnAccordionItem, provideBrnAccordion, provideBrnAccordionConfig, provideBrnAccordionItem };
 //# sourceMappingURL=spartan-ng-brain-accordion.mjs.map