@angular/aria 21.0.0-rc.1 → 21.0.0-rc.3

package/fesm2022/private.mjs

@@ -1,29 +1,68 @@
 import * as i0 from '@angular/core';
 import { signal, computed, model, Directive, inject, TemplateRef, ViewContainerRef, afterRenderEffect } from '@angular/core';
-import { KeyboardEventManager, PointerEventManager, Modifier } from './_widget-chunk.mjs';
+import { PointerEventManager, KeyboardEventManager, ListFocus, ListNavigation, Modifier } from './_widget-chunk.mjs';
 export { GridCellPattern, GridCellWidgetPattern, GridPattern, GridRowPattern } from './_widget-chunk.mjs';
 
 class ComboboxPattern {
   inputs;
   expanded = signal(false);
-  activeDescendant = computed(() => this.inputs.popupControls()?.activeId() ?? null);
+  disabled = () => this.inputs.disabled();
+  activeDescendant = computed(() => {
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return null;
+    }
+    return popupControls?.activeId() ?? null;
+  });
   highlightedItem = signal(undefined);
   isDeleting = false;
   isFocused = signal(false);
+  hasBeenFocused = signal(false);
   expandKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight');
   collapseKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft');
   popupId = computed(() => this.inputs.popupControls()?.id() || null);
   autocomplete = computed(() => this.inputs.filterMode() === 'highlight' ? 'both' : 'list');
   hasPopup = computed(() => this.inputs.popupControls()?.role() || null);
-  readonly = computed(() => this.inputs.readonly() || null);
+  readonly = computed(() => this.inputs.readonly() || this.inputs.disabled() || null);
+  listControls = () => {
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return null;
+    }
+    return popupControls;
+  };
+  treeControls = () => {
+    const popupControls = this.inputs.popupControls();
+    if (popupControls?.role() === 'tree') {
+      return popupControls;
+    }
+    return null;
+  };
   keydown = computed(() => {
+    const manager = new KeyboardEventManager();
+    const popupControls = this.inputs.popupControls();
+    if (!popupControls) {
+      return manager;
+    }
+    if (popupControls instanceof ComboboxDialogPattern) {
+      if (!this.expanded()) {
+        manager.on('ArrowUp', () => this.open()).on('ArrowDown', () => this.open());
+        if (this.readonly()) {
+          manager.on('Enter', () => this.open()).on(' ', () => this.open());
+        }
+      }
+      return manager;
+    }
+    if (!this.inputs.alwaysExpanded()) {
+      manager.on('Escape', () => this.close({
+        reset: !this.readonly()
+      }));
+    }
     if (!this.expanded()) {
-      const manager = new KeyboardEventManager().on('ArrowDown', () => this.open({
+      manager.on('ArrowDown', () => this.open({
         first: true
       })).on('ArrowUp', () => this.open({
         last: true
-      })).on('Escape', () => this.close({
-        reset: !this.readonly()
       }));
       if (this.readonly()) {
         manager.on('Enter', () => this.open({
@@ -34,13 +73,7 @@ class ComboboxPattern {
       }
       return manager;
     }
-    const popupControls = this.inputs.popupControls();
-    if (!popupControls) {
-      return new KeyboardEventManager();
-    }
-    const manager = new KeyboardEventManager().on('ArrowDown', () => this.next()).on('ArrowUp', () => this.prev()).on('Home', () => this.first()).on('End', () => this.last()).on('Escape', () => this.close({
-      reset: !this.readonly()
-    }));
+    manager.on('ArrowDown', () => this.next()).on('ArrowUp', () => this.prev()).on('Home', () => this.first()).on('End', () => this.last());
     if (this.readonly()) {
       manager.on(' ', () => this.select({
         commit: true,
@@ -48,35 +81,47 @@ class ComboboxPattern {
       }));
     }
     if (popupControls.role() === 'listbox') {
+      manager.on('Enter', () => {
+        this.select({
+          commit: true,
+          close: !popupControls.multi()
+        });
+      });
+    }
+    const treeControls = this.treeControls();
+    if (treeControls?.isItemSelectable()) {
       manager.on('Enter', () => this.select({
         commit: true,
-        close: !popupControls.multi()
+        close: true
       }));
     }
-    if (popupControls.role() === 'tree') {
-      const treeControls = popupControls;
-      if (treeControls.isItemSelectable()) {
-        manager.on('Enter', () => this.select({
-          commit: true,
-          close: true
-        }));
-      } else if (treeControls.isItemExpandable()) {
+    if (treeControls?.isItemExpandable()) {
+      manager.on(this.expandKey(), () => this.expandItem()).on(this.collapseKey(), () => this.collapseItem());
+      if (!treeControls.isItemSelectable()) {
         manager.on('Enter', () => this.expandItem());
       }
-      if (treeControls.isItemExpandable() || treeControls.isItemCollapsible()) {
-        manager.on(this.collapseKey(), () => this.collapseItem());
-      }
-      if (treeControls.isItemExpandable()) {
-        manager.on(this.expandKey(), () => this.expandItem());
-      }
+    }
+    if (treeControls?.isItemCollapsible()) {
+      manager.on(this.collapseKey(), () => this.collapseItem());
     }
     return manager;
   });
-  pointerup = computed(() => new PointerEventManager().on(e => {
-    const item = this.inputs.popupControls()?.getItem(e);
+  click = computed(() => new PointerEventManager().on(e => {
+    if (e.target === this.inputs.inputEl()) {
+      if (this.readonly()) {
+        this.expanded() ? this.close() : this.open({
+          selected: true
+        });
+      }
+    }
+    const controls = this.inputs.popupControls();
+    if (controls instanceof ComboboxDialogPattern) {
+      return;
+    }
+    const item = controls?.getItem(e);
     if (item) {
-      if (this.inputs.popupControls()?.role() === 'tree') {
-        const treeControls = this.inputs.popupControls();
+      if (controls?.role() === 'tree') {
+        const treeControls = controls;
         if (treeControls.isItemExpandable(item) && !treeControls.isItemSelectable(item)) {
           treeControls.toggleExpansion(item);
           this.inputs.inputEl()?.focus();
@@ -86,17 +131,10 @@ class ComboboxPattern {
       this.select({
         item,
         commit: true,
-        close: !this.inputs.popupControls()?.multi()
+        close: !controls?.multi()
       });
       this.inputs.inputEl()?.focus();
     }
-    if (e.target === this.inputs.inputEl()) {
-      if (this.readonly()) {
-        this.expanded() ? this.close() : this.open({
-          selected: true
-        });
-      }
-    }
   }));
   constructor(inputs) {
     this.inputs = inputs;
@@ -106,9 +144,9 @@ class ComboboxPattern {
       this.keydown().handle(event);
     }
   }
-  onPointerup(event) {
+  onClick(event) {
     if (!this.inputs.disabled()) {
-      this.pointerup().handle(event);
+      this.click().handle(event);
     }
   }
   onInput(event) {
@@ -119,27 +157,33 @@ class ComboboxPattern {
     if (!inputEl) {
       return;
     }
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return;
+    }
     this.open();
     this.inputs.inputValue?.set(inputEl.value);
     this.isDeleting = event instanceof InputEvent && !!event.inputType.match(/^delete/);
-    if (this.inputs.filterMode() === 'manual') {
-      const selectedItems = this.inputs.popupControls()?.getSelectedItems();
-      const searchTerm = selectedItems?.[0]?.searchTerm();
-      if (searchTerm && this.inputs.inputValue() !== searchTerm) {
-        this.inputs.popupControls()?.clearSelection();
-      }
-    }
     if (this.inputs.filterMode() === 'highlight' && !this.isDeleting) {
       this.highlight();
     }
   }
   onFocusIn() {
+    if (this.inputs.alwaysExpanded() && !this.hasBeenFocused()) {
+      const firstSelectedItem = this.listControls()?.getSelectedItems()[0];
+      firstSelectedItem ? this.listControls()?.focus(firstSelectedItem) : this.first();
+    }
     this.isFocused.set(true);
+    this.hasBeenFocused.set(true);
   }
   onFocusOut(event) {
     if (this.inputs.disabled()) {
       return;
     }
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return;
+    }
     if (!(event.relatedTarget instanceof HTMLElement) || !this.inputs.containerEl()?.contains(event.relatedTarget)) {
       this.isFocused.set(false);
       if (this.readonly()) {
@@ -149,7 +193,7 @@ class ComboboxPattern {
       if (this.inputs.filterMode() !== 'manual') {
         this.commit();
       } else {
-        const item = this.inputs.popupControls()?.items().find(i => i.searchTerm() === this.inputs.inputEl()?.value);
+        const item = popupControls?.items().find(i => i.searchTerm() === this.inputs.inputEl()?.value);
         if (item) {
           this.select({
             item
@@ -160,15 +204,19 @@ class ComboboxPattern {
     }
   }
   firstMatch = computed(() => {
-    if (this.inputs.popupControls()?.role() === 'listbox') {
-      return this.inputs.popupControls()?.items()[0];
+    if (this.listControls()?.role() === 'listbox') {
+      return this.listControls()?.items()[0];
     }
-    return this.inputs.popupControls()?.items().find(i => i.value() === this.inputs.firstMatch());
+    return this.listControls()?.items().find(i => i.value() === this.inputs.firstMatch());
   });
   onFilter() {
     if (this.readonly()) {
       return;
     }
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return;
+    }
     const isInitialRender = !this.inputs.inputValue?.().length && !this.isDeleting;
     if (isInitialRender) {
       return;
@@ -182,11 +230,11 @@ class ComboboxPattern {
     }
     const item = this.firstMatch();
     if (!item) {
-      this.inputs.popupControls()?.clearSelection();
-      this.inputs.popupControls()?.unfocus();
+      popupControls?.clearSelection();
+      popupControls?.unfocus();
       return;
     }
-    this.inputs.popupControls()?.focus(item);
+    popupControls?.focus(item);
     if (this.inputs.filterMode() !== 'manual') {
       this.select({
         item
@@ -198,7 +246,7 @@ class ComboboxPattern {
   }
   highlight() {
     const inputEl = this.inputs.inputEl();
-    const selectedItems = this.inputs.popupControls()?.getSelectedItems();
+    const selectedItems = this.listControls()?.getSelectedItems();
     const item = selectedItems?.[0];
     if (!inputEl || !item) {
       return;
@@ -211,12 +259,29 @@ class ComboboxPattern {
     }
   }
   close(opts) {
+    const popupControls = this.inputs.popupControls();
+    if (this.inputs.alwaysExpanded()) {
+      return;
+    }
+    if (popupControls instanceof ComboboxDialogPattern) {
+      this.expanded.set(false);
+      return;
+    }
+    if (this.readonly()) {
+      this.expanded.set(false);
+      popupControls?.unfocus();
+      return;
+    }
     if (!opts?.reset) {
+      if (this.inputs.filterMode() === 'manual') {
+        if (!this.listControls()?.items().some(i => i.searchTerm() === this.inputs.inputEl()?.value)) {
+          this.listControls()?.clearSelection();
+        }
+      }
       this.expanded.set(false);
-      this.inputs.popupControls()?.unfocus();
+      popupControls?.unfocus();
       return;
     }
-    const popupControls = this.inputs.popupControls();
     if (!this.expanded()) {
       this.inputs.inputValue?.set('');
       popupControls?.clearSelection();
@@ -225,19 +290,24 @@ class ComboboxPattern {
         inputEl.value = '';
       }
     } else if (this.expanded()) {
-      this.close();
+      this.expanded.set(false);
       const selectedItem = popupControls?.getSelectedItems()?.[0];
       if (selectedItem?.searchTerm() !== this.inputs.inputValue()) {
         popupControls?.clearSelection();
       }
+      return;
     }
     this.close();
     if (!this.readonly()) {
-      this.inputs.popupControls()?.clearSelection();
+      popupControls?.clearSelection();
     }
   }
   open(nav) {
     this.expanded.set(true);
+    const popupControls = this.inputs.popupControls();
+    if (popupControls instanceof ComboboxDialogPattern) {
+      return;
+    }
     const inputEl = this.inputs.inputEl();
     if (inputEl && this.inputs.filterMode() === 'highlight') {
       const isHighlighting = inputEl.selectionStart !== inputEl.value.length;
@@ -253,21 +323,23 @@ class ComboboxPattern {
       this.last();
     }
     if (nav?.selected) {
-      const selectedItem = this.inputs.popupControls()?.items().find(i => this.inputs.popupControls()?.getSelectedItems().includes(i));
-      selectedItem ? this.inputs.popupControls()?.focus(selectedItem) : this.first();
+      const selectedItem = popupControls?.items().find(i => popupControls?.getSelectedItems().includes(i));
+      if (selectedItem) {
+        popupControls?.focus(selectedItem);
+      }
     }
   }
   next() {
-    this._navigate(() => this.inputs.popupControls()?.next());
+    this._navigate(() => this.listControls()?.next());
   }
   prev() {
-    this._navigate(() => this.inputs.popupControls()?.prev());
+    this._navigate(() => this.listControls()?.prev());
   }
   first() {
-    this._navigate(() => this.inputs.popupControls()?.first());
+    this._navigate(() => this.listControls()?.first());
   }
   last() {
-    this._navigate(() => this.inputs.popupControls()?.last());
+    this._navigate(() => this.listControls()?.last());
   }
   collapseItem() {
     const controls = this.inputs.popupControls();
@@ -278,7 +350,7 @@ class ComboboxPattern {
     this._navigate(() => controls?.expandItem());
   }
   select(opts = {}) {
-    const controls = this.inputs.popupControls();
+    const controls = this.listControls();
     if (opts.item) {
       controls?.focus(opts.item, {
         focusElement: false
@@ -294,7 +366,7 @@ class ComboboxPattern {
   }
   commit() {
     const inputEl = this.inputs.inputEl();
-    const selectedItems = this.inputs.popupControls()?.getSelectedItems();
+    const selectedItems = this.listControls()?.getSelectedItems();
     if (!inputEl) {
       return;
     }
@@ -311,7 +383,7 @@ class ComboboxPattern {
       this.select();
     }
     if (this.inputs.filterMode() === 'highlight') {
-      const selectedItem = this.inputs.popupControls()?.getSelectedItems()[0];
+      const selectedItem = this.listControls()?.getSelectedItems()[0];
       if (!selectedItem) {
         return;
       }
@@ -324,116 +396,23 @@ class ComboboxPattern {
     }
   }
 }
-
-class ListFocus {
+class ComboboxDialogPattern {
   inputs;
-  prevActiveItem = signal(undefined);
-  prevActiveIndex = computed(() => {
-    return this.prevActiveItem() ? this.inputs.items().indexOf(this.prevActiveItem()) : -1;
-  });
-  activeIndex = computed(() => {
-    return this.inputs.activeItem() ? this.inputs.items().indexOf(this.inputs.activeItem()) : -1;
+  id = () => this.inputs.id();
+  role = () => 'dialog';
+  keydown = computed(() => {
+    return new KeyboardEventManager().on('Escape', () => this.inputs.combobox.close());
   });
   constructor(inputs) {
     this.inputs = inputs;
   }
-  isListDisabled() {
-    return this.inputs.disabled() || this.inputs.items().every(i => i.disabled());
-  }
-  getActiveDescendant() {
-    if (this.isListDisabled()) {
-      return undefined;
-    }
-    if (this.inputs.focusMode() === 'roving') {
-      return undefined;
-    }
-    return this.inputs.activeItem()?.id() ?? undefined;
-  }
-  getListTabIndex() {
-    if (this.isListDisabled()) {
-      return 0;
-    }
-    return this.inputs.focusMode() === 'activedescendant' ? 0 : -1;
-  }
-  getItemTabIndex(item) {
-    if (this.isListDisabled()) {
-      return -1;
-    }
-    if (this.inputs.focusMode() === 'activedescendant') {
-      return -1;
-    }
-    return this.inputs.activeItem() === item ? 0 : -1;
-  }
-  focus(item, opts) {
-    if (this.isListDisabled() || !this.isFocusable(item)) {
-      return false;
-    }
-    this.prevActiveItem.set(this.inputs.activeItem());
-    this.inputs.activeItem.set(item);
-    if (opts?.focusElement || opts?.focusElement === undefined) {
-      this.inputs.focusMode() === 'roving' ? item.element()?.focus() : this.inputs.element()?.focus();
-    }
-    return true;
-  }
-  isFocusable(item) {
-    return !item.disabled() || this.inputs.softDisabled();
-  }
-}
-
-class ListNavigation {
-  inputs;
-  constructor(inputs) {
-    this.inputs = inputs;
-  }
-  goto(item, opts) {
-    return item ? this.inputs.focusManager.focus(item, opts) : false;
-  }
-  next(opts) {
-    return this._advance(1, opts);
-  }
-  peekNext() {
-    return this._peek(1);
-  }
-  prev(opts) {
-    return this._advance(-1, opts);
-  }
-  peekPrev() {
-    return this._peek(-1);
-  }
-  first(opts) {
-    const item = this.peekFirst();
-    return item ? this.goto(item, opts) : false;
-  }
-  last(opts) {
-    const item = this.peekLast();
-    return item ? this.goto(item, opts) : false;
-  }
-  peekFirst(items = this.inputs.items()) {
-    return items.find(i => this.inputs.focusManager.isFocusable(i));
-  }
-  peekLast(items = this.inputs.items()) {
-    for (let i = items.length - 1; i >= 0; i--) {
-      if (this.inputs.focusManager.isFocusable(items[i])) {
-        return items[i];
-      }
-    }
-    return;
-  }
-  _advance(delta, opts) {
-    const item = this._peek(delta);
-    return item ? this.goto(item, opts) : false;
+  onKeydown(event) {
+    this.keydown().handle(event);
   }
-  _peek(delta) {
-    const items = this.inputs.items();
-    const itemCount = items.length;
-    const startIndex = this.inputs.focusManager.activeIndex();
-    const step = i => this.inputs.wrap() ? (i + delta + itemCount) % itemCount : i + delta;
-    for (let i = step(startIndex); i !== startIndex && i < itemCount && i >= 0; i = step(i)) {
-      if (this.inputs.focusManager.isFocusable(items[i])) {
-        return items[i];
-      }
+  onClick(event) {
+    if (event.target === this.inputs.element()) {
+      this.inputs.combobox.close();
     }
-    return;
   }
 }
 
@@ -441,7 +420,7 @@ class ListSelection {
   inputs;
   rangeStartIndex = signal(0);
   rangeEndIndex = signal(0);
-  selectedItems = computed(() => this.inputs.items().filter(item => this.inputs.value().includes(item.value())));
+  selectedItems = computed(() => this.inputs.items().filter(item => this.inputs.values().includes(item.value())));
   constructor(inputs) {
     this.inputs = inputs;
   }
@@ -449,7 +428,7 @@ class ListSelection {
     anchor: true
   }) {
     item = item ?? this.inputs.focusManager.inputs.activeItem();
-    if (!item || item.disabled() || !item.selectable() || this.inputs.value().includes(item.value())) {
+    if (!item || item.disabled() || !item.selectable() || this.inputs.values().includes(item.value())) {
       return;
     }
     if (!this.inputs.multi()) {
@@ -459,24 +438,24 @@ class ListSelection {
     if (opts.anchor) {
       this.beginRangeSelection(index);
     }
-    this.inputs.value.update(values => values.concat(item.value()));
+    this.inputs.values.update(values => values.concat(item.value()));
   }
   deselect(item) {
     item = item ?? this.inputs.focusManager.inputs.activeItem();
     if (item && !item.disabled() && item.selectable()) {
-      this.inputs.value.update(values => values.filter(value => value !== item.value()));
+      this.inputs.values.update(values => values.filter(value => value !== item.value()));
     }
   }
   toggle(item) {
     item = item ?? this.inputs.focusManager.inputs.activeItem();
     if (item) {
-      this.inputs.value().includes(item.value()) ? this.deselect(item) : this.select(item);
+      this.inputs.values().includes(item.value()) ? this.deselect(item) : this.select(item);
     }
   }
   toggleOne() {
     const item = this.inputs.focusManager.inputs.activeItem();
     if (item) {
-      this.inputs.value().includes(item.value()) ? this.deselect() : this.selectOne();
+      this.inputs.values().includes(item.value()) ? this.deselect() : this.selectOne();
     }
   }
   selectAll() {
@@ -491,14 +470,14 @@ class ListSelection {
     this.beginRangeSelection();
   }
   deselectAll() {
-    for (const value of this.inputs.value()) {
+    for (const value of this.inputs.values()) {
       const item = this.inputs.items().find(i => i.value() === value);
-      item ? this.deselect(item) : this.inputs.value.update(values => values.filter(v => v !== value));
+      item ? this.deselect(item) : this.inputs.values.update(values => values.filter(v => v !== value));
     }
   }
   toggleAll() {
     const selectableValues = this.inputs.items().filter(i => !i.disabled() && i.selectable()).map(i => i.value());
-    selectableValues.every(i => this.inputs.value().includes(i)) ? this.deselectAll() : this.selectAll();
+    selectableValues.every(i => this.inputs.values().includes(i)) ? this.deselectAll() : this.selectAll();
   }
   selectOne() {
     const item = this.inputs.focusManager.inputs.activeItem();
@@ -506,7 +485,7 @@ class ListSelection {
       return;
     }
     this.deselectAll();
-    if (this.inputs.value().length > 0 && !this.inputs.multi()) {
+    if (this.inputs.values().length > 0 && !this.inputs.multi()) {
       return;
     }
     this.select();
@@ -585,7 +564,7 @@ class ListTypeahead {
     this.timeout = setTimeout(() => {
       this._query.set('');
       this._startIndex.set(undefined);
-    }, this.inputs.typeaheadDelay() * 1000);
+    }, this.inputs.typeaheadDelay());
     return true;
   }
   _getItem() {
@@ -843,8 +822,8 @@ class ListboxPattern {
   }
   validate() {
     const violations = [];
-    if (!this.inputs.multi() && this.inputs.value().length > 1) {
-      violations.push(`A single-select listbox should not have multiple selected options. Selected options: ${this.inputs.value().join(', ')}`);
+    if (!this.inputs.multi() && this.inputs.values().length > 1) {
+      violations.push(`A single-select listbox should not have multiple selected options. Selected options: ${this.inputs.values().join(', ')}`);
     }
     return violations;
   }
@@ -889,7 +868,7 @@ class OptionPattern {
   value;
   index = computed(() => this.listbox()?.inputs.items().indexOf(this) ?? -1);
   active = computed(() => this.listbox()?.inputs.activeItem() === this);
-  selected = computed(() => this.listbox()?.inputs.value().includes(this.value()));
+  selected = computed(() => this.listbox()?.inputs.values().includes(this.value()));
   selectable = () => true;
   disabled;
   searchTerm;
@@ -930,6 +909,7 @@ class ComboboxListboxPattern extends ListboxPattern {
   focus = (item, opts) => {
     this.listBehavior.goto(item, opts);
   };
+  getActiveItem = () => this.inputs.activeItem();
   next = () => this.listBehavior.next();
   prev = () => this.listBehavior.prev();
   last = () => this.listBehavior.last();
@@ -941,7 +921,7 @@ class ComboboxListboxPattern extends ListboxPattern {
   getItem = e => this._getItem(e);
   getSelectedItems = () => {
     const items = [];
-    for (const value of this.inputs.value()) {
+    for (const value of this.inputs.values()) {
       const item = this.items().find(i => i.value() === value);
       if (item) {
         items.push(item);
@@ -949,17 +929,21 @@ class ComboboxListboxPattern extends ListboxPattern {
     }
     return items;
   };
-  setValue = value => this.inputs.value.set(value ? [value] : []);
+  setValue = value => this.inputs.values.set(value ? [value] : []);
 }
 
 class MenuPattern {
   inputs;
   id;
   role = () => 'menu';
-  isVisible = computed(() => this.inputs.parent() ? !!this.inputs.parent()?.expanded() : true);
+  disabled = () => this.inputs.disabled();
+  visible = computed(() => this.inputs.parent() ? !!this.inputs.parent()?.expanded() : true);
   listBehavior;
   isFocused = signal(false);
   hasBeenFocused = signal(false);
+  _openTimeout;
+  _closeTimeout;
+  tabIndex = () => this.listBehavior.tabIndex();
   shouldFocus = computed(() => {
     const root = this.root();
     if (root instanceof MenuTriggerPattern) {
@@ -1000,40 +984,67 @@ class MenuPattern {
     this.id = inputs.id;
     this.listBehavior = new List({
       ...inputs,
-      value: signal([]),
-      disabled: () => false
+      values: signal([])
     });
   }
   setDefaultState() {
     if (!this.inputs.parent()) {
-      this.inputs.activeItem.set(this.inputs.items()[0]);
+      this.listBehavior.goto(this.inputs.items()[0], {
+        focusElement: false
+      });
     }
   }
   onKeydown(event) {
     this.keydownManager().handle(event);
   }
   onMouseOver(event) {
-    if (!this.isVisible()) {
+    if (!this.visible()) {
       return;
     }
     const item = this.inputs.items().find(i => i.element()?.contains(event.target));
     if (!item) {
       return;
     }
+    const parent = this.inputs.parent();
     const activeItem = this?.inputs.activeItem();
+    if (parent instanceof MenuItemPattern) {
+      const grandparent = parent.inputs.parent();
+      if (grandparent instanceof MenuPattern) {
+        grandparent._clearTimeouts();
+        grandparent.listBehavior.goto(parent, {
+          focusElement: false
+        });
+      }
+    }
     if (activeItem && activeItem !== item) {
-      activeItem.close();
+      this._closeItem(activeItem);
     }
-    if (item.expanded() && item.submenu()?.inputs.activeItem()) {
-      item.submenu()?.inputs.activeItem()?.close();
-      item.submenu()?.listBehavior.unfocus();
+    if (item.expanded()) {
+      this._clearCloseTimeout();
     }
-    item.open();
+    this._openItem(item);
     this.listBehavior.goto(item, {
       focusElement: this.shouldFocus()
     });
   }
+  _closeItem(item) {
+    this._clearOpenTimeout();
+    if (!this._closeTimeout) {
+      this._closeTimeout = setTimeout(() => {
+        item.close();
+        this._closeTimeout = undefined;
+      }, this.inputs.expansionDelay());
+    }
+  }
+  _openItem(item) {
+    this._clearOpenTimeout();
+    this._openTimeout = setTimeout(() => {
+      item.open();
+      this._openTimeout = undefined;
+    }, this.inputs.expansionDelay());
+  }
   onMouseOut(event) {
+    this._clearOpenTimeout();
     if (this.isFocused()) {
       return;
     }
@@ -1082,7 +1093,7 @@ class MenuPattern {
         return;
       }
     }
-    if (this.isVisible() && !parentEl?.contains(relatedTarget) && !this.inputs.element()?.contains(relatedTarget)) {
+    if (this.visible() && !parentEl?.contains(relatedTarget) && !this.inputs.element()?.contains(relatedTarget)) {
       this.isFocused.set(false);
       this.inputs.parent()?.close();
     }
@@ -1153,6 +1164,9 @@ class MenuPattern {
       root.next();
     }
   }
+  close() {
+    this.inputs.parent()?.close();
+  }
   closeAll() {
     const root = this.root();
     if (root instanceof MenuTriggerPattern) {
@@ -1169,10 +1183,27 @@ class MenuPattern {
       });
     }
   }
+  _clearTimeouts() {
+    this._clearOpenTimeout();
+    this._clearCloseTimeout();
+  }
+  _clearOpenTimeout() {
+    if (this._openTimeout) {
+      clearTimeout(this._openTimeout);
+      this._openTimeout = undefined;
+    }
+  }
+  _clearCloseTimeout() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout);
+      this._closeTimeout = undefined;
+    }
+  }
 }
 class MenuBarPattern {
   inputs;
   listBehavior;
+  tabIndex = () => this.listBehavior.tabIndex();
   _nextKey = computed(() => {
     return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
   });
@@ -1183,6 +1214,7 @@ class MenuBarPattern {
   typeaheadRegexp = /^.$/;
   isFocused = signal(false);
   hasBeenFocused = signal(false);
+  disabled = () => this.inputs.disabled();
   keydownManager = computed(() => {
     return new KeyboardEventManager().on(this._nextKey, () => this.next()).on(this._previousKey, () => this.prev()).on('End', () => this.listBehavior.last()).on('Home', () => this.listBehavior.first()).on('Enter', () => this.inputs.activeItem()?.open({
       first: true
@@ -1196,10 +1228,7 @@ class MenuBarPattern {
   });
   constructor(inputs) {
     this.inputs = inputs;
-    this.listBehavior = new List({
-      ...inputs,
-      disabled: () => false
-    });
+    this.listBehavior = new List(inputs);
   }
   setDefaultState() {
     this.inputs.activeItem.set(this.inputs.items()[0]);
@@ -1277,10 +1306,12 @@ class MenuBarPattern {
 class MenuTriggerPattern {
   inputs;
   expanded = signal(false);
+  hasBeenFocused = signal(false);
   role = () => 'button';
   hasPopup = () => true;
   menu;
   tabIndex = computed(() => this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0);
+  disabled = () => this.inputs.disabled();
   keydownManager = computed(() => {
     return new KeyboardEventManager().on(' ', () => this.open({
       first: true
@@ -1299,12 +1330,19 @@ class MenuTriggerPattern {
     this.menu = this.inputs.menu;
   }
   onKeydown(event) {
-    this.keydownManager().handle(event);
+    if (!this.inputs.disabled()) {
+      this.keydownManager().handle(event);
+    }
   }
   onClick() {
-    this.expanded() ? this.close() : this.open({
-      first: true
-    });
+    if (!this.inputs.disabled()) {
+      this.expanded() ? this.close() : this.open({
+        first: true
+      });
+    }
+  }
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
   }
   onFocusOut(event) {
     const element = this.inputs.element();
@@ -1340,10 +1378,11 @@ class MenuItemPattern {
   inputs;
   value;
   id;
-  disabled;
+  disabled = () => this.inputs.parent()?.disabled() || this.inputs.disabled();
   searchTerm;
   element;
-  isActive = computed(() => this.inputs.parent()?.inputs.activeItem() === this);
+  active = computed(() => this.inputs.parent()?.inputs.activeItem() === this);
+  hasBeenFocused = signal(false);
   tabIndex = computed(() => {
     if (this.submenu() && this.submenu()?.inputs.activeItem()) {
       return -1;
@@ -1363,12 +1402,14 @@ class MenuItemPattern {
     this.id = inputs.id;
     this.value = inputs.value;
     this.element = inputs.element;
-    this.disabled = inputs.disabled;
     this.submenu = this.inputs.submenu;
     this.searchTerm = inputs.searchTerm;
     this.selectable = computed(() => !this.submenu());
   }
   open(opts) {
+    if (this.disabled()) {
+      return;
+    }
     this._expanded.set(true);
     if (opts?.first) {
       this.submenu()?.first();
@@ -1388,8 +1429,15 @@ class MenuItemPattern {
       menuitem?._expanded.set(false);
       menuitem?.inputs.parent()?.listBehavior.unfocus();
       menuitems = menuitems.concat(menuitem?.submenu()?.inputs.items() ?? []);
+      const parent = menuitem?.inputs.parent();
+      if (parent instanceof MenuPattern) {
+        parent._clearTimeouts();
+      }
     }
   }
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
+  }
 }
 
 function convertGetterSetterToWritableSignalLike(getter, setter) {
@@ -1399,48 +1447,27 @@ function convertGetterSetterToWritableSignalLike(getter, setter) {
   });
 }
 
-class ExpansionControl {
-  inputs;
-  isExpanded = computed(() => this.inputs.expansionManager.isExpanded(this));
-  isExpandable = computed(() => this.inputs.expansionManager.isExpandable(this));
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.expansionId = inputs.expansionId;
-    this.expandable = inputs.expandable;
-    this.disabled = inputs.disabled;
-  }
-  open() {
-    this.inputs.expansionManager.open(this);
-  }
-  close() {
-    this.inputs.expansionManager.close(this);
-  }
-  toggle() {
-    this.inputs.expansionManager.toggle(this);
-  }
-}
 class ListExpansion {
   inputs;
-  expandedIds;
   constructor(inputs) {
     this.inputs = inputs;
-    this.expandedIds = inputs.expandedIds;
   }
   open(item) {
-    if (!this.isExpandable(item)) return;
-    if (this.isExpanded(item)) return;
+    if (!this.isExpandable(item)) return false;
+    if (item.expanded()) return false;
     if (!this.inputs.multiExpandable()) {
       this.closeAll();
     }
-    this.expandedIds.update(ids => ids.concat(item.expansionId()));
+    item.expanded.set(true);
+    return true;
   }
   close(item) {
-    if (this.isExpandable(item)) {
-      this.expandedIds.update(ids => ids.filter(id => id !== item.expansionId()));
-    }
+    if (!this.isExpandable(item)) return false;
+    item.expanded.set(false);
+    return true;
   }
   toggle(item) {
-    this.expandedIds().includes(item.expansionId()) ? this.close(item) : this.open(item);
+    return item.expanded() ? this.close(item) : this.open(item);
   }
   openAll() {
     if (this.inputs.multiExpandable()) {
@@ -1457,9 +1484,6 @@ class ListExpansion {
   isExpandable(item) {
     return !this.inputs.disabled() && !item.disabled() && item.expandable();
   }
-  isExpanded(item) {
-    return this.expandedIds().includes(item.expansionId());
-  }
 }
 
 class LabelControl {
@@ -1484,47 +1508,35 @@ class LabelControl {
 
 class TabPattern {
   inputs;
-  expansion;
-  id;
+  id = () => this.inputs.id();
   index = computed(() => this.inputs.tablist().inputs.items().indexOf(this));
-  value;
-  disabled;
-  element;
-  selectable = () => true;
-  searchTerm = () => '';
-  expandable = computed(() => this.expansion.expandable());
-  expansionId = computed(() => this.expansion.expansionId());
-  expanded = computed(() => this.expansion.isExpanded());
+  value = () => this.inputs.value();
+  disabled = () => this.inputs.disabled();
+  element = () => this.inputs.element();
+  expandable = () => true;
+  expanded;
   active = computed(() => this.inputs.tablist().inputs.activeItem() === this);
-  selected = computed(() => !!this.inputs.tablist().inputs.value().includes(this.value()));
-  tabIndex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this));
+  selected = computed(() => this.inputs.tablist().selectedTab() === this);
+  tabIndex = computed(() => this.inputs.tablist().focusBehavior.getItemTabIndex(this));
   controls = computed(() => this.inputs.tabpanel()?.id());
   constructor(inputs) {
     this.inputs = inputs;
-    this.id = inputs.id;
-    this.value = inputs.value;
-    this.disabled = inputs.disabled;
-    this.element = inputs.element;
-    this.expansion = new ExpansionControl({
-      ...inputs,
-      expansionId: inputs.value,
-      expandable: () => true,
-      expansionManager: inputs.tablist().expansionManager
-    });
+    this.expanded = inputs.expanded;
+  }
+  open() {
+    return this.inputs.tablist().open(this);
   }
 }
 class TabPanelPattern {
   inputs;
-  id;
-  value;
+  id = () => this.inputs.id();
+  value = () => this.inputs.value();
   labelManager;
   hidden = computed(() => this.inputs.tab()?.expanded() === false);
   tabIndex = computed(() => this.hidden() ? -1 : 0);
   labelledBy = computed(() => this.labelManager.labelledBy().length > 0 ? this.labelManager.labelledBy().join(' ') : undefined);
   constructor(inputs) {
     this.inputs = inputs;
-    this.id = inputs.id;
-    this.value = inputs.value;
     this.labelManager = new LabelControl({
       ...inputs,
       defaultLabelledBy: computed(() => this.inputs.tab() ? [this.inputs.tab().id()] : [])
@@ -1533,12 +1545,15 @@ class TabPanelPattern {
 }
 class TabListPattern {
   inputs;
-  listBehavior;
-  expansionManager;
-  orientation;
-  disabled;
-  tabIndex = computed(() => this.listBehavior.tabIndex());
-  activeDescendant = computed(() => this.listBehavior.activeDescendant());
+  focusBehavior;
+  navigationBehavior;
+  expansionBehavior;
+  activeTab = () => this.inputs.activeItem();
+  selectedTab = signal(undefined);
+  orientation = () => this.inputs.orientation();
+  disabled = () => this.inputs.disabled();
+  tabIndex = computed(() => this.focusBehavior.getListTabIndex());
+  activeDescendant = computed(() => this.focusBehavior.getActiveDescendant());
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
   prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
@@ -1553,40 +1568,27 @@ class TabListPattern {
     return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
   });
   keydown = computed(() => {
-    return new KeyboardEventManager().on(this.prevKey, () => this.listBehavior.prev({
-      select: this.followFocus()
-    })).on(this.nextKey, () => this.listBehavior.next({
-      select: this.followFocus()
-    })).on('Home', () => this.listBehavior.first({
-      select: this.followFocus()
-    })).on('End', () => this.listBehavior.last({
-      select: this.followFocus()
-    })).on(' ', () => this.listBehavior.select()).on('Enter', () => this.listBehavior.select());
+    return new KeyboardEventManager().on(this.prevKey, () => this._navigate(() => this.navigationBehavior.prev(), this.followFocus())).on(this.nextKey, () => this._navigate(() => this.navigationBehavior.next(), this.followFocus())).on('Home', () => this._navigate(() => this.navigationBehavior.first(), this.followFocus())).on('End', () => this._navigate(() => this.navigationBehavior.last(), this.followFocus())).on(' ', () => this.open()).on('Enter', () => this.open());
   });
   pointerdown = computed(() => {
-    return new PointerEventManager().on(e => this.listBehavior.goto(this._getItem(e), {
-      select: true
-    }));
+    return new PointerEventManager().on(e => this._navigate(() => this.navigationBehavior.goto(this._getItem(e)), true));
   });
   constructor(inputs) {
     this.inputs = inputs;
-    this.disabled = inputs.disabled;
-    this.orientation = inputs.orientation;
-    this.listBehavior = new List({
+    this.focusBehavior = new ListFocus(inputs);
+    this.navigationBehavior = new ListNavigation({
       ...inputs,
-      multi: () => false,
-      typeaheadDelay: () => 0
+      focusManager: this.focusBehavior
     });
-    this.expansionManager = new ListExpansion({
+    this.expansionBehavior = new ListExpansion({
       ...inputs,
-      multiExpandable: () => false,
-      expandedIds: this.inputs.value
+      multiExpandable: () => false
     });
   }
   setDefaultState() {
     let firstItem;
     for (const item of this.inputs.items()) {
-      if (!this.listBehavior.isFocusable(item)) continue;
+      if (!this.focusBehavior.isFocusable(item)) continue;
       if (firstItem === undefined) {
         firstItem = item;
       }
@@ -1609,6 +1611,24 @@ class TabListPattern {
       this.pointerdown().handle(event);
     }
   }
+  open(tab) {
+    tab ??= this.activeTab();
+    if (typeof tab === 'string') {
+      tab = this.inputs.items().find(t => t.value() === tab);
+    }
+    if (tab === undefined) return false;
+    const success = this.expansionBehavior.open(tab);
+    if (success) {
+      this.selectedTab.set(tab);
+    }
+    return success;
+  }
+  _navigate(op, shouldExpand = false) {
+    const success = op();
+    if (success && shouldExpand) {
+      this.open();
+    }
+  }
   _getItem(e) {
     if (!(e.target instanceof HTMLElement)) {
       return;
@@ -1702,7 +1722,6 @@ class ToolbarPattern {
       multi: () => true,
       focusMode: () => 'roving',
       selectionMode: () => 'explicit',
-      value: signal([]),
       typeaheadDelay: () => 0
     });
   }
@@ -1741,7 +1760,7 @@ class ToolbarWidgetPattern {
   value = () => this.inputs.value();
   selectable = () => true;
   index = computed(() => this.toolbar().inputs.items().indexOf(this) ?? -1);
-  selected = computed(() => this.toolbar().listBehavior.inputs.value().includes(this.value()));
+  selected = computed(() => this.toolbar().listBehavior.inputs.values().includes(this.value()));
   active = computed(() => this.toolbar().activeItem() === this);
   constructor(inputs) {
     this.inputs = inputs;
@@ -1765,82 +1784,45 @@ class ToolbarWidgetGroupPattern {
 const focusMode = () => 'roving';
 class AccordionGroupPattern {
   inputs;
-  navigation;
-  focusManager;
-  expansionManager;
+  navigationBehavior;
+  focusBehavior;
+  expansionBehavior;
   constructor(inputs) {
     this.inputs = inputs;
-    this.wrap = inputs.wrap;
-    this.orientation = inputs.orientation;
-    this.textDirection = inputs.textDirection;
-    this.activeItem = inputs.activeItem;
-    this.disabled = inputs.disabled;
-    this.multiExpandable = inputs.multiExpandable;
-    this.items = inputs.items;
-    this.expandedIds = inputs.expandedIds;
-    this.softDisabled = inputs.softDisabled;
-    this.focusManager = new ListFocus({
+    this.focusBehavior = new ListFocus({
       ...inputs,
       focusMode
     });
-    this.navigation = new ListNavigation({
+    this.navigationBehavior = new ListNavigation({
       ...inputs,
       focusMode,
-      focusManager: this.focusManager
+      focusManager: this.focusBehavior
     });
-    this.expansionManager = new ListExpansion({
+    this.expansionBehavior = new ListExpansion({
       ...inputs
     });
   }
-}
-class AccordionTriggerPattern {
-  inputs;
-  expandable;
-  expansionId;
-  expanded;
-  expansionControl;
-  active = computed(() => this.inputs.accordionGroup().activeItem() === this);
-  controls = computed(() => this.inputs.accordionPanel()?.id());
-  tabIndex = computed(() => this.inputs.accordionGroup().focusManager.isFocusable(this) ? 0 : -1);
-  disabled = computed(() => this.inputs.disabled() || this.inputs.accordionGroup().disabled());
-  index = computed(() => this.inputs.accordionGroup().items().indexOf(this));
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.id = inputs.id;
-    this.element = inputs.element;
-    this.value = inputs.value;
-    this.expansionControl = new ExpansionControl({
-      ...inputs,
-      expansionId: inputs.value,
-      expandable: () => true,
-      expansionManager: inputs.accordionGroup().expansionManager
-    });
-    this.expandable = this.expansionControl.isExpandable;
-    this.expansionId = this.expansionControl.expansionId;
-    this.expanded = this.expansionControl.isExpanded;
-  }
   prevKey = computed(() => {
-    if (this.inputs.accordionGroup().orientation() === 'vertical') {
+    if (this.inputs.orientation() === 'vertical') {
       return 'ArrowUp';
     }
-    return this.inputs.accordionGroup().textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
   });
   nextKey = computed(() => {
-    if (this.inputs.accordionGroup().orientation() === 'vertical') {
+    if (this.inputs.orientation() === 'vertical') {
       return 'ArrowDown';
     }
-    return this.inputs.accordionGroup().textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
   });
   keydown = computed(() => {
-    return new KeyboardEventManager().on(this.prevKey, () => this.inputs.accordionGroup().navigation.prev()).on(this.nextKey, () => this.inputs.accordionGroup().navigation.next()).on('Home', () => this.inputs.accordionGroup().navigation.first()).on('End', () => this.inputs.accordionGroup().navigation.last()).on(' ', () => this.expansionControl.toggle()).on('Enter', () => this.expansionControl.toggle());
+    return new KeyboardEventManager().on(this.prevKey, () => this.navigationBehavior.prev()).on(this.nextKey, () => this.navigationBehavior.next()).on('Home', () => this.navigationBehavior.first()).on('End', () => this.navigationBehavior.last()).on(' ', () => this.toggle()).on('Enter', () => this.toggle());
   });
   pointerdown = computed(() => {
     return new PointerEventManager().on(e => {
-      const item = this._getItem(e);
-      if (item) {
-        this.inputs.accordionGroup().navigation.goto(item);
-        this.expansionControl.toggle();
-      }
+      const item = this.inputs.getItem(e.target);
+      if (!item) return;
+      this.navigationBehavior.goto(item);
+      this.expansionBehavior.toggle(item);
     });
   });
   onKeydown(event) {
@@ -1850,26 +1832,51 @@ class AccordionTriggerPattern {
     this.pointerdown().handle(event);
   }
   onFocus(event) {
-    const item = this._getItem(event);
-    if (item && this.inputs.accordionGroup().focusManager.isFocusable(item)) {
-      this.inputs.accordionGroup().focusManager.focus(item);
-    }
+    const item = this.inputs.getItem(event.target);
+    if (!item) return;
+    if (!this.focusBehavior.isFocusable(item)) return;
+    this.focusBehavior.focus(item);
   }
-  _getItem(e) {
-    if (!(e.target instanceof HTMLElement)) {
-      return;
-    }
-    const element = e.target.closest('[role="button"]');
-    return this.inputs.accordionGroup().items().find(i => i.element() === element);
+  toggle() {
+    const activeItem = this.inputs.activeItem();
+    if (activeItem === undefined) return;
+    this.expansionBehavior.toggle(activeItem);
+  }
+}
+class AccordionTriggerPattern {
+  inputs;
+  id = () => this.inputs.id();
+  element = () => this.inputs.element();
+  expandable = () => true;
+  expanded;
+  active = computed(() => this.inputs.accordionGroup().inputs.activeItem() === this);
+  controls = computed(() => this.inputs.accordionPanel()?.inputs.id());
+  tabIndex = computed(() => this.inputs.accordionGroup().focusBehavior.isFocusable(this) ? 0 : -1);
+  disabled = computed(() => this.inputs.disabled() || this.inputs.accordionGroup().inputs.disabled());
+  hardDisabled = computed(() => this.disabled() && !this.inputs.accordionGroup().inputs.softDisabled());
+  index = computed(() => this.inputs.accordionGroup().inputs.items().indexOf(this));
+  constructor(inputs) {
+    this.inputs = inputs;
+    this.expanded = inputs.expanded;
+  }
+  open() {
+    this.inputs.accordionGroup().expansionBehavior.open(this);
+  }
+  close() {
+    this.inputs.accordionGroup().expansionBehavior.close(this);
+  }
+  toggle() {
+    this.inputs.accordionGroup().expansionBehavior.toggle(this);
   }
 }
 class AccordionPanelPattern {
   inputs;
+  id;
+  accordionTrigger;
   hidden;
   constructor(inputs) {
     this.inputs = inputs;
     this.id = inputs.id;
-    this.value = inputs.value;
     this.accordionTrigger = inputs.accordionTrigger;
     this.hidden = computed(() => inputs.accordionTrigger()?.expanded() === false);
   }
@@ -1877,22 +1884,20 @@ class AccordionPanelPattern {
 
 class TreeItemPattern {
   inputs;
-  id;
-  value;
-  element;
-  disabled;
-  searchTerm;
-  tree;
-  parent;
-  children;
+  id = () => this.inputs.id();
+  value = () => this.inputs.value();
+  element = () => this.inputs.element();
+  disabled = () => this.inputs.disabled();
+  searchTerm = () => this.inputs.searchTerm();
+  tree = () => this.inputs.tree();
+  parent = () => this.inputs.parent();
+  children = () => this.inputs.children();
   index = computed(() => this.tree().visibleItems().indexOf(this));
-  expansionId;
-  expansionManager;
-  expansion;
-  expandable;
-  selectable;
+  expansionBehavior;
+  expandable = () => this.inputs.hasChildren();
+  selectable = () => this.inputs.selectable();
+  expanded;
   level = computed(() => this.parent().level() + 1);
-  expanded = computed(() => this.expansion.isExpanded());
   visible = computed(() => this.parent().expanded() && this.parent().visible());
   setsize = computed(() => this.parent().children().length);
   posinset = computed(() => this.parent().children().indexOf(this) + 1);
@@ -1905,7 +1910,7 @@ class TreeItemPattern {
     if (!this.selectable()) {
       return undefined;
     }
-    return this.tree().value().includes(this.value());
+    return this.tree().values().includes(this.value());
   });
   current = computed(() => {
     if (!this.tree().nav()) {
@@ -1914,31 +1919,14 @@ class TreeItemPattern {
     if (!this.selectable()) {
       return undefined;
     }
-    return this.tree().value().includes(this.value()) ? this.tree().currentType() : undefined;
+    return this.tree().values().includes(this.value()) ? this.tree().currentType() : undefined;
   });
   constructor(inputs) {
     this.inputs = inputs;
-    this.id = inputs.id;
-    this.value = inputs.value;
-    this.element = inputs.element;
-    this.disabled = inputs.disabled;
-    this.searchTerm = inputs.searchTerm;
-    this.expansionId = inputs.id;
-    this.tree = inputs.tree;
-    this.parent = inputs.parent;
-    this.children = inputs.children;
-    this.expandable = inputs.hasChildren;
-    this.selectable = inputs.selectable;
-    this.expansion = new ExpansionControl({
-      ...inputs,
-      expandable: this.expandable,
-      expansionId: this.expansionId,
-      expansionManager: this.parent().expansionManager
-    });
-    this.expansionManager = new ListExpansion({
+    this.expanded = inputs.expanded;
+    this.expansionBehavior = new ListExpansion({
       ...inputs,
       multiExpandable: () => true,
-      expandedIds: signal([]),
       items: this.children,
       disabled: computed(() => this.tree()?.disabled() ?? false)
     });
@@ -1947,7 +1935,7 @@ class TreeItemPattern {
 class TreePattern {
   inputs;
   listBehavior;
-  expansionManager;
+  expansionBehavior;
   level = () => 0;
   expanded = () => true;
   visible = () => true;
@@ -1956,29 +1944,30 @@ class TreePattern {
   children = computed(() => this.inputs.allItems().filter(item => item.level() === this.level() + 1));
   visibleItems = computed(() => this.inputs.allItems().filter(item => item.visible()));
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
+  isRtl = computed(() => this.inputs.textDirection() === 'rtl');
   prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
       return 'ArrowUp';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    return this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
   });
   nextKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
       return 'ArrowDown';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    return this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
   });
   collapseKey = computed(() => {
     if (this.inputs.orientation() === 'horizontal') {
       return 'ArrowUp';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    return this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
   });
   expandKey = computed(() => {
     if (this.inputs.orientation() === 'horizontal') {
       return 'ArrowDown';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    return this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
   });
   dynamicSpaceKey = computed(() => this.listBehavior.isTyping() ? '' : ' ');
   typeaheadRegexp = /^.$/;
@@ -2064,45 +2053,33 @@ class TreePattern {
     }
     return manager;
   });
-  id;
-  nav;
-  currentType;
-  allItems;
-  disabled;
-  activeItem = signal(undefined);
-  softDisabled;
-  wrap;
-  orientation;
-  textDirection;
-  multi;
-  selectionMode;
-  typeaheadDelay;
-  value;
+  id = () => this.inputs.id();
+  element = () => this.inputs.element();
+  nav = () => this.inputs.nav();
+  currentType = () => this.inputs.currentType();
+  allItems = () => this.inputs.allItems();
+  focusMode = () => this.inputs.focusMode();
+  disabled = () => this.inputs.disabled();
+  activeItem;
+  softDisabled = () => this.inputs.softDisabled();
+  wrap = () => this.inputs.wrap();
+  orientation = () => this.inputs.orientation();
+  textDirection = () => this.textDirection();
+  multi = computed(() => this.nav() ? false : this.inputs.multi());
+  selectionMode = () => this.inputs.selectionMode();
+  typeaheadDelay = () => this.inputs.typeaheadDelay();
+  values;
   constructor(inputs) {
     this.inputs = inputs;
-    this.id = inputs.id;
-    this.nav = inputs.nav;
-    this.currentType = inputs.currentType;
-    this.allItems = inputs.allItems;
-    this.focusMode = inputs.focusMode;
-    this.disabled = inputs.disabled;
     this.activeItem = inputs.activeItem;
-    this.softDisabled = inputs.softDisabled;
-    this.wrap = inputs.wrap;
-    this.orientation = inputs.orientation;
-    this.textDirection = inputs.textDirection;
-    this.multi = computed(() => this.nav() ? false : this.inputs.multi());
-    this.selectionMode = inputs.selectionMode;
-    this.typeaheadDelay = inputs.typeaheadDelay;
-    this.value = inputs.value;
+    this.values = inputs.values;
     this.listBehavior = new List({
       ...inputs,
       items: this.visibleItems,
       multi: this.multi
     });
-    this.expansionManager = new ListExpansion({
+    this.expansionBehavior = new ListExpansion({
       multiExpandable: () => true,
-      expandedIds: signal([]),
       items: this.children,
       disabled: this.disabled
     });
@@ -2147,14 +2124,14 @@ class TreePattern {
     if (item.expanded()) {
       this.collapse();
     } else {
-      item.expansion.open();
+      this.expansionBehavior.open(item);
     }
   }
   expand(opts) {
     const item = this.activeItem();
     if (!item || !this.listBehavior.isFocusable(item)) return;
     if (item.expandable() && !item.expanded()) {
-      item.expansion.open();
+      this.expansionBehavior.open(item);
     } else if (item.expanded() && item.children().some(item => this.listBehavior.isFocusable(item))) {
       this.listBehavior.next(opts);
     }
@@ -2162,13 +2139,13 @@ class TreePattern {
   expandSiblings(item) {
     item ??= this.activeItem();
     const siblings = item?.parent()?.children();
-    siblings?.forEach(item => item.expansion.open());
+    siblings?.forEach(item => this.expansionBehavior.open(item));
   }
   collapse(opts) {
     const item = this.activeItem();
     if (!item || !this.listBehavior.isFocusable(item)) return;
     if (item.expandable() && item.expanded()) {
-      item.expansion.close();
+      this.expansionBehavior.close(item);
     } else if (item.parent() && item.parent() !== this) {
       const parentItem = item.parent();
       if (parentItem instanceof TreeItemPattern && this.listBehavior.isFocusable(parentItem)) {
@@ -2190,6 +2167,7 @@ class ComboboxTreePattern extends TreePattern {
   isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;
   role = () => 'tree';
   activeId = computed(() => this.listBehavior.activeDescendant());
+  getActiveItem = () => this.inputs.activeItem();
   items = computed(() => this.inputs.allItems());
   tabIndex = () => -1;
   constructor(inputs) {
@@ -2215,14 +2193,14 @@ class ComboboxTreePattern extends TreePattern {
   clearSelection = () => this.listBehavior.deselectAll();
   getItem = e => this._getItem(e);
   getSelectedItems = () => this.inputs.allItems().filter(item => item.selected());
-  setValue = value => this.inputs.value.set(value ? [value] : []);
+  setValue = value => this.inputs.values.set(value ? [value] : []);
   expandItem = () => this.expand();
   collapseItem = () => this.collapse();
   isItemExpandable(item = this.inputs.activeItem()) {
     return item ? item.expandable() : false;
   }
-  expandAll = () => this.items().forEach(item => item.expansion.open());
-  collapseAll = () => this.items().forEach(item => item.expansion.close());
+  expandAll = () => this.items().forEach(item => this.expansionBehavior.open(item));
+  collapseAll = () => this.items().forEach(item => item.expansionBehavior.close(item));
   isItemSelectable = (item = this.inputs.activeItem()) => {
     return item ? item.selectable() : false;
   };
@@ -2334,5 +2312,5 @@ i0.ɵɵngDeclareClassMetadata({
   ctorParameters: () => []
 });
 
-export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern, ComboboxListboxPattern, ComboboxPattern, ComboboxTreePattern, DeferredContent, DeferredContentAware, ListboxPattern, MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern, OptionPattern, TabListPattern, TabPanelPattern, TabPattern, ToolbarPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern, TreeItemPattern, TreePattern, convertGetterSetterToWritableSignalLike };
+export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern, ComboboxDialogPattern, ComboboxListboxPattern, ComboboxPattern, ComboboxTreePattern, DeferredContent, DeferredContentAware, ListboxPattern, MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern, OptionPattern, TabListPattern, TabPanelPattern, TabPattern, ToolbarPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern, TreeItemPattern, TreePattern, convertGetterSetterToWritableSignalLike };
 //# sourceMappingURL=private.mjs.map