refactor(multiple): underscore pattern props only for internal usage

src/aria/accordion/accordion.ts

@@ -79,14 +79,14 @@ export class AccordionPanel {
   readonly visible = computed(() => !this._pattern.hidden());
 
   /** The parent accordion trigger pattern that controls this panel. This is set by AccordionGroup. */
-  readonly accordionTrigger: WritableSignal<AccordionTriggerPattern | undefined> =
+  readonly _accordionTriggerPattern: WritableSignal<AccordionTriggerPattern | undefined> =
     signal(undefined);
 
   /** The UI pattern instance for this panel. */
   readonly _pattern: AccordionPanelPattern = new AccordionPanelPattern({
     id: this.id,
     panelId: this.panelId,
-    accordionTrigger: () => this.accordionTrigger(),
+    accordionTrigger: () => this._accordionTriggerPattern(),
   });
 
   constructor() {
@@ -98,17 +98,17 @@ export class AccordionPanel {
 
   /** Expands this item. */
   expand() {
-    this.accordionTrigger()?.open();
+    this._accordionTriggerPattern()?.open();
   }
 
   /** Collapses this item. */
   collapse() {
-    this.accordionTrigger()?.close();
+    this._accordionTriggerPattern()?.close();
   }
 
   /** Toggles the expansion state of this item. */
   toggle() {
-    this.accordionTrigger()?.toggle();
+    this._accordionTriggerPattern()?.toggle();
   }
 }
 
@@ -169,13 +169,14 @@ export class AccordionTrigger {
   readonly active = computed(() => this._pattern.active());
 
   /** The accordion panel pattern controlled by this trigger. This is set by AccordionGroup. */
-  readonly _accordionPanel: WritableSignal<AccordionPanelPattern | undefined> = signal(undefined);
+  readonly _accordionPanelPattern: WritableSignal<AccordionPanelPattern | undefined> =
+    signal(undefined);
 
   /** The UI pattern instance for this trigger. */
   readonly _pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
     ...this,
     accordionGroup: computed(() => this._accordionGroup._pattern),
-    accordionPanel: this._accordionPanel,
+    accordionPanel: this._accordionPanelPattern,
     element: () => this.element,
   });
 
@@ -292,9 +293,9 @@ export class AccordionGroup {
 
       for (const trigger of triggers) {
         const panel = panels.find(p => p.panelId() === trigger.panelId());
-        trigger._accordionPanel.set(panel?._pattern);
+        trigger._accordionPanelPattern.set(panel?._pattern);
         if (panel) {
-          panel.accordionTrigger.set(trigger._pattern);
+          panel._accordionTriggerPattern.set(trigger._pattern);
         }
       }
     });

src/aria/combobox/combobox.ts

@@ -138,7 +138,7 @@ export class Combobox<V> {
     inputValue: signal(''),
     inputEl: signal(undefined),
     containerEl: () => this._elementRef.nativeElement,
-    popupControls: () => this.popup()?.controls(),
+    popupControls: () => this.popup()?._controls(),
   });
 
   constructor() {
@@ -231,7 +231,7 @@ export class ComboboxInput {
     );
     this.combobox._pattern.inputs.inputValue = this.value;
 
-    const controls = this.combobox.popup()?.controls();
+    const controls = this.combobox.popup()?._controls();
     if (controls instanceof ComboboxDialogPattern) {
       return;
     }
@@ -301,7 +301,7 @@ export class ComboboxPopup<V> {
   readonly combobox = inject<Combobox<V>>(Combobox, {optional: true});
 
   /** The popup controls exposed to the combobox. */
-  readonly controls = signal<
+  readonly _controls = signal<
     | ComboboxListboxControls<any, V>
     | ComboboxTreeControls<any, V>
     | ComboboxDialogPattern
@@ -359,7 +359,7 @@ export class ComboboxDialog {
     });
 
     if (this._popup) {
-      this._popup.controls.set(this._pattern);
+      this._popup._controls.set(this._pattern);
     }
 
     afterRenderEffect(() => {

src/aria/grid/grid.ts

@@ -202,7 +202,7 @@ export class GridRow {
   private readonly _grid = inject(Grid);
 
   /** The parent grid UI pattern. */
-  readonly grid = computed(() => this._grid._pattern);
+  readonly _gridPattern = computed(() => this._grid._pattern);
 
   /** The index of this row within the grid. */
   readonly rowIndex = input<number>();
@@ -211,6 +211,7 @@ export class GridRow {
   readonly _pattern = new GridRowPattern({
     ...this,
     cells: this._cellPatterns,
+    grid: this._gridPattern,
   });
 }
 
@@ -318,7 +319,7 @@ export class GridCell {
   /** The UI pattern for the grid cell. */
   readonly _pattern = new GridCellPattern({
     ...this,
-    grid: this._row.grid,
+    grid: this._row._gridPattern,
     row: () => this._row._pattern,
     widgets: this._widgetPatterns,
     getWidget: e => this._getWidget(e),

src/aria/listbox/listbox.ts

@@ -154,7 +154,7 @@ export class Listbox<V> {
       : new ListboxPattern<V>(inputs);
 
     if (this._popup) {
-      this._popup.controls.set(this._pattern as ComboboxListboxPattern<V>);
+      this._popup._controls.set(this._pattern as ComboboxListboxPattern<V>);
     }
 
     afterRenderEffect(() => {
@@ -257,7 +257,7 @@ export class Option<V> {
   protected searchTerm = computed(() => this.label() ?? this.element.textContent);
 
   /** The parent Listbox UIPattern. */
-  protected listbox = computed(() => this._listbox._pattern);
+  private readonly _listboxPattern = computed(() => this._listbox._pattern);
 
   /** The value of the option. */
   value = input.required<V>();
@@ -276,7 +276,7 @@ export class Option<V> {
     ...this,
     id: this.id,
     value: this.value,
-    listbox: this.listbox,
+    listbox: this._listboxPattern,
     element: () => this.element,
     searchTerm: () => this.searchTerm() ?? '',
   });

src/aria/menu/menu.ts

@@ -209,7 +209,7 @@ export class Menu<V> {
    * sometimes the items array is empty. The bug can be reproduced by switching this to use a
    * computed and then quickly opening and closing menus in the dev app.
    */
-  readonly items = () => this._items().map(i => i._pattern);
+  private readonly _itemPatterns = () => this._items().map(i => i._pattern);
 
   /** Whether the menu is visible. */
   readonly visible = computed(() => this._pattern.visible());
@@ -227,6 +227,7 @@ export class Menu<V> {
     this._pattern = new MenuPattern({
       ...this,
       parent: computed(() => this.parent()?._pattern),
+      items: this._itemPatterns,
       multi: () => false,
       softDisabled: () => true,
       focusMode: () => 'roving',
@@ -348,14 +349,15 @@ export class MenuBar<V> {
   readonly _pattern: MenuBarPattern<V>;
 
   /** The menu items as a writable signal. */
-  readonly items = signal<MenuItemPattern<V>[]>([]);
+  private readonly _itemPatterns = signal<MenuItemPattern<V>[]>([]);
 
   /** A callback function triggered when a menu item is selected. */
   onSelect = output<V>();
 
   constructor() {
     this._pattern = new MenuBarPattern({
       ...this,
+      items: this._itemPatterns,
       multi: () => false,
       softDisabled: () => true,
       focusMode: () => 'roving',
@@ -367,7 +369,7 @@ export class MenuBar<V> {
     });
 
     afterRenderEffect(() => {
-      this.items.set(this._items().map(i => i._pattern));
+      this._itemPatterns.set(this._items().map(i => i._pattern));
     });
 
     afterRenderEffect(() => {

src/aria/tabs/tabs.ts

@@ -307,10 +307,10 @@ export class Tab implements HasElement, OnInit, OnDestroy {
   readonly id = input(inject(_IdGenerator).getId('ng-tab-', true));
 
   /** The parent TabList UIPattern. */
-  readonly tablist = computed(() => this._tabList._pattern);
+  private readonly _tablistPattern = computed(() => this._tabList._pattern);
 
   /** The TabPanel UIPattern associated with the tab */
-  readonly tabpanel = computed(() =>
+  private readonly _tabpanelPattern = computed(() =>
     this._tabs._unorderedTabpanelPatterns().find(tabpanel => tabpanel.value() === this.value()),
   );
 
@@ -329,8 +329,8 @@ export class Tab implements HasElement, OnInit, OnDestroy {
   /** The Tab UIPattern. */
   readonly _pattern: TabPattern = new TabPattern({
     ...this,
-    tablist: this.tablist,
-    tabpanel: this.tabpanel,
+    tablist: this._tablistPattern,
+    tabpanel: this._tabpanelPattern,
     expanded: signal(false),
     element: () => this.element,
   });
@@ -400,7 +400,7 @@ export class TabPanel implements OnInit, OnDestroy {
   readonly id = input(inject(_IdGenerator).getId('ng-tabpanel-', true));
 
   /** The Tab UIPattern associated with the tabpanel */
-  readonly tab = computed(() =>
+  private readonly _tabPattern = computed(() =>
     this._Tabs._tabPatterns()?.find(tab => tab.value() === this.value()),
   );
 
@@ -413,6 +413,7 @@ export class TabPanel implements OnInit, OnDestroy {
   /** The TabPanel UIPattern. */
   readonly _pattern: TabPanelPattern = new TabPanelPattern({
     ...this,
+    tab: this._tabPattern,
   });
 
   constructor() {

src/aria/toolbar/toolbar.ts

@@ -89,7 +89,7 @@ export class Toolbar<V> {
   readonly textDirection = inject(Directionality).valueSignal;
 
   /** Sorted UIPatterns of the child widgets */
-  readonly items = computed(() =>
+  readonly _itemPatterns = computed(() =>
     [...this._widgets()].sort(sortDirectives).map(widget => widget._pattern),
   );
 
@@ -111,6 +111,7 @@ export class Toolbar<V> {
   /** The toolbar UIPattern. */
   readonly _pattern: ToolbarPattern<V> = new ToolbarPattern<V>({
     ...this,
+    items: this._itemPatterns,
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     element: () => this._elementRef.nativeElement,
@@ -159,7 +160,7 @@ export class Toolbar<V> {
   /** Finds the toolbar item associated with a given element. */
   private _getItem(element: Element) {
     const widgetTarget = element.closest('[ngToolbarWidget]');
-    return this.items().find(widget => widget.element() === widgetTarget);
+    return this._itemPatterns().find(widget => widget.element() === widgetTarget);
   }
 }
 
@@ -204,7 +205,7 @@ export class ToolbarWidget<V> implements OnInit, OnDestroy {
   readonly id = input(inject(_IdGenerator).getId('ng-toolbar-widget-', true));
 
   /** The parent Toolbar UIPattern. */
-  readonly toolbar = computed(() => this._toolbar._pattern);
+  readonly _toolbarPattern = computed(() => this._toolbar._pattern);
 
   /** Whether the widget is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
@@ -224,12 +225,15 @@ export class ToolbarWidget<V> implements OnInit, OnDestroy {
   /** Whether the widget is selected (only relevant in a selection group). */
   readonly selected = () => this._pattern.selected();
 
-  readonly group: SignalLike<ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined> =
-    () => this._group?._pattern;
+  private readonly _groupPattern: SignalLike<
+    ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined
+  > = () => this._group?._pattern;
 
   /** The ToolbarWidget UIPattern. */
   readonly _pattern = new ToolbarWidgetPattern<V>({
     ...this,
+    group: this._groupPattern,
+    toolbar: this._toolbarPattern,
     id: this.id,
     value: this.value,
     element: () => this.element,
@@ -268,17 +272,21 @@ export class ToolbarWidgetGroup<V> {
   private readonly _widgets = contentChildren(ToolbarWidget<V>, {descendants: true});
 
   /** The parent Toolbar UIPattern. */
-  readonly toolbar = computed(() => this._toolbar?._pattern);
+  private readonly _toolbarPattern = computed(() => this._toolbar?._pattern);
 
   /** Whether the widget group is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
   /** The list of toolbar items within the group. */
-  readonly items = () => this._widgets().map(w => w._pattern);
+  private readonly _itemPatterns = () => this._widgets().map(w => w._pattern);
 
   /** Whether the group allows multiple widgets to be selected. */
   readonly multi = input(false, {transform: booleanAttribute});
 
   /** The ToolbarWidgetGroup UIPattern. */
-  readonly _pattern = new ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V>(this);
+  readonly _pattern = new ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V>({
+    ...this,
+    items: this._itemPatterns,
+    toolbar: this._toolbarPattern,
+  });
 }

src/aria/tree/tree.ts

@@ -190,7 +190,7 @@ export class Tree<V> {
       : new TreePattern<V>(inputs);
 
     if (this._popup?.combobox) {
-      this._popup?.controls?.set(this._pattern as ComboboxTreePattern<V>);
+      this._popup?._controls?.set(this._pattern as ComboboxTreePattern<V>);
     }
 
     afterRenderEffect(() => {
@@ -363,7 +363,7 @@ export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestr
       ...this,
       tree: treePattern,
       parent: parentPattern,
-      children: computed(() => this._group()?.children() ?? []),
+      children: computed(() => this._group()?._childPatterns() ?? []),
       hasChildren: computed(() => !!this._group()),
       element: () => this.element,
       searchTerm: () => this.searchTerm() ?? '',
@@ -423,7 +423,7 @@ export class TreeItemGroup<V> implements OnInit, OnDestroy {
   private readonly _unorderedItems = signal(new Set<TreeItem<V>>());
 
   /** Child items within this group. */
-  readonly children = computed<TreeItemPattern<V>[]>(() =>
+  readonly _childPatterns = computed<TreeItemPattern<V>[]>(() =>
     [...this._unorderedItems()].sort(sortDirectives).map(c => c._pattern),
   );