@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/collection/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/collection

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

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, input, booleanAttribute, model, output, computed, effect, NgModule } from '@angular/core';
+import { Directive, inject, ElementRef, input, booleanAttribute, model, output, computed, effect, signal, 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';
+import { RdxCollapsiblePanelPresenceDirective, injectCollapsibleRootContext, RdxCollapsibleRootDirective, RdxCollapsiblePanelDirective } from '@radix-ng/primitives/collapsible';
+import { createContext, injectId, useArrowNavigation } from '@radix-ng/primitives/core';
 
 class RdxAccordionContentPresenceDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionContentPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxAccordionContentPresenceDirective, isStandalone: true, selector: "ng-template[rdxAccordionContentPresence]", hostDirectives: [{ directive: i1.RdxCollapsibleContentPresenceDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionContentPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAccordionContentPresenceDirective, isStandalone: true, selector: "ng-template[rdxAccordionContentPresence]", hostDirectives: [{ directive: i1.RdxCollapsiblePanelPresenceDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionContentPresenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionContentPresenceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxAccordionContentPresence]',
-                    hostDirectives: [RdxCollapsibleContentPresenceDirective]
+                    hostDirectives: [RdxCollapsiblePanelPresenceDirective]
                 }]
         }] });
 
@@ -28,6 +27,8 @@ const rootContext = () => {
         elementRef: instance.elementRef,
         value: instance.value,
         isSingle: instance.isSingle,
+        loopFocus: instance.loopFocus,
+        keepMounted: instance.keepMounted,
         changeModelValue: instance.changeModelValue
     };
 };
@@ -37,38 +38,38 @@ const rootContext = () => {
 class RdxAccordionRootDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.id = input(inject(_IdGenerator).getId('rdx-accordion-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(injectId('rdx-accordion-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.
          *
          * @group Props
          */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
         /** Whether the Accordion is disabled.
          * @defaultValue false
          * @group Props
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The orientation of the accordion.
          *
          * @defaultValue 'vertical'
          * @group Props
          */
-        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * The default active value of the item(s).
          *
          * Use when you do not need to control the state of the item(s).
          * @group Props
          */
-        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /**
          * The controlled value of the item to expand.
          *
          * @group Props
          */
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * When type is "single", allows closing content when clicking trigger for an open item.
          * When type is "multiple", this prop has no effect.
@@ -76,22 +77,48 @@ class RdxAccordionRootDirective {
          * @defaultValue false
          * @group Props
          */
-        this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Determines whether a "single" or "multiple" items can be selected at a time.
          *
          * @defaultValue 'single'
          * @group Props
          */
-        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
-         * Event handler called when the expanded state of an item changes and type is "multiple".
+         * Allow multiple panels to be open simultaneously.
+         * Takes precedence over `type` when `true`.
+         *
+         * @defaultValue false
+         * @group Props
+         */
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether keyboard focus wraps from the last item to the first and vice versa.
+         *
+         * @defaultValue true
+         * @group Props
+         */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether to keep the content of collapsed items mounted in the DOM.
+         * When `true`, closed panels keep their element in the DOM instead of
+         * receiving a `hidden` attribute. Applies to the always-mounted
+         * `rdxAccordionContent`; the `rdxAccordionContentPresence` variant always
+         * unmounts.
+         *
+         * @defaultValue false
+         * @group Props
+         */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Event handler called when the expanded state of an item changes.
          * @group Emits
          */
         this.onValueChange = output();
-        this.isSingle = computed(() => this.type() === 'single', ...(ngDevMode ? [{ debugName: "isSingle" }] : []));
+        this.isSingle = computed(() => !this.multiple() && this.type() !== 'multiple', ...(ngDevMode ? [{ debugName: "isSingle" }] : /* istanbul ignore next */ []));
         this.changeModelValue = (newValue) => {
-            if (this.type() === 'single') {
+            if (this.isSingle()) {
                 this.value.set(this.isEqual(newValue, this.value()) ? undefined : newValue);
             }
             else {
@@ -114,6 +141,7 @@ class RdxAccordionRootDirective {
                 }
                 this.value.set(modelValueArray);
             }
+            this.onValueChange.emit(this.value());
         };
         effect(() => {
             if (this.defaultValue() !== undefined) {
@@ -127,20 +155,21 @@ class RdxAccordionRootDirective {
     isEqual(a, b) {
         return JSON.stringify(a) === JSON.stringify(b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideAccordionRootContext(rootContext)], exportAs: ["rdxAccordionRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionRoot]',
                     exportAs: 'rdxAccordionRoot',
                     providers: [provideAccordionRootContext(rootContext)],
                     host: {
-                        '[attr.data-orientation]': 'orientation()'
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 const [injectAccordionItemContext, provideAccordionItemContext] = createContext('AccordionItemContext');
 const itemContext = () => {
@@ -150,10 +179,11 @@ const itemContext = () => {
         dataState: instance.dataState,
         disabled: instance.disabled,
         dataDisabled: instance.isDisabled,
-        triggerId: '',
+        triggerId: instance.triggerId,
         currentElement: instance.elementRef,
         value: computed(() => instance.value()),
-        updateOpen: instance.updateOpen
+        updateOpen: instance.updateOpen,
+        index: instance.index
     };
 };
 /**
@@ -168,43 +198,74 @@ class RdxAccordionItemDirective {
          * A string value for the accordion item. All items within an accordion should use a unique value.
          * @group Props
          */
-        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * Whether or not an accordion item is disabled from user interaction.
          * When `true`, prevents the user from interacting with the item.
          * @group Props
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Event handler called when the panel open state changes.
+         * @group Emits
+         */
+        this.onOpenChange = output();
         this.isDisabled = computed(() => {
             return this.rootContext.disabled() || this.disabled();
-        }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.open = computed(() => this.rootContext.isSingle()
-            ? this.value() === this.rootContext.value()
-            : Array.isArray(this.rootContext.value()) && this.rootContext.value().includes(this.value()), ...(ngDevMode ? [{ debugName: "open" }] : []));
-        this.dataState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "dataState" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.open = computed(() => {
+            const rootValue = this.rootContext.value();
+            return this.rootContext.isSingle()
+                ? this.value() === rootValue
+                : Array.isArray(rootValue) && rootValue.includes(this.value());
+        }, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.dataState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        /** Set by the trigger; links the content's `aria-labelledby` to the trigger `id`. */
+        this.triggerId = signal('', ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.index = computed(() => {
+            const allItems = Array.from(this.rootContext.elementRef.nativeElement.querySelectorAll('[rdxAccordionItem]'));
+            return allItems.indexOf(this.elementRef.nativeElement);
+        }, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
         this.updateOpen = () => {
             this.collapsibleContext.open.set(this.open());
         };
+        // Collapsed accordion panels stay findable by the browser's in-page search; opening one
+        // via find-in-page expands the item. (The standalone Collapsible defaults to plain `hidden`.)
+        this.collapsibleContext.hiddenUntilFound.set(true);
         effect(() => {
             this.updateOpen();
         });
+        effect(() => {
+            this.collapsibleContext.keepMounted.set(this.rootContext.keepMounted());
+        });
+        let initialized = false;
+        effect(() => {
+            const isOpen = this.open();
+            if (!initialized) {
+                initialized = true;
+                return;
+            }
+            this.onOpenChange.emit(isOpen);
+        });
     }
     handleArrowKey(event) {
+        const keyEvent = 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, {
+        useArrowNavigation(keyEvent, this.elementRef.nativeElement.querySelector('[data-rdx-collection-item]'), this.rootContext.elementRef.nativeElement, {
             arrowKeyOptions: this.rootContext.orientation(),
             dir: this.rootContext.direction(),
+            loop: this.rootContext.loopFocus(),
             focus: true
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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", "open", "open"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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 } }, outputs: { onOpenChange: "onOpenChange" }, 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": "isDisabled() ? \"\" : undefined", "attr.data-state": "dataState()", "attr.data-index": "index()" } }, providers: [provideAccordionItemContext(itemContext)], exportAs: ["rdxAccordionItem"], hostDirectives: [{ directive: i1.RdxCollapsibleRootDirective, inputs: ["disabled", "disabled", "open", "open"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionItem]',
@@ -218,8 +279,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     ],
                     host: {
                         '[attr.data-orientation]': 'rootContext.orientation()',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
                         '[attr.data-state]': 'dataState()',
+                        '[attr.data-index]': 'index()',
                         '(keydown.arrowDown)': 'handleArrowKey($event)',
                         '(keydown.arrowUp)': 'handleArrowKey($event)',
                         '(keydown.arrowLeft)': 'handleArrowKey($event)',
@@ -228,30 +290,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(keydown.end)': 'handleArrowKey($event)'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }] } });
 
 class RdxAccordionContentDirective {
     constructor() {
         this.rootContext = injectAccordionRootContext();
         this.itemContext = injectAccordionItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-index": "itemContext.index()", "style": "{\n            '--radix-accordion-content-height': 'var(--collapsible-panel-height)',\n            '--radix-accordion-content-width': 'var(--collapsible-panel-width)',\n          }" } }, hostDirectives: [{ directive: i1.RdxCollapsiblePanelDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionContent]',
-                    hostDirectives: [RdxCollapsibleContentDirective],
+                    hostDirectives: [RdxCollapsiblePanelDirective],
                     host: {
                         role: 'region',
-                        '[attr.aria-labelledby]': 'itemContext.triggerId',
+                        '[attr.aria-labelledby]': 'itemContext.triggerId()',
                         '[attr.data-state]': 'itemContext.dataState()',
-                        '[attr.data-disabled]': 'itemContext.dataDisabled()',
+                        '[attr.data-disabled]': 'itemContext.dataDisabled() ? "" : undefined',
                         '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-index]': 'itemContext.index()',
                         '[style]': `{
-            '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
-            '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
+            '--radix-accordion-content-height': 'var(--collapsible-panel-height)',
+            '--radix-accordion-content-width': 'var(--collapsible-panel-width)',
           }`
                     }
                 }]
@@ -262,17 +325,18 @@ class RdxAccordionHeaderDirective {
         this.rootContext = injectAccordionRootContext();
         this.itemContext = injectAccordionItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAccordionHeaderDirective, isStandalone: true, selector: "[rdxAccordionHeader]", host: { properties: { "attr.data-state": "itemContext.dataState()", "attr.data-disabled": "itemContext.dataDisabled() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-index": "itemContext.index()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionHeader]',
                     host: {
                         '[attr.data-state]': 'itemContext.dataState()',
-                        '[attr.data-disabled]': 'itemContext.dataDisabled()',
-                        '[attr.data-orientation]': 'rootContext.orientation()'
+                        '[attr.data-disabled]': 'itemContext.dataDisabled() ? "" : undefined',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-index]': 'itemContext.index()'
                     }
                 }]
         }] });
@@ -281,31 +345,35 @@ class RdxAccordionTriggerDirective {
     constructor() {
         this.rootContext = injectAccordionRootContext();
         this.itemContext = injectAccordionItemContext();
-        this.itemContext.triggerId = inject(_IdGenerator).getId('rdx-accordion-trigger-');
+        this.itemContext.triggerId.set(injectId('rdx-accordion-trigger-'));
     }
     changeItem() {
-        const triggerDisabled = this.rootContext.isSingle() && this.itemContext.open() && !this.rootContext.collapsible();
-        if (this.itemContext.disabled() || triggerDisabled) {
-            this.itemContext.updateOpen();
+        // In single mode an open item stays open (unless `collapsible`), so a click on it is a no-op.
+        const lockedOpen = this.rootContext.isSingle() && this.itemContext.open() && !this.rootContext.collapsible();
+        // `dataDisabled` is the effective disabled state (accordion-root OR item level).
+        if (this.itemContext.dataDisabled() || lockedOpen) {
             return;
         }
         this.rootContext.changeModelValue(this.itemContext.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { listeners: { "click": "changeItem()" }, properties: { "id": "itemContext.triggerId", "attr.data-rdx-collection-item": "\"\"", "attr.role": "\"button\"", "attr.aria-disabled": "itemContext.open() && !rootContext.collapsible() ? \"true\" : undefined", "attr.data-orientation": "rootContext.orientation()", "disabled": "itemContext.disabled()" } }, hostDirectives: [{ directive: i1.RdxCollapsibleTriggerDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { listeners: { "click": "changeItem()" }, properties: { "id": "itemContext.triggerId()", "attr.data-rdx-collection-item": "\"\"", "attr.role": "\"button\"", "attr.aria-expanded": "itemContext.open()", "attr.aria-disabled": "itemContext.open() && !rootContext.collapsible() ? \"true\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-state": "itemContext.dataState()", "attr.disabled": "itemContext.dataDisabled() ? \"\" : undefined", "attr.data-panel-open": "itemContext.open() ? \"\" : undefined", "attr.data-index": "itemContext.index()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAccordionTrigger]',
-                    hostDirectives: [RdxCollapsibleTriggerDirective],
                     host: {
-                        '[id]': 'itemContext.triggerId',
+                        '[id]': 'itemContext.triggerId()',
                         '[attr.data-rdx-collection-item]': '""',
                         '[attr.role]': '"button"',
+                        '[attr.aria-expanded]': 'itemContext.open()',
                         '[attr.aria-disabled]': 'itemContext.open() && !rootContext.collapsible() ? "true" : undefined',
                         '[attr.data-orientation]': 'rootContext.orientation()',
-                        '[disabled]': 'itemContext.disabled()',
+                        '[attr.data-state]': 'itemContext.dataState()',
+                        '[attr.disabled]': 'itemContext.dataDisabled() ? "" : undefined',
+                        '[attr.data-panel-open]': 'itemContext.open() ? "" : undefined',
+                        '[attr.data-index]': 'itemContext.index()',
                         '(click)': 'changeItem()'
                     }
                 }]
@@ -320,8 +388,8 @@ const _imports = [
     RdxAccordionContentPresenceDirective
 ];
 class RdxAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionModule, imports: [RdxAccordionContentDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionModule, imports: [RdxAccordionContentDirective,
             RdxAccordionHeaderDirective,
             RdxAccordionItemDirective,
             RdxAccordionRootDirective,
@@ -332,9 +400,9 @@ class RdxAccordionModule {
             RdxAccordionRootDirective,
             RdxAccordionTriggerDirective,
             RdxAccordionContentPresenceDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],