@angular/aria 22.0.0-next.4 → 22.0.0-next.6

package/fesm2022/accordion-testing.mjs

@@ -0,0 +1,61 @@
+import { ComponentHarness, HarnessPredicate, ContentContainerComponentHarness } from '@angular/cdk/testing';
+
+var AccordionSection;
+(function (AccordionSection) {
+  AccordionSection["TRIGGER"] = "[ngAccordionTrigger]";
+  AccordionSection["PANEL"] = "[ngAccordionPanel]";
+})(AccordionSection || (AccordionSection = {}));
+class AccordionHarness extends ContentContainerComponentHarness {
+  static hostSelector = '[ngAccordionTrigger]';
+  static with(options = {}) {
+    return new HarnessPredicate(AccordionHarness, options).addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title)).addOption('expanded', options.expanded, async (harness, expanded) => (await harness.isExpanded()) === expanded).addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+  }
+  async getRootHarnessLoader() {
+    const panelId = await (await this.host()).getAttribute('aria-controls');
+    const documentRoot = await this.documentRootLocatorFactory().rootHarnessLoader();
+    return documentRoot.getChildLoader(`[ngAccordionPanel][id="${panelId}"]`);
+  }
+  async isExpanded() {
+    return (await (await this.host()).getAttribute('aria-expanded')) === 'true';
+  }
+  async isDisabled() {
+    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
+  }
+  async getTitle() {
+    return (await this.host()).text();
+  }
+  async toggle() {
+    await (await this.host()).click();
+  }
+  async expand() {
+    if (!(await this.isExpanded())) {
+      await this.toggle();
+    }
+  }
+  async collapse() {
+    if (await this.isExpanded()) {
+      await this.toggle();
+    }
+  }
+  async focus() {
+    await (await this.host()).focus();
+  }
+  async blur() {
+    await (await this.host()).blur();
+  }
+  async isFocused() {
+    return (await this.host()).isFocused();
+  }
+}
+class AccordionGroupHarness extends ComponentHarness {
+  static hostSelector = '[ngAccordionGroup]';
+  static with(options = {}) {
+    return new HarnessPredicate(AccordionGroupHarness, options);
+  }
+  async getAccordions(filters = {}) {
+    return this.locatorForAll(AccordionHarness.with(filters))();
+  }
+}
+
+export { AccordionGroupHarness, AccordionHarness, AccordionSection };
+//# sourceMappingURL=accordion-testing.mjs.map

package/fesm2022/accordion-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-testing.mjs","sources":["../../../../../k8-fastbuild-ST-fdfa778d11ba/bin/src/aria/accordion/testing/accordion-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  ComponentHarness,\n  ContentContainerComponentHarness,\n  HarnessPredicate,\n} from '@angular/cdk/testing';\nimport {AccordionHarnessFilters, AccordionGroupHarnessFilters} from './accordion-harness-filters';\n\n/** Selectors for the sections that may contain user content. */\nexport enum AccordionSection {\n  TRIGGER = '[ngAccordionTrigger]',\n  PANEL = '[ngAccordionPanel]',\n}\n\n/** Harness for interacting with a standard ngAccordion item in tests. */\nexport class AccordionHarness extends ContentContainerComponentHarness<AccordionSection> {\n  static hostSelector = '[ngAccordionTrigger]';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for an accordion\n   * with specific attributes.\n   */\n  static with(options: AccordionHarnessFilters = {}): HarnessPredicate<AccordionHarness> {\n    return new HarnessPredicate(AccordionHarness, options)\n      .addOption('title', options.title, (harness, title) =>\n        HarnessPredicate.stringMatches(harness.getTitle(), title),\n      )\n      .addOption(\n        'expanded',\n        options.expanded,\n        async (harness, expanded) => (await harness.isExpanded()) === expanded,\n      )\n      .addOption(\n        'disabled',\n        options.disabled,\n        async (harness, disabled) => (await harness.isDisabled()) === disabled,\n      );\n  }\n\n  /** Overrides the internal loader to automatically resolve queries inside the associated panel. */\n  protected override async getRootHarnessLoader() {\n    const panelId = await (await this.host()).getAttribute('aria-controls');\n    const documentRoot = await this.documentRootLocatorFactory().rootHarnessLoader();\n    return documentRoot.getChildLoader(`[ngAccordionPanel][id=\"${panelId}\"]`);\n  }\n\n  /** Whether the accordion is expanded. */\n  async isExpanded(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-expanded')) === 'true';\n  }\n\n  /** Whether the accordion is disabled. */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Gets the title text of the accordion. */\n  async getTitle(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** Toggles the expanded state of the accordion by clicking on the trigger. */\n  async toggle(): Promise<void> {\n    await (await this.host()).click();\n  }\n\n  /** Expands the accordion if collapsed. */\n  async expand(): Promise<void> {\n    if (!(await this.isExpanded())) {\n      await this.toggle();\n    }\n  }\n\n  /** Collapses the accordion if expanded. */\n  async collapse(): Promise<void> {\n    if (await this.isExpanded()) {\n      await this.toggle();\n    }\n  }\n\n  /** Focuses the accordion trigger. */\n  async focus(): Promise<void> {\n    await (await this.host()).focus();\n  }\n\n  /** Blurs the accordion trigger. */\n  async blur(): Promise<void> {\n    await (await this.host()).blur();\n  }\n\n  /** Whether the accordion trigger is focused. */\n  async isFocused(): Promise<boolean> {\n    return (await this.host()).isFocused();\n  }\n}\n\n/** Harness for interacting with an `ngAccordionGroup` in tests. */\nexport class AccordionGroupHarness extends ComponentHarness {\n  static hostSelector = '[ngAccordionGroup]';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for an accordion group with specific attributes.\n   */\n  static with(options: AccordionGroupHarnessFilters = {}): HarnessPredicate<AccordionGroupHarness> {\n    return new HarnessPredicate(AccordionGroupHarness, options);\n  }\n\n  /** Gets all accordions within this group. */\n  async getAccordions(filters: AccordionHarnessFilters = {}): Promise<AccordionHarness[]> {\n    return this.locatorForAll(AccordionHarness.with(filters))();\n  }\n}\n"],"names":["AccordionSection","AccordionHarness","ContentContainerComponentHarness","hostSelector","with","options","HarnessPredicate","addOption","title","harness","stringMatches","getTitle","expanded","isExpanded","disabled","isDisabled","getRootHarnessLoader","panelId","host","getAttribute","documentRoot","documentRootLocatorFactory","rootHarnessLoader","getChildLoader","text","toggle","click","expand","collapse","focus","blur","isFocused","AccordionGroupHarness","ComponentHarness","getAccordions","filters","locatorForAll"],"mappings":";;IAgBYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,sBAAgC;AAChCA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,oBAA4B;AAC9B,CAAC,EAHWA,gBAAgB,KAAhBA,gBAAgB,GAAA,EAAA,CAAA,CAAA;AAMtB,MAAOC,gBAAiB,SAAQC,gCAAkD,CAAA;EACtF,OAAOC,YAAY,GAAG,sBAAsB;AAM5C,EAAA,OAAOC,IAAIA,CAACC,OAAA,GAAmC,EAAE,EAAA;AAC/C,IAAA,OAAO,IAAIC,gBAAgB,CAACL,gBAAgB,EAAEI,OAAO,CAAA,CAClDE,SAAS,CAAC,OAAO,EAAEF,OAAO,CAACG,KAAK,EAAE,CAACC,OAAO,EAAED,KAAK,KAChDF,gBAAgB,CAACI,aAAa,CAACD,OAAO,CAACE,QAAQ,EAAE,EAAEH,KAAK,CAAC,CAAA,CAE1DD,SAAS,CACR,UAAU,EACVF,OAAO,CAACO,QAAQ,EAChB,OAAOH,OAAO,EAAEG,QAAQ,KAAK,CAAC,MAAMH,OAAO,CAACI,UAAU,EAAE,MAAMD,QAAQ,CAAA,CAEvEL,SAAS,CACR,UAAU,EACVF,OAAO,CAACS,QAAQ,EAChB,OAAOL,OAAO,EAAEK,QAAQ,KAAK,CAAC,MAAML,OAAO,CAACM,UAAU,EAAE,MAAMD,QAAQ,CACvE;AACL,EAAA;EAGmB,MAAME,oBAAoBA,GAAA;AAC3C,IAAA,MAAMC,OAAO,GAAG,MAAM,CAAC,MAAM,IAAI,CAACC,IAAI,EAAE,EAAEC,YAAY,CAAC,eAAe,CAAC;IACvE,MAAMC,YAAY,GAAG,MAAM,IAAI,CAACC,0BAA0B,EAAE,CAACC,iBAAiB,EAAE;AAChF,IAAA,OAAOF,YAAY,CAACG,cAAc,CAAC,CAAA,uBAAA,EAA0BN,OAAO,IAAI,CAAC;AAC3E,EAAA;EAGA,MAAMJ,UAAUA,GAAA;AACd,IAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAACK,IAAI,EAAE,EAAEC,YAAY,CAAC,eAAe,CAAC,MAAM,MAAM;AAC7E,EAAA;EAGA,MAAMJ,UAAUA,GAAA;AACd,IAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAACG,IAAI,EAAE,EAAEC,YAAY,CAAC,eAAe,CAAC,MAAM,MAAM;AAC7E,EAAA;EAGA,MAAMR,QAAQA,GAAA;IACZ,OAAO,CAAC,MAAM,IAAI,CAACO,IAAI,EAAE,EAAEM,IAAI,EAAE;AACnC,EAAA;EAGA,MAAMC,MAAMA,GAAA;IACV,MAAM,CAAC,MAAM,IAAI,CAACP,IAAI,EAAE,EAAEQ,KAAK,EAAE;AACnC,EAAA;EAGA,MAAMC,MAAMA,GAAA;IACV,IAAI,EAAE,MAAM,IAAI,CAACd,UAAU,EAAE,CAAC,EAAE;AAC9B,MAAA,MAAM,IAAI,CAACY,MAAM,EAAE;AACrB,IAAA;AACF,EAAA;EAGA,MAAMG,QAAQA,GAAA;AACZ,IAAA,IAAI,MAAM,IAAI,CAACf,UAAU,EAAE,EAAE;AAC3B,MAAA,MAAM,IAAI,CAACY,MAAM,EAAE;AACrB,IAAA;AACF,EAAA;EAGA,MAAMI,KAAKA,GAAA;IACT,MAAM,CAAC,MAAM,IAAI,CAACX,IAAI,EAAE,EAAEW,KAAK,EAAE;AACnC,EAAA;EAGA,MAAMC,IAAIA,GAAA;IACR,MAAM,CAAC,MAAM,IAAI,CAACZ,IAAI,EAAE,EAAEY,IAAI,EAAE;AAClC,EAAA;EAGA,MAAMC,SAASA,GAAA;IACb,OAAO,CAAC,MAAM,IAAI,CAACb,IAAI,EAAE,EAAEa,SAAS,EAAE;AACxC,EAAA;;AAII,MAAOC,qBAAsB,SAAQC,gBAAgB,CAAA;EACzD,OAAO9B,YAAY,GAAG,oBAAoB;AAK1C,EAAA,OAAOC,IAAIA,CAACC,OAAA,GAAwC,EAAE,EAAA;AACpD,IAAA,OAAO,IAAIC,gBAAgB,CAAC0B,qBAAqB,EAAE3B,OAAO,CAAC;AAC7D,EAAA;AAGA,EAAA,MAAM6B,aAAaA,CAACC,OAAA,GAAmC,EAAE,EAAA;AACvD,IAAA,OAAO,IAAI,CAACC,aAAa,CAACnC,gBAAgB,CAACG,IAAI,CAAC+B,OAAO,CAAC,CAAC,EAAE;AAC7D,EAAA;;;;;"}

package/fesm2022/accordion.mjs

@@ -1,16 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, afterRenderEffect, Directive, InjectionToken, ElementRef, booleanAttribute, model, contentChildren, signal } from '@angular/core';
+import { inject, ElementRef, input, computed, afterRenderEffect, Directive, InjectionToken, signal, booleanAttribute, model } from '@angular/core';
 import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.mjs';
 import { Directionality } from '@angular/cdk/bidi';
+import { sortDirectives } from './_element-chunk.mjs';
+import { AccordionGroupPattern, AccordionTriggerPattern } from './_accordion-chunk.mjs';
 import { _IdGenerator } from '@angular/cdk/a11y';
-import { AccordionTriggerPattern, AccordionGroupPattern } from './_accordion-chunk.mjs';
 import './_expansion-chunk.mjs';
 import './_list-navigation-chunk.mjs';
 import './_signal-like-chunk.mjs';
 import '@angular/core/primitives/signals';
-import './_pointer-event-manager-chunk.mjs';
+import './_click-event-manager-chunk.mjs';
 
 class AccordionPanel {
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
   _deferredContentAware = inject(DeferredContentAware);
   id = input(inject(_IdGenerator).getId('ng-accordion-panel-', true), ...(ngDevMode ? [{
     debugName: "id"
@@ -111,112 +114,126 @@ i0.ɵɵngDeclareClassMetadata({
 
 const ACCORDION_GROUP = new InjectionToken('ACCORDION_GROUP');
 
-class AccordionTrigger {
+class AccordionGroup {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _accordionGroup = inject(ACCORDION_GROUP);
-  panel = input.required(...(ngDevMode ? [{
-    debugName: "panel"
+  _triggers = signal(new Set(), ...(ngDevMode ? [{
+    debugName: "_triggers"
   }] : []));
-  id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true), ...(ngDevMode ? [{
-    debugName: "id"
+  _sortedTriggers = computed(() => {
+    const triggers = [...this._triggers()];
+    const sortFn = triggers[0]?.index() === undefined ? sortDirectives : (a, b) => a.index() - b.index();
+    return triggers.sort(sortFn);
+  }, ...(ngDevMode ? [{
+    debugName: "_sortedTriggers"
   }] : []));
-  panelId = computed(() => this.panel().id(), ...(ngDevMode ? [{
-    debugName: "panelId"
+  _triggerPatterns = computed(() => {
+    return this._sortedTriggers().map(t => t._pattern);
+  }, ...(ngDevMode ? [{
+    debugName: "_triggerPatterns"
   }] : []));
+  textDirection = inject(Directionality).valueSignal;
   disabled = input(false, {
     ...(ngDevMode ? {
       debugName: "disabled"
     } : {}),
     transform: booleanAttribute
   });
-  expanded = model(false, ...(ngDevMode ? [{
-    debugName: "expanded"
-  }] : []));
-  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
-    debugName: "active"
-  }] : []));
-  _pattern;
-  ngOnInit() {
-    this._pattern = new AccordionTriggerPattern({
-      ...this,
-      element: () => this.element,
-      accordionGroup: () => this._accordionGroup._pattern,
-      accordionPanelId: this.panelId
-    });
-    this.panel()._pattern = this._pattern;
+  multiExpandable = input(true, {
+    ...(ngDevMode ? {
+      debugName: "multiExpandable"
+    } : {}),
+    transform: booleanAttribute
+  });
+  softDisabled = input(true, {
+    ...(ngDevMode ? {
+      debugName: "softDisabled"
+    } : {}),
+    transform: booleanAttribute
+  });
+  wrap = input(false, {
+    ...(ngDevMode ? {
+      debugName: "wrap"
+    } : {}),
+    transform: booleanAttribute
+  });
+  _pattern = new AccordionGroupPattern({
+    ...this,
+    element: () => this.element,
+    activeItem: signal(undefined),
+    items: this._triggerPatterns,
+    orientation: () => 'vertical'
+  });
+  expandAll() {
+    this._pattern.expandAll();
   }
-  expand() {
-    this._pattern.open();
+  collapseAll() {
+    this._pattern.collapseAll();
   }
-  collapse() {
-    this._pattern.close();
+  _registerTrigger(trigger) {
+    this._triggers().add(trigger);
+    this._triggers.set(new Set(this._triggers()));
   }
-  toggle() {
-    this._pattern.toggle();
+  _unregisterTrigger(trigger) {
+    this._triggers().delete(trigger);
+    this._triggers.set(new Set(this._triggers()));
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "22.0.0-next.6",
     ngImport: i0,
-    type: AccordionTrigger,
+    type: AccordionGroup,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
     version: "22.0.0-next.6",
-    type: AccordionTrigger,
+    type: AccordionGroup,
     isStandalone: true,
-    selector: "[ngAccordionTrigger]",
+    selector: "[ngAccordionGroup]",
     inputs: {
-      panel: {
-        classPropertyName: "panel",
-        publicName: "panel",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
         isSignal: true,
-        isRequired: true,
+        isRequired: false,
         transformFunction: null
       },
-      id: {
-        classPropertyName: "id",
-        publicName: "id",
+      multiExpandable: {
+        classPropertyName: "multiExpandable",
+        publicName: "multiExpandable",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
+      softDisabled: {
+        classPropertyName: "softDisabled",
+        publicName: "softDisabled",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      expanded: {
-        classPropertyName: "expanded",
-        publicName: "expanded",
+      wrap: {
+        classPropertyName: "wrap",
+        publicName: "wrap",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
-    outputs: {
-      expanded: "expandedChange"
-    },
     host: {
-      attributes: {
-        "role": "button"
-      },
-      properties: {
-        "attr.data-active": "active()",
-        "id": "id()",
-        "attr.aria-expanded": "expanded()",
-        "attr.aria-controls": "_pattern.controls()",
-        "attr.aria-disabled": "_pattern.disabled()",
-        "attr.disabled": "_pattern.hardDisabled() ? true : null",
-        "attr.tabindex": "_pattern.tabIndex()"
+      listeners: {
+        "keydown": "_pattern.onKeydown($event)",
+        "click": "_pattern.onClick($event)",
+        "focusin": "_pattern.onFocus($event)"
       }
     },
-    exportAs: ["ngAccordionTrigger"],
+    providers: [{
+      provide: ACCORDION_GROUP,
+      useExisting: AccordionGroup
+    }],
+    exportAs: ["ngAccordionGroup"],
     ngImport: i0
   });
 }
@@ -224,175 +241,180 @@ i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
   version: "22.0.0-next.6",
   ngImport: i0,
-  type: AccordionTrigger,
+  type: AccordionGroup,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngAccordionTrigger]',
-      exportAs: 'ngAccordionTrigger',
+      selector: '[ngAccordionGroup]',
+      exportAs: 'ngAccordionGroup',
       host: {
-        '[attr.data-active]': 'active()',
-        'role': 'button',
-        '[id]': 'id()',
-        '[attr.aria-expanded]': 'expanded()',
-        '[attr.aria-controls]': '_pattern.controls()',
-        '[attr.aria-disabled]': '_pattern.disabled()',
-        '[attr.disabled]': '_pattern.hardDisabled() ? true : null',
-        '[attr.tabindex]': '_pattern.tabIndex()'
-      }
+        '(keydown)': '_pattern.onKeydown($event)',
+        '(click)': '_pattern.onClick($event)',
+        '(focusin)': '_pattern.onFocus($event)'
+      },
+      providers: [{
+        provide: ACCORDION_GROUP,
+        useExisting: AccordionGroup
+      }]
     }]
   }],
   propDecorators: {
-    panel: [{
+    disabled: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "panel",
-        required: true
+        alias: "disabled",
+        required: false
       }]
     }],
-    id: [{
+    multiExpandable: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "id",
+        alias: "multiExpandable",
         required: false
       }]
     }],
-    disabled: [{
+    softDisabled: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "disabled",
+        alias: "softDisabled",
         required: false
       }]
     }],
-    expanded: [{
+    wrap: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "expanded",
+        alias: "wrap",
         required: false
       }]
-    }, {
-      type: i0.Output,
-      args: ["expandedChange"]
     }]
   }
 });
 
-class AccordionGroup {
+class AccordionTrigger {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _triggers = contentChildren(AccordionTrigger, {
-    ...(ngDevMode ? {
-      debugName: "_triggers"
-    } : {}),
-    descendants: true
-  });
-  _triggerPatterns = computed(() => this._triggers().map(t => t._pattern), ...(ngDevMode ? [{
-    debugName: "_triggerPatterns"
+  _accordionGroup = inject(ACCORDION_GROUP);
+  panel = input.required(...(ngDevMode ? [{
+    debugName: "panel"
+  }] : []));
+  id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true), ...(ngDevMode ? [{
+    debugName: "id"
+  }] : []));
+  panelId = computed(() => this.panel().id(), ...(ngDevMode ? [{
+    debugName: "panelId"
   }] : []));
-  textDirection = inject(Directionality).valueSignal;
   disabled = input(false, {
     ...(ngDevMode ? {
       debugName: "disabled"
     } : {}),
     transform: booleanAttribute
   });
-  multiExpandable = input(true, {
-    ...(ngDevMode ? {
-      debugName: "multiExpandable"
-    } : {}),
-    transform: booleanAttribute
-  });
-  softDisabled = input(true, {
-    ...(ngDevMode ? {
-      debugName: "softDisabled"
-    } : {}),
-    transform: booleanAttribute
-  });
-  wrap = input(false, {
-    ...(ngDevMode ? {
-      debugName: "wrap"
-    } : {}),
-    transform: booleanAttribute
-  });
-  _pattern = new AccordionGroupPattern({
-    ...this,
-    element: () => this.element,
-    activeItem: signal(undefined),
-    items: this._triggerPatterns,
-    orientation: () => 'vertical'
-  });
-  expandAll() {
-    this._pattern.expandAll();
+  index = input(...(ngDevMode ? [undefined, {
+    debugName: "index"
+  }] : []));
+  expanded = model(false, ...(ngDevMode ? [{
+    debugName: "expanded"
+  }] : []));
+  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
+    debugName: "active"
+  }] : []));
+  _pattern;
+  ngOnInit() {
+    this._pattern = new AccordionTriggerPattern({
+      ...this,
+      element: () => this.element,
+      accordionGroup: () => this._accordionGroup._pattern,
+      accordionPanelId: this.panelId
+    });
+    this.panel()._pattern = this._pattern;
+    this._accordionGroup._registerTrigger(this);
   }
-  collapseAll() {
-    this._pattern.collapseAll();
+  ngOnDestroy() {
+    this.panel()._pattern = undefined;
+    this._accordionGroup._unregisterTrigger(this);
+  }
+  expand() {
+    this._pattern.open();
+  }
+  collapse() {
+    this._pattern.close();
+  }
+  toggle() {
+    this._pattern.toggle();
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "22.0.0-next.6",
     ngImport: i0,
-    type: AccordionGroup,
+    type: AccordionTrigger,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.2.0",
+    minVersion: "17.1.0",
     version: "22.0.0-next.6",
-    type: AccordionGroup,
+    type: AccordionTrigger,
     isStandalone: true,
-    selector: "[ngAccordionGroup]",
+    selector: "[ngAccordionTrigger]",
     inputs: {
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
+      panel: {
+        classPropertyName: "panel",
+        publicName: "panel",
+        isSignal: true,
+        isRequired: true,
+        transformFunction: null
+      },
+      id: {
+        classPropertyName: "id",
+        publicName: "id",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      multiExpandable: {
-        classPropertyName: "multiExpandable",
-        publicName: "multiExpandable",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      softDisabled: {
-        classPropertyName: "softDisabled",
-        publicName: "softDisabled",
+      index: {
+        classPropertyName: "index",
+        publicName: "index",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      wrap: {
-        classPropertyName: "wrap",
-        publicName: "wrap",
+      expanded: {
+        classPropertyName: "expanded",
+        publicName: "expanded",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
+    outputs: {
+      expanded: "expandedChange"
+    },
     host: {
-      listeners: {
-        "keydown": "_pattern.onKeydown($event)",
-        "pointerdown": "_pattern.onPointerdown($event)",
-        "focusin": "_pattern.onFocus($event)"
+      attributes: {
+        "role": "button"
+      },
+      properties: {
+        "attr.data-active": "active()",
+        "id": "id()",
+        "attr.aria-expanded": "expanded()",
+        "attr.aria-controls": "_pattern.controls()",
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.disabled": "_pattern.hardDisabled() ? true : null",
+        "attr.tabindex": "_pattern.tabIndex()"
       }
     },
-    providers: [{
-      provide: ACCORDION_GROUP,
-      useExisting: AccordionGroup
-    }],
-    queries: [{
-      propertyName: "_triggers",
-      predicate: AccordionTrigger,
-      descendants: true,
-      isSignal: true
-    }],
-    exportAs: ["ngAccordionGroup"],
+    exportAs: ["ngAccordionTrigger"],
     ngImport: i0
   });
 }
@@ -400,64 +422,67 @@ i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
   version: "22.0.0-next.6",
   ngImport: i0,
-  type: AccordionGroup,
+  type: AccordionTrigger,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngAccordionGroup]',
-      exportAs: 'ngAccordionGroup',
+      selector: '[ngAccordionTrigger]',
+      exportAs: 'ngAccordionTrigger',
       host: {
-        '(keydown)': '_pattern.onKeydown($event)',
-        '(pointerdown)': '_pattern.onPointerdown($event)',
-        '(focusin)': '_pattern.onFocus($event)'
-      },
-      providers: [{
-        provide: ACCORDION_GROUP,
-        useExisting: AccordionGroup
-      }]
+        '[attr.data-active]': 'active()',
+        'role': 'button',
+        '[id]': 'id()',
+        '[attr.aria-expanded]': 'expanded()',
+        '[attr.aria-controls]': '_pattern.controls()',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.disabled]': '_pattern.hardDisabled() ? true : null',
+        '[attr.tabindex]': '_pattern.tabIndex()'
+      }
     }]
   }],
   propDecorators: {
-    _triggers: [{
-      type: i0.ContentChildren,
-      args: [i0.forwardRef(() => AccordionTrigger), {
-        ...{
-          descendants: true
-        },
-        isSignal: true
+    panel: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "panel",
+        required: true
       }]
     }],
-    disabled: [{
+    id: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "disabled",
+        alias: "id",
         required: false
       }]
     }],
-    multiExpandable: [{
+    disabled: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "multiExpandable",
+        alias: "disabled",
         required: false
       }]
     }],
-    softDisabled: [{
+    index: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "softDisabled",
+        alias: "index",
         required: false
       }]
     }],
-    wrap: [{
+    expanded: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "wrap",
+        alias: "expanded",
         required: false
       }]
+    }, {
+      type: i0.Output,
+      args: ["expandedChange"]
     }]
   }
 });