@radix-ng/primitives 0.37.0 → 0.38.0

package/fesm2022/radix-ng-primitives-accordion.mjs

@@ -1,495 +1,281 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, EventEmitter, booleanAttribute, Output, Input, forwardRef, ContentChildren, Directive, ElementRef, ChangeDetectorRef, ContentChild, NgModule } from '@angular/core';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { Subject, merge, Subscription } from 'rxjs';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { ENTER, SPACE, TAB } from '@angular/cdk/keycodes';
+import { Directive, inject, ElementRef, input, booleanAttribute, model, output, computed, effect, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/collapsible';
+import { RdxCollapsibleContentPresenceDirective, injectCollapsibleRootContext, RdxCollapsibleRootDirective, RdxCollapsibleContentDirective, RdxCollapsibleTriggerDirective } from '@radix-ng/primitives/collapsible';
+import { createContext, useArrowNavigation } from '@radix-ng/primitives/core';
+import { _IdGenerator } from '@angular/cdk/a11y';
 
-const RdxAccordionRootToken = new InjectionToken('RdxAccordionRootDirective');
-let nextId$1 = 0;
+class RdxAccordionContentPresenceDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionContentPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionContentPresenceDirective, isStandalone: true, selector: "ng-template[rdxAccordionContentPresence]", hostDirectives: [{ directive: i1.RdxCollapsibleContentPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionContentPresenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxAccordionContentPresence]',
+                    hostDirectives: [RdxCollapsibleContentPresenceDirective]
+                }]
+        }] });
+
+const [injectAccordionRootContext, provideAccordionRootContext] = createContext('AccordionRootContext');
+const rootContext = () => {
+    const instance = inject(RdxAccordionRootDirective);
+    return {
+        disabled: instance.disabled,
+        direction: instance.dir,
+        collapsible: instance.isCollapsible,
+        orientation: instance.orientation,
+        elementRef: instance.elementRef,
+        value: instance.value,
+        isSingle: instance.isSingle,
+        changeModelValue: instance.changeModelValue,
+        isItemOpen: instance.isItemOpen
+    };
+};
 /**
  * @group Components
  */
 class RdxAccordionRootDirective {
     constructor() {
-        /**
-         * @ignore
-         */
-        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
-        /**
-         * @ignore
-         */
-        this.dir = inject(Directionality, { optional: true });
-        /**
-         * @ignore
-         */
-        this.id = `rdx-accordion-${nextId$1++}`;
-        /**
-         * @ignore
+        this.elementRef = inject(ElementRef);
+        this.id = input(inject(_IdGenerator).getId('rdx-accordion-'));
+        this.dir = input('ltr');
+        /** Whether the Accordion is disabled.
+         * @defaultValue false
+         * @group Props
          */
-        this.openCloseAllActions = new Subject();
+        this.disabled = input(false, { transform: booleanAttribute });
         /**
          * The orientation of the accordion.
          *
          * @defaultValue 'vertical'
          * @group Props
          */
-        this.orientation = 'vertical';
+        this.orientation = input('vertical');
+        this.defaultValue = input();
         /**
-         * Determines whether one or multiple items can be opened at the same time.
+         * The controlled value of the item to expand.
+         *
          * @group Props
-         * @defaultValue 'single'
-         */
-        this.type = 'single';
-        /**
-         * @ignore
          */
-        this.collapsible = true;
+        this.value = model();
+        this.collapsible = input(false, { transform: booleanAttribute });
+        this.type = input('single');
         /**
          * Event handler called when the expanded state of an item changes and type is "multiple".
          * @group Emits
          */
-        this.onValueChange = new EventEmitter();
-        this._defaultValue = [];
-    }
-    get isMultiple() {
-        return this.type === 'multiple';
-    }
-    /**
-     * The value of the item to expand when initially rendered and type is "single".
-     * Use when you do not need to control the state of the items.
-     * @group Props
-     */
-    set defaultValue(value) {
-        if (value !== this._defaultValue) {
-            this._defaultValue = Array.isArray(value) ? value : [value];
-        }
-    }
-    get defaultValue() {
-        return this.isMultiple ? this._defaultValue : this._defaultValue[0];
-    }
-    /**
-     * The controlled value of the item to expand.
-     *
-     * @group Props
-     */
-    set value(value) {
-        if (value !== this._value) {
-            this._value = Array.isArray(value) ? value : [value];
-            this.selectionDispatcher.notify(this.value, this.id);
-        }
-    }
-    get value() {
-        if (this._value === undefined) {
-            return this.defaultValue;
-        }
-        return this.isMultiple ? this._value : this._value[0];
-    }
-    /**
-     * @ignore
-     */
-    ngAfterContentInit() {
-        this.selectionDispatcher.notify((this._value ?? this._defaultValue), this.id);
-        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();
-        if (this.orientation === 'horizontal') {
-            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
-        }
-        else {
-            this.keyManager.withVerticalOrientation();
-        }
-        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() => this.onValueChange.emit());
-    }
-    /**
-     * @ignore
-     */
-    ngOnDestroy() {
-        this.openCloseAllActions.complete();
-        this.onValueChangeSubscription.unsubscribe();
-    }
-    /**
-     * @ignore
-     */
-    handleKeydown(event) {
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-        const activeItem = this.keyManager.activeItem;
-        if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
-            !this.keyManager.isTyping() &&
-            activeItem &&
-            !activeItem.disabled) {
-            event.preventDefault();
-            activeItem.toggle();
-        }
-        else if (event.keyCode === TAB && event.shiftKey) {
-            if (this.keyManager.activeItemIndex === 0)
-                return;
-            this.keyManager.setPreviousItemActive();
-            event.preventDefault();
-        }
-        else if (event.keyCode === TAB) {
-            if (this.keyManager.activeItemIndex === this.items.length - 1)
+        this.onValueChange = output();
+        this.isCollapsible = computed(() => {
+            return this.collapsible();
+        });
+        this.isSingle = computed(() => this.type() === 'single');
+        this.changeModelValue = (value, isOpen) => {
+            if (!isOpen && !this.isCollapsible()) {
                 return;
-            this.keyManager.setNextItemActive();
-            event.preventDefault();
-        }
-        else {
-            this.keyManager.onKeydown(event);
-        }
-    }
-    /** Opens all enabled accordion items in an accordion where multi is enabled.
-     * @ignore
-     */
-    openAll() {
-        if (this.isMultiple) {
-            this.openCloseAllActions.next(true);
-        }
-    }
-    /** Closes all enabled accordion items.
-     * @ignore
-     */
-    closeAll() {
-        this.openCloseAllActions.next(false);
-    }
-    /**
-     * @ignore
-     */
-    setActiveItem(item) {
-        this.keyManager.setActiveItem(item);
+            }
+            if (this.type() === 'multiple') {
+                this.value.update((v) => {
+                    if (Array.isArray(v)) {
+                        return isOpen ? [...v, value] : v.filter((i) => i !== value);
+                    }
+                    return isOpen ? [value] : [];
+                });
+            }
+            else {
+                if (isOpen) {
+                    this.value.set(value);
+                }
+            }
+        };
+        this.isItemOpen = (value) => {
+            if (this.type() == 'multiple') {
+                return !!this.value()?.includes(value);
+            }
+            return this.value() === value;
+        };
+        effect(() => {
+            if (this.defaultValue() !== undefined) {
+                this.value.set(this.defaultValue());
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.4", type: RdxAccordionRootDirective, isStandalone: true, selector: "[rdxAccordionRoot]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
-            { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },
-            { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => RdxAccordionItemDirective), descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAccordionRootDirective, isStandalone: true, selector: "[rdxAccordionRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()" } }, providers: [provideAccordionRootContext(rootContext)], exportAs: ["rdxAccordionRoot"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionRoot]',
-                    standalone: true,
-                    providers: [
-                        { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },
-                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-                    ],
+                    exportAs: 'rdxAccordionRoot',
+                    providers: [provideAccordionRootContext(rootContext)],
                     host: {
-                        '[attr.data-orientation]': 'orientation',
-                        '(keydown)': 'handleKeydown($event)'
+                        '[attr.data-orientation]': 'orientation()'
                     }
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], orientation: [{
-                type: Input
-            }], items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => RdxAccordionItemDirective), { descendants: true }]
-            }], defaultValue: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], collapsible: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], onValueChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
-class RdxAccordionTriggerDirective {
-    constructor() {
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.accordionRoot = inject(RdxAccordionRootDirective);
-        this.item = inject(RdxAccordionItemDirective);
-    }
-    /**
-     * Fires when trigger clicked
-     */
-    onClick() {
-        if (!this.accordionRoot.collapsible && this.item.expanded)
-            return;
-        this.item.toggle();
-        this.accordionRoot.setActiveItem(this.item);
-    }
-    focus() {
-        this.nativeElement.focus();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.disabled": "item.disabled ? \"\" : null", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxAccordionTrigger]',
-                    standalone: true,
-                    host: {
-                        '[attr.role]': '"button"',
-                        '[attr.aria-expanded]': 'item.expanded',
-                        '[attr.data-state]': 'item.dataState',
-                        '[attr.data-disabled]': 'item.disabled',
-                        '[attr.disabled]': 'item.disabled ? "" : null',
-                        '[attr.data-orientation]': 'item.orientation',
-                        '(click)': 'onClick()'
-                    }
-                }]
-        }] });
-
-let nextId = 0;
+const [injectAccordionItemContext, provideAccordionItemContext] = createContext('AccordionItemContext');
+const itemContext = () => {
+    const instance = inject(RdxAccordionItemDirective);
+    return {
+        open: instance.open,
+        dataState: instance.dataState,
+        disabled: instance.disabled,
+        dataDisabled: instance.isDisabled,
+        triggerId: '',
+        currentElement: instance.elementRef,
+        value: computed(() => instance.value())
+    };
+};
 /**
  * @group Components
  */
 class RdxAccordionItemDirective {
-    get dataState() {
-        return this.expanded ? 'open' : 'closed';
-    }
-    get orientation() {
-        return this.accordion.orientation;
-    }
-    /**
-     * @defaultValue false
-     * @group Props
-     */
-    set expanded(expanded) {
-        // Only emit events and update the internal value if the value changes.
-        if (this._expanded !== expanded) {
-            this._expanded = expanded;
-            this.expandedChange.emit(expanded);
-            if (expanded) {
-                this.opened.emit();
-                /**
-                 * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
-                 * the name value is the id of the accordion.
-                 */
-                const accordionId = this.accordion ? this.accordion.id : this.value;
-                this.expansionDispatcher.notify(this.value, accordionId);
-            }
-            else {
-                this.closed.emit();
-            }
-            // Ensures that the animation will run when the value is set outside of an `@Input`.
-            // This includes cases like the open, close and toggle methods.
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    get expanded() {
-        return this._expanded;
-    }
-    /**
-     * Accordion value.
-     *
-     * @group Props
-     */
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value || this.id;
-    }
-    /**
-     * Whether the AccordionItem is disabled.
-     *
-     * @defaultValue false
-     * @group Props
-     */
-    set disabled(value) {
-        this._disabled = value;
-    }
-    get disabled() {
-        return this.accordion.disabled ?? this._disabled;
-    }
     constructor() {
-        this.accordion = inject(RdxAccordionRootToken, { skipSelf: true });
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.expansionDispatcher = inject(UniqueSelectionDispatcher);
-        /**
-         * The unique AccordionItem id.
-         * @ignore
-         */
-        this.id = `rdx-accordion-item-${nextId++}`;
-        this._expanded = false;
-        this._disabled = false;
-        /**
-         * Event emitted every time the AccordionItem is closed.
-         */
-        this.closed = new EventEmitter();
-        /** Event emitted every time the AccordionItem is opened. */
-        this.opened = new EventEmitter();
-        /**
-         * Event emitted when the AccordionItem is destroyed.
-         * @ignore
-         */
-        this.destroyed = new EventEmitter();
-        /**
-         * Emits whenever the expanded state of the accordion changes.
-         * Primarily used to facilitate two-way binding.
-         * @group Emits
-         */
-        this.expandedChange = new EventEmitter();
-        /** Subscription to openAll/closeAll events. */
-        this.openCloseAllSubscription = Subscription.EMPTY;
-        this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id, accordionId) => {
-            if (this.accordion.isMultiple) {
-                if (this.accordion.id === accordionId && id.includes(this.value)) {
-                    this.expanded = true;
-                }
+        this.elementRef = inject(ElementRef);
+        this.collapsibleContext = injectCollapsibleRootContext();
+        this.rootContext = injectAccordionRootContext();
+        this.value = input();
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.isDisabled = computed(() => {
+            return this.rootContext.disabled() || this.disabled();
+        });
+        this.open = computed(() => this.rootContext.isItemOpen(this.value()));
+        this.dataState = computed(() => (this.open() ? 'open' : 'closed'));
+        effect(() => {
+            this.rootContext.changeModelValue(this.value(), this.collapsibleContext.open());
+        });
+        let onMount = false;
+        effect(() => {
+            if (!onMount && this.open() && !this.collapsibleContext.open()) {
+                this.collapsibleContext.toggle();
+                onMount = true;
             }
-            else {
-                this.expanded = this.accordion.id === accordionId && id.includes(this.value);
+            if (!this.open() && this.collapsibleContext.open()) {
+                this.collapsibleContext.toggle();
             }
         });
-        // When an accordion item is hosted in an accordion, subscribe to open/close events.
-        if (this.accordion) {
-            this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
-        }
-    }
-    /** Emits an event for the accordion item being destroyed. */
-    ngOnDestroy() {
-        this.opened.complete();
-        this.closed.complete();
-        this.destroyed.emit();
-        this.destroyed.complete();
-        this.removeUniqueSelectionListener();
-        this.openCloseAllSubscription.unsubscribe();
-    }
-    focus() {
-        this.trigger.focus();
-    }
-    /** Toggles the expanded state of the accordion item. */
-    toggle() {
-        if (!this.disabled) {
-            this.content.onToggle();
-            this.expanded = !this.expanded;
-        }
     }
-    /** Sets the expanded state of the accordion item to false. */
-    close() {
-        if (!this.disabled) {
-            this.expanded = false;
-        }
-    }
-    /** Sets the expanded state of the accordion item to true. */
-    open() {
-        if (!this.disabled) {
-            this.expanded = true;
-        }
-    }
-    subscribeToOpenCloseAllActions() {
-        return this.accordion.openCloseAllActions.subscribe((expanded) => {
-            // Only change expanded state if item is enabled
-            if (!this.disabled) {
-                this.expanded = expanded;
-            }
+    handleArrowKey(event) {
+        const target = event.target;
+        const allCollectionItems = Array.from(this.rootContext.elementRef.nativeElement?.querySelectorAll('[data-rdx-collection-item]') ?? []);
+        const collectionItemIndex = allCollectionItems.findIndex((item) => item === target);
+        if (collectionItemIndex === -1)
+            return;
+        useArrowNavigation(event, this.elementRef.nativeElement.querySelector('[data-rdx-collection-item]'), this.rootContext.elementRef.nativeElement, {
+            arrowKeyOptions: this.rootContext.orientation(),
+            dir: this.rootContext.direction(),
+            focus: true
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.4", type: RdxAccordionItemDirective, isStandalone: true, selector: "[rdxAccordionItem]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" } }, providers: [
-            { provide: RdxAccordionRootToken, useValue: undefined }
-        ], queries: [{ propertyName: "trigger", first: true, predicate: RdxAccordionTriggerDirective, descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => RdxAccordionContentDirective), descendants: true }], exportAs: ["rdxAccordionItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAccordionItemDirective, isStandalone: true, selector: "[rdxAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.arrowDown": "handleArrowKey($event)", "keydown.arrowUp": "handleArrowKey($event)", "keydown.arrowLeft": "handleArrowKey($event)", "keydown.arrowRight": "handleArrowKey($event)", "keydown.home": "handleArrowKey($event)", "keydown.end": "handleArrowKey($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-state": "dataState()" } }, providers: [provideAccordionItemContext(itemContext)], exportAs: ["rdxAccordionItem"], hostDirectives: [{ directive: i1.RdxCollapsibleRootDirective, inputs: ["disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionItem]',
-                    standalone: true,
                     exportAs: 'rdxAccordionItem',
+                    providers: [provideAccordionItemContext(itemContext)],
+                    hostDirectives: [
+                        {
+                            directive: RdxCollapsibleRootDirective,
+                            inputs: ['disabled: disabled']
+                        }
+                    ],
                     host: {
-                        '[attr.data-state]': 'dataState',
-                        '[attr.data-disabled]': 'disabled',
-                        '[attr.data-orientation]': 'orientation'
-                    },
-                    providers: [
-                        { provide: RdxAccordionRootToken, useValue: undefined }
-                    ]
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-state]': 'dataState()',
+                        '(keydown.arrowDown)': 'handleArrowKey($event)',
+                        '(keydown.arrowUp)': 'handleArrowKey($event)',
+                        '(keydown.arrowLeft)': 'handleArrowKey($event)',
+                        '(keydown.arrowRight)': 'handleArrowKey($event)',
+                        '(keydown.home)': 'handleArrowKey($event)',
+                        '(keydown.end)': 'handleArrowKey($event)'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{
-                type: ContentChild,
-                args: [RdxAccordionTriggerDirective, { descendants: true }]
-            }], content: [{
-                type: ContentChild,
-                args: [forwardRef(() => RdxAccordionContentDirective), { descendants: true }]
-            }], expanded: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closed: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], expandedChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 class RdxAccordionContentDirective {
     constructor() {
-        this.item = inject(RdxAccordionItemDirective);
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.hidden = false;
-    }
-    onAnimationEnd() {
-        this.hidden = !this.item.expanded;
-        const { height, width } = this.nativeElement.getBoundingClientRect();
-        this.nativeElement.style.setProperty('--radix-collapsible-content-height', `${height}px`);
-        this.nativeElement.style.setProperty('--radix-collapsible-content-width', `${width}px`);
-        this.nativeElement.style.setProperty('--radix-accordion-content-height', 'var(--radix-collapsible-content-height)');
-        this.nativeElement.style.setProperty('--radix-accordion-content-width', 'var(--radix-collapsible-content-width)');
-    }
-    onToggle() {
-        if (!this.item.expanded) {
-            this.hidden = false;
-        }
+        this.rootContext = injectAccordionRootContext();
+        this.itemContext = injectAccordionItemContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionContentDirective, isStandalone: true, selector: "[rdxAccordionContent]", host: { listeners: { "animationend": "onAnimationEnd()" }, properties: { "attr.role": "\"region\"", "style.display": "hidden ? \"none\" : \"\"", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["rdxAccordionContent"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionContentDirective, isStandalone: true, selector: "[rdxAccordionContent]", host: { attributes: { "role": "region" }, properties: { "attr.aria-labelledby": "itemContext.triggerId", "attr.data-state": "itemContext.dataState()", "attr.data-disabled": "itemContext.dataDisabled()", "attr.data-orientation": "rootContext.orientation()", "style": "{\n            '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',\n            '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',\n          }" } }, hostDirectives: [{ directive: i1.RdxCollapsibleContentDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionContent]',
-                    standalone: true,
-                    exportAs: 'rdxAccordionContent',
+                    hostDirectives: [RdxCollapsibleContentDirective],
                     host: {
-                        '[attr.role]': '"region"',
-                        '[style.display]': 'hidden ? "none" : ""',
-                        '[attr.data-state]': 'item.dataState',
-                        '[attr.data-disabled]': 'item.disabled',
-                        '[attr.data-orientation]': 'item.orientation',
-                        '(animationend)': 'onAnimationEnd()'
+                        role: 'region',
+                        '[attr.aria-labelledby]': 'itemContext.triggerId',
+                        '[attr.data-state]': 'itemContext.dataState()',
+                        '[attr.data-disabled]': 'itemContext.dataDisabled()',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[style]': `{
+            '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
+            '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
+          }`
                     }
                 }]
         }] });
 
 class RdxAccordionHeaderDirective {
     constructor() {
-        this.item = inject(RdxAccordionItemDirective);
+        this.rootContext = injectAccordionRootContext();
+        this.itemContext = injectAccordionItemContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionHeaderDirective, isStandalone: true, selector: "[rdxAccordionHeader]", host: { properties: { "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionHeaderDirective, isStandalone: true, selector: "[rdxAccordionHeader]", host: { properties: { "attr.data-state": "itemContext.dataState()", "attr.data-disabled": "itemContext.dataDisabled()", "attr.data-orientation": "rootContext.orientation()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionHeader]',
-                    standalone: true,
                     host: {
-                        '[attr.data-state]': 'item.dataState',
-                        '[attr.data-disabled]': 'item.disabled',
-                        '[attr.data-orientation]': 'item.orientation'
+                        '[attr.data-state]': 'itemContext.dataState()',
+                        '[attr.data-disabled]': 'itemContext.dataDisabled()',
+                        '[attr.data-orientation]': 'rootContext.orientation()'
                     }
                 }]
         }] });
 
+class RdxAccordionTriggerDirective {
+    constructor() {
+        this.rootContext = injectAccordionRootContext();
+        this.itemContext = injectAccordionItemContext();
+        this.itemContext.triggerId = inject(_IdGenerator).getId('rdx-accordion-trigger-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { properties: { "id": "itemContext.triggerId", "attr.data-rdx-collection-item": "\"\"", "attr.role": "\"button\"", "attr.aria-disabled": "itemContext.disabled() || undefined", "attr.data-orientation": "rootContext.orientation()" } }, hostDirectives: [{ directive: i1.RdxCollapsibleTriggerDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAccordionTrigger]',
+                    hostDirectives: [RdxCollapsibleTriggerDirective],
+                    host: {
+                        '[id]': 'itemContext.triggerId',
+                        '[attr.data-rdx-collection-item]': '""',
+                        '[attr.role]': '"button"',
+                        '[attr.aria-disabled]': 'itemContext.disabled() || undefined',
+                        '[attr.data-orientation]': 'rootContext.orientation()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
 const _imports = [
     RdxAccordionContentDirective,
     RdxAccordionHeaderDirective,
     RdxAccordionItemDirective,
     RdxAccordionRootDirective,
-    RdxAccordionTriggerDirective
+    RdxAccordionTriggerDirective,
+    RdxAccordionContentPresenceDirective
 ];
 class RdxAccordionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -497,11 +283,13 @@ class RdxAccordionModule {
             RdxAccordionHeaderDirective,
             RdxAccordionItemDirective,
             RdxAccordionRootDirective,
-            RdxAccordionTriggerDirective], exports: [RdxAccordionContentDirective,
+            RdxAccordionTriggerDirective,
+            RdxAccordionContentPresenceDirective], exports: [RdxAccordionContentDirective,
             RdxAccordionHeaderDirective,
             RdxAccordionItemDirective,
             RdxAccordionRootDirective,
-            RdxAccordionTriggerDirective] }); }
+            RdxAccordionTriggerDirective,
+            RdxAccordionContentPresenceDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAccordionModule, decorators: [{
@@ -516,5 +304,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxAccordionContentDirective, RdxAccordionHeaderDirective, RdxAccordionItemDirective, RdxAccordionModule, RdxAccordionRootDirective, RdxAccordionRootToken, RdxAccordionTriggerDirective };
+export { RdxAccordionContentDirective, RdxAccordionContentPresenceDirective, RdxAccordionHeaderDirective, RdxAccordionItemDirective, RdxAccordionModule, RdxAccordionRootDirective, RdxAccordionTriggerDirective, injectAccordionItemContext, injectAccordionRootContext, provideAccordionItemContext, provideAccordionRootContext };
 //# sourceMappingURL=radix-ng-primitives-accordion.mjs.map