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

package/fesm2022/private.mjs

@@ -1,11 +1,12 @@
-import { signal, computed } from '@angular/core';
+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';
 export { GridCellPattern, GridCellWidgetPattern, GridPattern, GridRowPattern } from './_widget-chunk.mjs';
 
 class ComboboxPattern {
   inputs;
   expanded = signal(false);
-  activedescendant = computed(() => this.inputs.popupControls()?.activeId() ?? null);
+  activeDescendant = computed(() => this.inputs.popupControls()?.activeId() ?? null);
   highlightedItem = signal(undefined);
   isDeleting = false;
   isFocused = signal(false);
@@ -14,37 +15,54 @@ class ComboboxPattern {
   popupId = computed(() => this.inputs.popupControls()?.id() || null);
   autocomplete = computed(() => this.inputs.filterMode() === 'highlight' ? 'both' : 'list');
   hasPopup = computed(() => this.inputs.popupControls()?.role() || null);
-  isInteractive = computed(() => !this.inputs.disabled() && !this.inputs.readonly());
+  readonly = computed(() => this.inputs.readonly() || null);
   keydown = computed(() => {
     if (!this.expanded()) {
-      return new KeyboardEventManager().on('ArrowDown', () => this.open({
+      const manager = new KeyboardEventManager().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({
+          selected: true
+        })).on(' ', () => this.open({
+          selected: true
+        }));
+      }
+      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', () => {
-      if (this.inputs.filterMode() === 'highlight' && popupControls.activeId()) {
-        popupControls.unfocus();
-        popupControls.clearSelection();
-        const inputEl = this.inputs.inputEl();
-        if (inputEl) {
-          inputEl.value = this.inputs.inputValue();
-        }
-      } else {
-        this.close();
-        this.inputs.popupControls()?.clearSelection();
-      }
-    }).on('Enter', () => this.select({
-      commit: true,
-      close: true
+    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()
     }));
+    if (this.readonly()) {
+      manager.on(' ', () => this.select({
+        commit: true,
+        close: !popupControls.multi()
+      }));
+    }
+    if (popupControls.role() === 'listbox') {
+      manager.on('Enter', () => this.select({
+        commit: true,
+        close: !popupControls.multi()
+      }));
+    }
     if (popupControls.role() === 'tree') {
       const treeControls = popupControls;
+      if (treeControls.isItemSelectable()) {
+        manager.on('Enter', () => this.select({
+          commit: true,
+          close: true
+        }));
+      } else if (treeControls.isItemExpandable()) {
+        manager.on('Enter', () => this.expandItem());
+      }
       if (treeControls.isItemExpandable() || treeControls.isItemCollapsible()) {
         manager.on(this.collapseKey(), () => this.collapseItem());
       }
@@ -57,32 +75,44 @@ class ComboboxPattern {
   pointerup = computed(() => new PointerEventManager().on(e => {
     const item = this.inputs.popupControls()?.getItem(e);
     if (item) {
+      if (this.inputs.popupControls()?.role() === 'tree') {
+        const treeControls = this.inputs.popupControls();
+        if (treeControls.isItemExpandable(item) && !treeControls.isItemSelectable(item)) {
+          treeControls.toggleExpansion(item);
+          this.inputs.inputEl()?.focus();
+          return;
+        }
+      }
       this.select({
         item,
         commit: true,
-        close: true
+        close: !this.inputs.popupControls()?.multi()
       });
       this.inputs.inputEl()?.focus();
     }
     if (e.target === this.inputs.inputEl()) {
-      this.open();
+      if (this.readonly()) {
+        this.expanded() ? this.close() : this.open({
+          selected: true
+        });
+      }
     }
   }));
   constructor(inputs) {
     this.inputs = inputs;
   }
   onKeydown(event) {
-    if (this.isInteractive()) {
+    if (!this.inputs.disabled()) {
       this.keydown().handle(event);
     }
   }
   onPointerup(event) {
-    if (this.isInteractive()) {
+    if (!this.inputs.disabled()) {
       this.pointerup().handle(event);
     }
   }
   onInput(event) {
-    if (!this.isInteractive()) {
+    if (this.inputs.disabled() || this.inputs.readonly()) {
       return;
     }
     const inputEl = this.inputs.inputEl();
@@ -93,21 +123,29 @@ class ComboboxPattern {
     this.inputs.inputValue?.set(inputEl.value);
     this.isDeleting = event instanceof InputEvent && !!event.inputType.match(/^delete/);
     if (this.inputs.filterMode() === 'manual') {
-      const searchTerm = this.inputs.popupControls()?.getSelectedItem()?.searchTerm();
+      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() {
     this.isFocused.set(true);
   }
   onFocusOut(event) {
-    if (this.inputs.disabled() || this.inputs.readonly()) {
+    if (this.inputs.disabled()) {
       return;
     }
     if (!(event.relatedTarget instanceof HTMLElement) || !this.inputs.containerEl()?.contains(event.relatedTarget)) {
       this.isFocused.set(false);
+      if (this.readonly()) {
+        this.close();
+        return;
+      }
       if (this.inputs.filterMode() !== 'manual') {
         this.commit();
       } else {
@@ -128,6 +166,9 @@ class ComboboxPattern {
     return this.inputs.popupControls()?.items().find(i => i.value() === this.inputs.firstMatch());
   });
   onFilter() {
+    if (this.readonly()) {
+      return;
+    }
     const isInitialRender = !this.inputs.inputValue?.().length && !this.isDeleting;
     if (isInitialRender) {
       return;
@@ -157,7 +198,8 @@ class ComboboxPattern {
   }
   highlight() {
     const inputEl = this.inputs.inputEl();
-    const item = this.inputs.popupControls()?.getSelectedItem();
+    const selectedItems = this.inputs.popupControls()?.getSelectedItems();
+    const item = selectedItems?.[0];
     if (!inputEl || !item) {
       return;
     }
@@ -168,18 +210,52 @@ class ComboboxPattern {
       this.highlightedItem.set(item);
     }
   }
-  close() {
-    this.expanded.set(false);
-    this.inputs.popupControls()?.unfocus();
+  close(opts) {
+    if (!opts?.reset) {
+      this.expanded.set(false);
+      this.inputs.popupControls()?.unfocus();
+      return;
+    }
+    const popupControls = this.inputs.popupControls();
+    if (!this.expanded()) {
+      this.inputs.inputValue?.set('');
+      popupControls?.clearSelection();
+      const inputEl = this.inputs.inputEl();
+      if (inputEl) {
+        inputEl.value = '';
+      }
+    } else if (this.expanded()) {
+      this.close();
+      const selectedItem = popupControls?.getSelectedItems()?.[0];
+      if (selectedItem?.searchTerm() !== this.inputs.inputValue()) {
+        popupControls?.clearSelection();
+      }
+    }
+    this.close();
+    if (!this.readonly()) {
+      this.inputs.popupControls()?.clearSelection();
+    }
   }
   open(nav) {
     this.expanded.set(true);
+    const inputEl = this.inputs.inputEl();
+    if (inputEl && this.inputs.filterMode() === 'highlight') {
+      const isHighlighting = inputEl.selectionStart !== inputEl.value.length;
+      this.inputs.inputValue?.set(inputEl.value.slice(0, inputEl.selectionStart || 0));
+      if (!isHighlighting) {
+        this.highlightedItem.set(undefined);
+      }
+    }
     if (nav?.first) {
       this.first();
     }
     if (nav?.last) {
       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();
+    }
   }
   next() {
     this._navigate(() => this.inputs.popupControls()?.next());
@@ -202,7 +278,13 @@ class ComboboxPattern {
     this._navigate(() => controls?.expandItem());
   }
   select(opts = {}) {
-    this.inputs.popupControls()?.select(opts.item);
+    const controls = this.inputs.popupControls();
+    if (opts.item) {
+      controls?.focus(opts.item, {
+        focusElement: false
+      });
+    }
+    controls?.multi() ? controls.toggle(opts.item) : controls?.select(opts.item);
     if (opts.commit) {
       this.commit();
     }
@@ -212,14 +294,15 @@ class ComboboxPattern {
   }
   commit() {
     const inputEl = this.inputs.inputEl();
-    const item = this.inputs.popupControls()?.getSelectedItem();
-    if (inputEl && item) {
-      inputEl.value = item.searchTerm();
-      this.inputs.inputValue?.set(item.searchTerm());
-      if (this.inputs.filterMode() === 'highlight') {
-        const length = inputEl.value.length;
-        inputEl.setSelectionRange(length, length);
-      }
+    const selectedItems = this.inputs.popupControls()?.getSelectedItems();
+    if (!inputEl) {
+      return;
+    }
+    inputEl.value = selectedItems?.map(i => i.searchTerm()).join(', ') || '';
+    this.inputs.inputValue?.set(inputEl.value);
+    if (this.inputs.filterMode() === 'highlight' && !this.readonly()) {
+      const length = inputEl.value.length;
+      inputEl.setSelectionRange(length, length);
     }
   }
   _navigate(operation) {
@@ -228,7 +311,7 @@ class ComboboxPattern {
       this.select();
     }
     if (this.inputs.filterMode() === 'highlight') {
-      const selectedItem = this.inputs.popupControls()?.getSelectedItem();
+      const selectedItem = this.inputs.popupControls()?.getSelectedItems()[0];
       if (!selectedItem) {
         return;
       }
@@ -266,13 +349,13 @@ class ListFocus {
     }
     return this.inputs.activeItem()?.id() ?? undefined;
   }
-  getListTabindex() {
+  getListTabIndex() {
     if (this.isListDisabled()) {
       return 0;
     }
     return this.inputs.focusMode() === 'activedescendant' ? 0 : -1;
   }
-  getItemTabindex(item) {
+  getItemTabIndex(item) {
     if (this.isListDisabled()) {
       return -1;
     }
@@ -288,12 +371,12 @@ class ListFocus {
     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();
+      this.inputs.focusMode() === 'roving' ? item.element()?.focus() : this.inputs.element()?.focus();
     }
     return true;
   }
   isFocusable(item) {
-    return !item.disabled() || !this.inputs.skipDisabled();
+    return !item.disabled() || this.inputs.softDisabled();
   }
 }
 
@@ -318,17 +401,23 @@ class ListNavigation {
     return this._peek(-1);
   }
   first(opts) {
-    const item = this.inputs.items().find(i => this.inputs.focusManager.isFocusable(i));
+    const item = this.peekFirst();
     return item ? this.goto(item, opts) : false;
   }
   last(opts) {
-    const items = this.inputs.items();
+    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 this.goto(items[i], opts);
+        return items[i];
       }
     }
-    return false;
+    return;
   }
   _advance(delta, opts) {
     const item = this._peek(delta);
@@ -378,10 +467,10 @@ class ListSelection {
       this.inputs.value.update(values => values.filter(value => value !== item.value()));
     }
   }
-  toggle() {
-    const item = this.inputs.focusManager.inputs.activeItem();
+  toggle(item) {
+    item = item ?? this.inputs.focusManager.inputs.activeItem();
     if (item) {
-      this.inputs.value().includes(item.value()) ? this.deselect() : this.select();
+      this.inputs.value().includes(item.value()) ? this.deselect(item) : this.select(item);
     }
   }
   toggleOne() {
@@ -522,8 +611,8 @@ class List {
   typeaheadBehavior;
   focusBehavior;
   disabled = computed(() => this.focusBehavior.isListDisabled());
-  activedescendant = computed(() => this.focusBehavior.getActiveDescendant());
-  tabindex = computed(() => this.focusBehavior.getListTabindex());
+  activeDescendant = computed(() => this.focusBehavior.getActiveDescendant());
+  tabIndex = computed(() => this.focusBehavior.getListTabIndex());
   activeIndex = computed(() => this.focusBehavior.activeIndex());
   _anchorIndex = signal(0);
   _wrap = signal(true);
@@ -545,7 +634,7 @@ class List {
     });
   }
   getItemTabindex(item) {
-    return this.focusBehavior.getItemTabindex(item);
+    return this.focusBehavior.getItemTabIndex(item);
   }
   first(opts) {
     this._navigate(opts, () => this.navigationBehavior.first(opts));
@@ -580,14 +669,14 @@ class List {
   selectOne() {
     this.selectionBehavior.selectOne();
   }
-  deselect() {
-    this.selectionBehavior.deselect();
+  deselect(item) {
+    this.selectionBehavior.deselect(item);
   }
   deselectAll() {
     this.selectionBehavior.deselectAll();
   }
-  toggle() {
-    this.selectionBehavior.toggle();
+  toggle(item) {
+    this.selectionBehavior.toggle(item);
   }
   toggleOne() {
     this.selectionBehavior.toggleOne();
@@ -636,8 +725,8 @@ class ListboxPattern {
   orientation;
   disabled = computed(() => this.listBehavior.disabled());
   readonly;
-  tabindex = computed(() => this.listBehavior.tabindex());
-  activedescendant = computed(() => this.listBehavior.activedescendant());
+  tabIndex = computed(() => this.listBehavior.tabIndex());
+  activeDescendant = computed(() => this.listBehavior.activeDescendant());
   multi;
   setsize = computed(() => this.inputs.items().length);
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
@@ -805,7 +894,7 @@ class OptionPattern {
   disabled;
   searchTerm;
   listbox;
-  tabindex = computed(() => this.listbox()?.listBehavior.getItemTabindex(this));
+  tabIndex = computed(() => this.listbox()?.listBehavior.getItemTabindex(this));
   element;
   constructor(args) {
     this.id = args.id;
@@ -821,12 +910,14 @@ class ComboboxListboxPattern extends ListboxPattern {
   inputs;
   id = computed(() => this.inputs.id());
   role = computed(() => 'listbox');
-  activeId = computed(() => this.listBehavior.activedescendant());
+  activeId = computed(() => this.listBehavior.activeDescendant());
   items = computed(() => this.inputs.items());
-  tabindex = () => -1;
+  tabIndex = () => -1;
+  multi = computed(() => {
+    return this.inputs.combobox()?.readonly() ? this.inputs.multi() : false;
+  });
   constructor(inputs) {
     if (inputs.combobox()) {
-      inputs.multi = () => false;
       inputs.focusMode = () => 'activedescendant';
       inputs.element = inputs.combobox().inputs.inputEl;
     }
@@ -836,16 +927,28 @@ class ComboboxListboxPattern extends ListboxPattern {
   onKeydown(_) {}
   onPointerdown(_) {}
   setDefaultState() {}
-  focus = item => this.listBehavior.goto(item);
+  focus = (item, opts) => {
+    this.listBehavior.goto(item, opts);
+  };
   next = () => this.listBehavior.next();
   prev = () => this.listBehavior.prev();
   last = () => this.listBehavior.last();
   first = () => this.listBehavior.first();
   unfocus = () => this.listBehavior.unfocus();
   select = item => this.listBehavior.select(item);
+  toggle = item => this.listBehavior.toggle(item);
   clearSelection = () => this.listBehavior.deselectAll();
   getItem = e => this._getItem(e);
-  getSelectedItem = () => this.inputs.items().find(i => i.selected());
+  getSelectedItems = () => {
+    const items = [];
+    for (const value of this.inputs.value()) {
+      const item = this.items().find(i => i.value() === value);
+      if (item) {
+        items.push(item);
+      }
+    }
+    return items;
+  };
   setValue = value => this.inputs.value.set(value ? [value] : []);
 }
 
@@ -974,7 +1077,7 @@ class MenuPattern {
     if (parent instanceof MenuItemPattern) {
       const grandparent = parent.inputs.parent();
       const siblings = grandparent?.inputs.items().filter(i => i !== parent);
-      const item = siblings?.find(i => i.element().contains(relatedTarget));
+      const item = siblings?.find(i => i.element()?.contains(relatedTarget));
       if (item) {
         return;
       }
@@ -1011,17 +1114,20 @@ class MenuPattern {
       const isMenu = root instanceof MenuPattern;
       const isMenuBar = root instanceof MenuBarPattern;
       const isMenuTrigger = root instanceof MenuTriggerPattern;
-      if (!item.submenu() && (isMenuTrigger || isMenuBar)) {
+      if (!item.submenu() && isMenuTrigger) {
         root.close({
           refocus: true
         });
-        root?.inputs.onSubmit?.(item.value());
+      }
+      if (!item.submenu() && isMenuBar) {
+        root.close();
+        root?.inputs.onSelect?.(item.value());
       }
       if (!item.submenu() && isMenu) {
         root.inputs.activeItem()?.close({
           refocus: true
         });
-        root?.inputs.onSubmit?.(item.value());
+        root?.inputs.onSelect?.(item.value());
       }
     }
   }
@@ -1173,8 +1279,8 @@ class MenuTriggerPattern {
   expanded = signal(false);
   role = () => 'button';
   hasPopup = () => true;
-  submenu;
-  tabindex = computed(() => this.expanded() && this.submenu()?.inputs.activeItem() ? -1 : 0);
+  menu;
+  tabIndex = computed(() => this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0);
   keydownManager = computed(() => {
     return new KeyboardEventManager().on(' ', () => this.open({
       first: true
@@ -1190,7 +1296,7 @@ class MenuTriggerPattern {
   });
   constructor(inputs) {
     this.inputs = inputs;
-    this.submenu = this.inputs.submenu;
+    this.menu = this.inputs.menu;
   }
   onKeydown(event) {
     this.keydownManager().handle(event);
@@ -1203,25 +1309,25 @@ class MenuTriggerPattern {
   onFocusOut(event) {
     const element = this.inputs.element();
     const relatedTarget = event.relatedTarget;
-    if (this.expanded() && !element?.contains(relatedTarget) && !this.inputs.submenu()?.inputs.element()?.contains(relatedTarget)) {
+    if (this.expanded() && !element?.contains(relatedTarget) && !this.inputs.menu()?.inputs.element()?.contains(relatedTarget)) {
       this.close();
     }
   }
   open(opts) {
     this.expanded.set(true);
     if (opts?.first) {
-      this.inputs.submenu()?.first();
+      this.inputs.menu()?.first();
     } else if (opts?.last) {
-      this.inputs.submenu()?.last();
+      this.inputs.menu()?.last();
     }
   }
   close(opts = {}) {
     this.expanded.set(false);
-    this.submenu()?.listBehavior.unfocus();
+    this.menu()?.listBehavior.unfocus();
     if (opts.refocus) {
       this.inputs.element()?.focus();
     }
-    let menuitems = this.inputs.submenu()?.inputs.items() ?? [];
+    let menuitems = this.inputs.menu()?.inputs.items() ?? [];
     while (menuitems.length) {
       const menuitem = menuitems.pop();
       menuitem?._expanded.set(false);
@@ -1238,7 +1344,7 @@ class MenuItemPattern {
   searchTerm;
   element;
   isActive = computed(() => this.inputs.parent()?.inputs.activeItem() === this);
-  tabindex = computed(() => {
+  tabIndex = computed(() => {
     if (this.submenu() && this.submenu()?.inputs.activeItem()) {
       return -1;
     }
@@ -1286,171 +1392,6 @@ class MenuItemPattern {
   }
 }
 
-class RadioGroupPattern {
-  inputs;
-  listBehavior;
-  orientation;
-  wrap = signal(false);
-  selectionMode = signal('follow');
-  disabled = computed(() => this.inputs.disabled() || this.listBehavior.disabled());
-  selectedItem = computed(() => this.listBehavior.selectionBehavior.selectedItems()[0]);
-  readonly = computed(() => this.selectedItem()?.disabled() || this.inputs.readonly());
-  tabindex = computed(() => this.listBehavior.tabindex());
-  activedescendant = computed(() => this.listBehavior.activedescendant());
-  _prevKey = computed(() => {
-    if (this.inputs.orientation() === 'vertical') {
-      return 'ArrowUp';
-    }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
-  });
-  _nextKey = computed(() => {
-    if (this.inputs.orientation() === 'vertical') {
-      return 'ArrowDown';
-    }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
-  });
-  keydown = computed(() => {
-    const manager = new KeyboardEventManager();
-    if (this.readonly()) {
-      return manager.on(this._prevKey, () => this.listBehavior.prev()).on(this._nextKey, () => this.listBehavior.next()).on('Home', () => this.listBehavior.first()).on('End', () => this.listBehavior.last());
-    }
-    return manager.on(this._prevKey, () => this.listBehavior.prev({
-      selectOne: true
-    })).on(this._nextKey, () => this.listBehavior.next({
-      selectOne: true
-    })).on('Home', () => this.listBehavior.first({
-      selectOne: true
-    })).on('End', () => this.listBehavior.last({
-      selectOne: true
-    })).on(' ', () => this.listBehavior.selectOne()).on('Enter', () => this.listBehavior.selectOne());
-  });
-  pointerdown = computed(() => {
-    const manager = new PointerEventManager();
-    if (this.readonly()) {
-      return manager.on(e => this.listBehavior.goto(this.inputs.getItem(e)));
-    }
-    return manager.on(e => this.listBehavior.goto(this.inputs.getItem(e), {
-      selectOne: true
-    }));
-  });
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.orientation = inputs.orientation;
-    this.listBehavior = new List({
-      ...inputs,
-      wrap: this.wrap,
-      selectionMode: this.selectionMode,
-      multi: () => false,
-      typeaheadDelay: () => 0
-    });
-  }
-  onKeydown(event) {
-    if (!this.disabled()) {
-      this.keydown().handle(event);
-    }
-  }
-  onPointerdown(event) {
-    if (!this.disabled()) {
-      this.pointerdown().handle(event);
-    }
-  }
-  setDefaultState() {
-    let firstItem = null;
-    for (const item of this.inputs.items()) {
-      if (this.listBehavior.isFocusable(item)) {
-        if (!firstItem) {
-          firstItem = item;
-        }
-        if (item.selected()) {
-          this.inputs.activeItem.set(item);
-          return;
-        }
-      }
-    }
-    if (firstItem) {
-      this.inputs.activeItem.set(firstItem);
-    }
-  }
-  validate() {
-    const violations = [];
-    if (this.selectedItem()?.disabled() && this.inputs.skipDisabled()) {
-      violations.push("Accessibility Violation: The selected radio button is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.");
-    }
-    return violations;
-  }
-}
-
-class RadioButtonPattern {
-  inputs;
-  id;
-  value;
-  index = computed(() => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1);
-  active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);
-  selected = computed(() => !!this.group()?.listBehavior.inputs.value().includes(this.value()));
-  selectable = () => true;
-  disabled;
-  group;
-  tabindex = computed(() => this.group()?.listBehavior.getItemTabindex(this));
-  element;
-  searchTerm = () => '';
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.id = inputs.id;
-    this.value = inputs.value;
-    this.group = inputs.group;
-    this.element = inputs.element;
-    this.disabled = inputs.disabled;
-  }
-}
-
-class ToolbarRadioGroupPattern extends RadioGroupPattern {
-  inputs;
-  constructor(inputs) {
-    if (!!inputs.toolbar()) {
-      inputs.orientation = inputs.toolbar().orientation;
-      inputs.skipDisabled = inputs.toolbar().skipDisabled;
-    }
-    super(inputs);
-    this.inputs = inputs;
-  }
-  onKeydown(_) {}
-  onPointerdown(_) {}
-  isOnFirstItem() {
-    return this.listBehavior.navigationBehavior.peekPrev() === undefined;
-  }
-  isOnLastItem() {
-    return this.listBehavior.navigationBehavior.peekNext() === undefined;
-  }
-  next(wrap) {
-    this.wrap.set(wrap);
-    this.listBehavior.next();
-    this.wrap.set(false);
-  }
-  prev(wrap) {
-    this.wrap.set(wrap);
-    this.listBehavior.prev();
-    this.wrap.set(false);
-  }
-  first() {
-    this.listBehavior.first();
-  }
-  last() {
-    this.listBehavior.last();
-  }
-  unfocus() {
-    this.inputs.activeItem.set(undefined);
-  }
-  trigger() {
-    if (this.readonly()) return;
-    this.listBehavior.selectOne();
-  }
-  goto(e) {
-    this.listBehavior.goto(this.inputs.getItem(e), {
-      selectOne: !this.readonly()
-    });
-  }
-}
-
 function convertGetterSetterToWritableSignalLike(getter, setter) {
   return Object.assign(getter, {
     set: setter,
@@ -1556,7 +1497,7 @@ class TabPattern {
   expanded = computed(() => this.expansion.isExpanded());
   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));
+  tabIndex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this));
   controls = computed(() => this.inputs.tabpanel()?.id());
   constructor(inputs) {
     this.inputs = inputs;
@@ -1578,7 +1519,7 @@ class TabPanelPattern {
   value;
   labelManager;
   hidden = computed(() => this.inputs.tab()?.expanded() === false);
-  tabindex = computed(() => this.hidden() ? -1 : 0);
+  tabIndex = computed(() => this.hidden() ? -1 : 0);
   labelledBy = computed(() => this.labelManager.labelledBy().length > 0 ? this.labelManager.labelledBy().join(' ') : undefined);
   constructor(inputs) {
     this.inputs = inputs;
@@ -1596,8 +1537,8 @@ class TabListPattern {
   expansionManager;
   orientation;
   disabled;
-  tabindex = computed(() => this.listBehavior.tabindex());
-  activedescendant = computed(() => this.listBehavior.activedescendant());
+  tabIndex = computed(() => this.listBehavior.tabIndex());
+  activeDescendant = computed(() => this.listBehavior.activeDescendant());
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
   prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
@@ -1677,67 +1618,15 @@ class TabListPattern {
   }
 }
 
-class ToolbarWidgetPattern {
-  inputs;
-  id;
-  element;
-  disabled;
-  toolbar;
-  tabindex = computed(() => this.toolbar().listBehavior.getItemTabindex(this));
-  searchTerm = () => '';
-  value = () => '';
-  selectable = () => true;
-  index = computed(() => this.toolbar().inputs.items().indexOf(this) ?? -1);
-  active = computed(() => this.toolbar().inputs.activeItem() === this);
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.id = inputs.id;
-    this.element = inputs.element;
-    this.disabled = inputs.disabled;
-    this.toolbar = inputs.toolbar;
-  }
-}
-
-class ToolbarWidgetGroupPattern {
-  inputs;
-  id;
-  element;
-  disabled;
-  toolbar;
-  searchTerm = () => '';
-  value = () => '';
-  selectable = () => true;
-  index = computed(() => this.toolbar()?.inputs.items().indexOf(this) ?? -1);
-  controls = computed(() => this.inputs.controls() ?? this._defaultControls);
-  _defaultControls = {
-    isOnFirstItem: () => true,
-    isOnLastItem: () => true,
-    next: () => {},
-    prev: () => {},
-    first: () => {},
-    last: () => {},
-    unfocus: () => {},
-    trigger: () => {},
-    goto: () => {},
-    setDefaultState: () => {}
-  };
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.id = inputs.id;
-    this.element = inputs.element;
-    this.disabled = inputs.disabled;
-    this.toolbar = inputs.toolbar;
-  }
-}
-
 class ToolbarPattern {
   inputs;
   listBehavior;
   orientation;
-  skipDisabled;
+  softDisabled;
   disabled = computed(() => this.listBehavior.disabled());
-  tabindex = computed(() => this.listBehavior.tabindex());
-  activedescendant = computed(() => this.listBehavior.activedescendant());
+  tabIndex = computed(() => this.listBehavior.tabIndex());
+  activeDescendant = computed(() => this.listBehavior.activeDescendant());
+  activeItem = () => this.listBehavior.inputs.activeItem();
   _prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
       return 'ArrowUp';
@@ -1764,92 +1653,53 @@ class ToolbarPattern {
   });
   _keydown = computed(() => {
     const manager = new KeyboardEventManager();
-    return manager.on(this._nextKey, () => this._next()).on(this._prevKey, () => this._prev()).on(this._altNextKey, () => this._groupNext()).on(this._altPrevKey, () => this._groupPrev()).on(' ', () => this._trigger()).on('Enter', () => this._trigger()).on('Home', () => this._first()).on('End', () => this._last());
+    return manager.on(this._nextKey, () => this.listBehavior.next()).on(this._prevKey, () => this.listBehavior.prev()).on(this._altNextKey, () => this._groupNext()).on(this._altPrevKey, () => this._groupPrev()).on(' ', () => this.select()).on('Enter', () => this.select()).on('Home', () => this.listBehavior.first()).on('End', () => this.listBehavior.last());
   });
-  _pointerdown = computed(() => new PointerEventManager().on(e => this._goto(e)));
-  _next() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      if (!item.disabled() && !item.controls().isOnLastItem()) {
-        item.controls().next(false);
-        return;
-      }
-      item.controls().unfocus();
-    }
-    this.listBehavior.next();
-    const newItem = this.inputs.activeItem();
-    if (newItem instanceof ToolbarWidgetGroupPattern) {
-      newItem.controls().first();
-    }
-  }
-  _prev() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      if (!item.disabled() && !item.controls().isOnFirstItem()) {
-        item.controls().prev(false);
-        return;
-      }
-      item.controls().unfocus();
-    }
-    this.listBehavior.prev();
-    const newItem = this.inputs.activeItem();
-    if (newItem instanceof ToolbarWidgetGroupPattern) {
-      newItem.controls().last();
-    }
-  }
   _groupNext() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetPattern) return;
-    item?.controls().next(true);
-  }
-  _groupPrev() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetPattern) return;
-    item?.controls().prev(true);
-  }
-  _trigger() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      item.controls().trigger();
-    }
-  }
-  _first() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      item.controls().unfocus();
+    const currGroup = this.inputs.activeItem()?.group();
+    const nextGroup = this.listBehavior.navigationBehavior.peekNext()?.group();
+    if (!currGroup) {
+      return;
     }
-    this.listBehavior.first();
-    const newItem = this.inputs.activeItem();
-    if (newItem instanceof ToolbarWidgetGroupPattern) {
-      newItem.controls().first();
+    if (currGroup !== nextGroup) {
+      this.listBehavior.goto(this.listBehavior.navigationBehavior.peekFirst(currGroup.inputs.items()));
+      return;
     }
+    this.listBehavior.next();
   }
-  _last() {
-    const item = this.inputs.activeItem();
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      item.controls().unfocus();
+  _groupPrev() {
+    const currGroup = this.inputs.activeItem()?.group();
+    const nextGroup = this.listBehavior.navigationBehavior.peekPrev()?.group();
+    if (!currGroup) {
+      return;
     }
-    this.listBehavior.last();
-    const newItem = this.inputs.activeItem();
-    if (newItem instanceof ToolbarWidgetGroupPattern) {
-      newItem.controls().last();
+    if (currGroup !== nextGroup) {
+      this.listBehavior.goto(this.listBehavior.navigationBehavior.peekLast(currGroup.inputs.items()));
+      return;
     }
+    this.listBehavior.prev();
   }
   _goto(e) {
     const item = this.inputs.getItem(e.target);
-    if (!item) return;
-    this.listBehavior.goto(item);
-    if (item instanceof ToolbarWidgetGroupPattern) {
-      item.controls().goto(e);
+    if (item) {
+      this.listBehavior.goto(item);
+      this.select();
     }
   }
+  select() {
+    const group = this.inputs.activeItem()?.group();
+    if (!group?.multi()) {
+      group?.inputs.items().forEach(i => this.listBehavior.deselect(i));
+    }
+    this.listBehavior.toggle();
+  }
   constructor(inputs) {
     this.inputs = inputs;
     this.orientation = inputs.orientation;
-    this.skipDisabled = inputs.skipDisabled;
+    this.softDisabled = inputs.softDisabled;
     this.listBehavior = new List({
       ...inputs,
-      multi: () => false,
+      multi: () => true,
       focusMode: () => 'roving',
       selectionMode: () => 'explicit',
       value: signal([]),
@@ -1861,24 +1711,17 @@ class ToolbarPattern {
     this._keydown().handle(event);
   }
   onPointerdown(event) {
+    event.preventDefault();
+  }
+  onClick(event) {
     if (this.disabled()) return;
-    this._pointerdown().handle(event);
+    this._goto(event);
   }
   setDefaultState() {
-    let firstItem = null;
-    for (const item of this.inputs.items()) {
-      if (this.listBehavior.isFocusable(item)) {
-        if (!firstItem) {
-          firstItem = item;
-        }
-      }
-    }
+    const firstItem = this.listBehavior.navigationBehavior.peekFirst(this.inputs.items());
     if (firstItem) {
       this.inputs.activeItem.set(firstItem);
     }
-    if (firstItem instanceof ToolbarWidgetGroupPattern) {
-      firstItem.controls().setDefaultState();
-    }
   }
   validate() {
     const violations = [];
@@ -1886,6 +1729,39 @@ class ToolbarPattern {
   }
 }
 
+class ToolbarWidgetPattern {
+  inputs;
+  id = () => this.inputs.id();
+  element = () => this.inputs.element();
+  disabled = () => this.inputs.disabled() || this.group()?.disabled() || false;
+  group = () => this.inputs.group();
+  toolbar = () => this.inputs.toolbar();
+  tabIndex = computed(() => this.toolbar().listBehavior.getItemTabindex(this));
+  searchTerm = () => '';
+  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()));
+  active = computed(() => this.toolbar().activeItem() === this);
+  constructor(inputs) {
+    this.inputs = inputs;
+  }
+}
+
+class ToolbarWidgetGroupPattern {
+  inputs;
+  disabled = () => this.inputs.disabled();
+  toolbar = () => this.inputs.toolbar();
+  multi = () => this.inputs.multi();
+  searchTerm = () => '';
+  value = () => '';
+  selectable = () => true;
+  element = () => undefined;
+  constructor(inputs) {
+    this.inputs = inputs;
+  }
+}
+
 const focusMode = () => 'roving';
 class AccordionGroupPattern {
   inputs;
@@ -1902,7 +1778,7 @@ class AccordionGroupPattern {
     this.multiExpandable = inputs.multiExpandable;
     this.items = inputs.items;
     this.expandedIds = inputs.expandedIds;
-    this.skipDisabled = inputs.skipDisabled;
+    this.softDisabled = inputs.softDisabled;
     this.focusManager = new ListFocus({
       ...inputs,
       focusMode
@@ -1925,7 +1801,7 @@ class AccordionTriggerPattern {
   expansionControl;
   active = computed(() => this.inputs.accordionGroup().activeItem() === this);
   controls = computed(() => this.inputs.accordionPanel()?.id());
-  tabindex = computed(() => this.inputs.accordionGroup().focusManager.isFocusable(this) ? 0 : -1);
+  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) {
@@ -2017,11 +1893,11 @@ class TreeItemPattern {
   selectable;
   level = computed(() => this.parent().level() + 1);
   expanded = computed(() => this.expansion.isExpanded());
-  visible = computed(() => this.parent().expanded());
+  visible = computed(() => this.parent().expanded() && this.parent().visible());
   setsize = computed(() => this.parent().children().length);
   posinset = computed(() => this.parent().children().indexOf(this) + 1);
   active = computed(() => this.tree().activeItem() === this);
-  tabindex = computed(() => this.tree().listBehavior.getItemTabindex(this));
+  tabIndex = computed(() => this.tree().listBehavior.getItemTabindex(this));
   selected = computed(() => {
     if (this.tree().nav()) {
       return undefined;
@@ -2074,8 +1950,9 @@ class TreePattern {
   expansionManager;
   level = () => 0;
   expanded = () => true;
-  tabindex = computed(() => this.listBehavior.tabindex());
-  activedescendant = computed(() => this.listBehavior.activedescendant());
+  visible = () => true;
+  tabIndex = computed(() => this.listBehavior.tabIndex());
+  activeDescendant = computed(() => this.listBehavior.activeDescendant());
   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');
@@ -2143,11 +2020,15 @@ class TreePattern {
       }));
     }
     if (!this.followFocus() && this.inputs.multi()) {
-      manager.on(this.dynamicSpaceKey, () => list.toggle()).on('Enter', () => list.toggle()).on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
+      manager.on(this.dynamicSpaceKey, () => list.toggle()).on('Enter', () => list.toggle(), {
+        preventDefault: !this.nav()
+      }).on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
     }
     if (!this.followFocus() && !this.inputs.multi()) {
       manager.on(this.dynamicSpaceKey, () => list.selectOne());
-      manager.on('Enter', () => list.selectOne());
+      manager.on('Enter', () => list.selectOne(), {
+        preventDefault: !this.nav()
+      });
     }
     if (this.inputs.multi() && this.followFocus()) {
       manager.on([Modifier.Ctrl, Modifier.Meta], this.prevKey, () => list.prev()).on([Modifier.Ctrl, Modifier.Meta], this.nextKey, () => list.next()).on([Modifier.Ctrl, Modifier.Meta], this.expandKey, () => this.expand()).on([Modifier.Ctrl, Modifier.Meta], this.collapseKey, () => this.collapse()).on([Modifier.Ctrl, Modifier.Meta], ' ', () => list.toggle()).on([Modifier.Ctrl, Modifier.Meta], 'Enter', () => list.toggle()).on([Modifier.Ctrl, Modifier.Meta], 'Home', () => list.first()).on([Modifier.Ctrl, Modifier.Meta], 'End', () => list.last()).on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
@@ -2189,7 +2070,7 @@ class TreePattern {
   allItems;
   disabled;
   activeItem = signal(undefined);
-  skipDisabled;
+  softDisabled;
   wrap;
   orientation;
   textDirection;
@@ -2206,7 +2087,7 @@ class TreePattern {
     this.focusMode = inputs.focusMode;
     this.disabled = inputs.disabled;
     this.activeItem = inputs.activeItem;
-    this.skipDisabled = inputs.skipDisabled;
+    this.softDisabled = inputs.softDisabled;
     this.wrap = inputs.wrap;
     this.orientation = inputs.orientation;
     this.textDirection = inputs.textDirection;
@@ -2308,9 +2189,9 @@ class ComboboxTreePattern extends TreePattern {
   inputs;
   isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;
   role = () => 'tree';
-  activeId = computed(() => this.listBehavior.activedescendant());
+  activeId = computed(() => this.listBehavior.activeDescendant());
   items = computed(() => this.inputs.allItems());
-  tabindex = () => -1;
+  tabIndex = () => -1;
   constructor(inputs) {
     if (inputs.combobox()) {
       inputs.multi = () => false;
@@ -2330,9 +2211,10 @@ class ComboboxTreePattern extends TreePattern {
   first = () => this.listBehavior.first();
   unfocus = () => this.listBehavior.unfocus();
   select = item => this.listBehavior.select(item);
+  toggle = item => this.listBehavior.toggle(item);
   clearSelection = () => this.listBehavior.deselectAll();
   getItem = e => this._getItem(e);
-  getSelectedItem = () => this.inputs.allItems().find(i => i.selected());
+  getSelectedItems = () => this.inputs.allItems().filter(item => item.selected());
   setValue = value => this.inputs.value.set(value ? [value] : []);
   expandItem = () => this.expand();
   collapseItem = () => this.collapse();
@@ -2341,7 +2223,116 @@ class ComboboxTreePattern extends TreePattern {
   }
   expandAll = () => this.items().forEach(item => item.expansion.open());
   collapseAll = () => this.items().forEach(item => item.expansion.close());
+  isItemSelectable = (item = this.inputs.activeItem()) => {
+    return item ? item.selectable() : false;
+  };
+}
+
+class DeferredContentAware {
+  contentVisible = signal(false, ...(ngDevMode ? [{
+    debugName: "contentVisible"
+  }] : []));
+  preserveContent = model(false, ...(ngDevMode ? [{
+    debugName: "preserveContent"
+  }] : []));
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: DeferredContentAware,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "20.2.0-next.2",
+    type: DeferredContentAware,
+    isStandalone: true,
+    inputs: {
+      preserveContent: {
+        classPropertyName: "preserveContent",
+        publicName: "preserveContent",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      }
+    },
+    outputs: {
+      preserveContent: "preserveContentChange"
+    },
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: DeferredContentAware,
+  decorators: [{
+    type: Directive
+  }]
+});
+class DeferredContent {
+  _deferredContentAware = inject(DeferredContentAware, {
+    optional: true
+  });
+  _templateRef = inject(TemplateRef);
+  _viewContainerRef = inject(ViewContainerRef);
+  _currentViewRef = null;
+  _isRendered = false;
+  deferredContentAware = signal(this._deferredContentAware, ...(ngDevMode ? [{
+    debugName: "deferredContentAware"
+  }] : []));
+  constructor() {
+    afterRenderEffect(() => {
+      if (this.deferredContentAware()?.contentVisible()) {
+        if (!this._isRendered) {
+          this._destroyContent();
+          this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
+          this._isRendered = true;
+        }
+      } else if (!this.deferredContentAware()?.preserveContent()) {
+        this._destroyContent();
+        this._isRendered = false;
+      }
+    });
+  }
+  ngOnDestroy() {
+    this._destroyContent();
+  }
+  _destroyContent() {
+    const ref = this._currentViewRef;
+    if (ref && !ref.destroyed) {
+      ref.destroy();
+      this._currentViewRef = null;
+    }
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: DeferredContent,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    type: DeferredContent,
+    isStandalone: true,
+    ngImport: i0
+  });
 }
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: DeferredContent,
+  decorators: [{
+    type: Directive
+  }],
+  ctorParameters: () => []
+});
 
-export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern, ComboboxListboxPattern, ComboboxPattern, ComboboxTreePattern, ListboxPattern, MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern, OptionPattern, RadioButtonPattern, RadioGroupPattern, TabListPattern, TabPanelPattern, TabPattern, ToolbarPattern, ToolbarRadioGroupPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern, TreeItemPattern, TreePattern, convertGetterSetterToWritableSignalLike };
+export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern, ComboboxListboxPattern, ComboboxPattern, ComboboxTreePattern, DeferredContent, DeferredContentAware, ListboxPattern, MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern, OptionPattern, TabListPattern, TabPanelPattern, TabPattern, ToolbarPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern, TreeItemPattern, TreePattern, convertGetterSetterToWritableSignalLike };
 //# sourceMappingURL=private.mjs.map