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

package/fesm2022/_widget-chunk.mjs

@@ -1,4 +1,4 @@
-import { computed, signal, linkedSignal } from '@angular/core';
+import { signal, computed, linkedSignal, untracked } from '@angular/core';
 
 var Modifier;
 (function (Modifier) {
@@ -46,23 +46,28 @@ class KeyboardEventManager extends EventManager {
     const {
       modifiers,
       key,
-      handler
+      handler,
+      options
     } = this._normalizeInputs(...args);
     this.configs.push({
       handler: handler,
       matcher: event => this._isMatch(event, key, modifiers),
-      ...this.options
+      ...this.options,
+      ...options
     });
     return this;
   }
   _normalizeInputs(...args) {
-    const key = args.length === 3 ? args[1] : args[0];
-    const handler = args.length === 3 ? args[2] : args[1];
-    const modifiers = args.length === 3 ? args[0] : Modifier.None;
+    const withModifiers = Array.isArray(args[0]) || args[0] in Modifier;
+    const modifiers = withModifiers ? args[0] : Modifier.None;
+    const key = withModifiers ? args[1] : args[0];
+    const handler = withModifiers ? args[2] : args[1];
+    const options = withModifiers ? args[3] : args[2];
     return {
       key: key,
       handler: handler,
-      modifiers: modifiers
+      modifiers: modifiers,
+      options: options ?? {}
     };
   }
   _isMatch(event, key, modifiers) {
@@ -127,10 +132,121 @@ class PointerEventManager extends EventManager {
   }
 }
 
+class ListFocus {
+  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;
+  });
+  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;
+  }
+  _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];
+      }
+    }
+    return;
+  }
+}
+
 class GridData {
   inputs;
   cells;
-  rowCount = computed(() => this.cells().length);
   maxRowCount = computed(() => Math.max(...this._rowCountByCol().values(), 0));
   maxColCount = computed(() => Math.max(...this._colCountsByRow().values(), 0));
   _coordsMap = computed(() => {
@@ -220,6 +336,9 @@ class GridData {
     this.inputs = inputs;
     this.cells = this.inputs.cells;
   }
+  hasCell(cell) {
+    return this._coordsMap().has(cell);
+  }
   getCell(rowCol) {
     return this._cellMap().get(`${rowCol.row}:${rowCol.col}`);
   }
@@ -280,7 +399,7 @@ class GridFocus {
   constructor(inputs) {
     this.inputs = inputs;
   }
-  getCellTabindex(cell) {
+  getCellTabIndex(cell) {
     if (this.gridDisabled()) {
       return -1;
     }
@@ -290,7 +409,7 @@ class GridFocus {
     return this.activeCell() === cell ? 0 : -1;
   }
   isFocusable(cell) {
-    return !cell.disabled() || !this.inputs.skipDisabled();
+    return this.inputs.grid.hasCell(cell) && (!cell.disabled() || this.inputs.softDisabled());
   }
   focusCell(cell) {
     if (this.gridDisabled()) {
@@ -349,37 +468,38 @@ class GridNavigation {
   gotoCoords(coords) {
     return this.inputs.gridFocus.focusCoordinates(coords);
   }
-  peek(direction, fromCoords, wrap) {
+  peek(direction, fromCoords, wrap, allowDisabled) {
     wrap = wrap ?? (direction.row !== undefined ? this.inputs.rowWrap() : this.inputs.colWrap());
-    return this._peekDirectional(direction, fromCoords, wrap);
+    return this._peekDirectional(direction, fromCoords, wrap, allowDisabled);
   }
   advance(direction) {
     const nextCoords = this.peek(direction, this.inputs.gridFocus.activeCoords());
     return !!nextCoords && this.gotoCoords(nextCoords);
   }
-  peekFirst(row) {
+  peekFirst(row, allowDisabled) {
     const fromCoords = {
       row: row ?? 0,
       col: -1
     };
-    return row === undefined ? this._peekDirectional(direction.Right, fromCoords, 'continuous') : this._peekDirectional(direction.Right, fromCoords, 'nowrap');
+    return row === undefined ? this._peekDirectional(direction.Right, fromCoords, 'continuous', allowDisabled) : this._peekDirectional(direction.Right, fromCoords, 'nowrap', allowDisabled);
   }
   first(row) {
     const nextCoords = this.peekFirst(row);
     return !!nextCoords && this.gotoCoords(nextCoords);
   }
-  peekLast(row) {
+  peekLast(row, allowDisabled) {
     const fromCoords = {
       row: row ?? this.inputs.grid.maxRowCount() - 1,
       col: this.inputs.grid.maxColCount()
     };
-    return row === undefined ? this._peekDirectional(direction.Left, fromCoords, 'continuous') : this._peekDirectional(direction.Left, fromCoords, 'nowrap');
+    return row === undefined ? this._peekDirectional(direction.Left, fromCoords, 'continuous', allowDisabled) : this._peekDirectional(direction.Left, fromCoords, 'nowrap', allowDisabled);
   }
   last(row) {
     const nextCoords = this.peekLast(row);
     return !!nextCoords && this.gotoCoords(nextCoords);
   }
-  _peekDirectional(delta, fromCoords, wrap) {
+  _peekDirectional(delta, fromCoords, wrap, allowDisabled = false) {
+    if (this.inputs.gridFocus.gridDisabled()) return undefined;
     const fromCell = this.inputs.grid.getCell(fromCoords);
     const maxRowCount = this.inputs.grid.maxRowCount();
     const maxColCount = this.inputs.grid.maxColCount();
@@ -390,11 +510,13 @@ class GridNavigation {
     };
     for (let step = 0; step < this._maxSteps(); step++) {
       const isWrapping = nextCoords.col + colDelta < 0 || nextCoords.col + colDelta >= maxColCount || nextCoords.row + rowDelta < 0 || nextCoords.row + rowDelta >= maxRowCount;
-      if (wrap === 'nowrap' && isWrapping) return;
+      if (wrap === 'nowrap' && isWrapping) return undefined;
       if (wrap === 'continuous') {
         const generalDelta = delta.row ?? delta.col;
         const rowStep = isWrapping ? generalDelta : rowDelta;
         const colStep = isWrapping ? generalDelta : colDelta;
+        const bothWrapping = nextCoords.row + rowStep >= maxRowCount && nextCoords.col + colStep >= maxColCount || nextCoords.row + rowStep < 0 && nextCoords.col + colStep < 0;
+        if (bothWrapping) return undefined;
         nextCoords = {
           row: (nextCoords.row + rowStep + maxRowCount) % maxRowCount,
           col: (nextCoords.col + colStep + maxColCount) % maxColCount
@@ -406,11 +528,17 @@ class GridNavigation {
           col: (nextCoords.col + colDelta + maxColCount) % maxColCount
         };
       }
+      if (wrap === 'nowrap') {
+        nextCoords = {
+          row: nextCoords.row + rowDelta,
+          col: nextCoords.col + colDelta
+        };
+      }
       if (nextCoords.row === fromCoords.row && nextCoords.col === fromCoords.col) {
         return undefined;
       }
       const nextCell = this.inputs.grid.getCell(nextCoords);
-      if (nextCell !== undefined && nextCell !== fromCell && this.inputs.gridFocus.isFocusable(nextCell)) {
+      if (nextCell !== undefined && nextCell !== fromCell && (allowDisabled || this.inputs.gridFocus.isFocusable(nextCell))) {
         return nextCoords;
       }
     }
@@ -420,45 +548,45 @@ class GridNavigation {
 
 class GridSelection {
   inputs;
+  _undoList = signal([]);
   constructor(inputs) {
     this.inputs = inputs;
   }
-  select(fromCoords, toCoords) {
-    for (const cell of this._validCells(fromCoords, toCoords ?? fromCoords)) {
-      cell.selected.set(true);
+  undo() {
+    for (const [cell, oldState] of this._undoList()) {
+      cell.selected.set(oldState);
     }
+    this._undoList.set([]);
+  }
+  select(fromCoords, toCoords) {
+    this._updateState(fromCoords, toCoords ?? fromCoords, () => true);
   }
   deselect(fromCoords, toCoords) {
-    for (const cell of this._validCells(fromCoords, toCoords ?? fromCoords)) {
-      cell.selected.set(false);
-    }
+    this._updateState(fromCoords, toCoords ?? fromCoords, () => false);
   }
   toggle(fromCoords, toCoords) {
-    for (const cell of this._validCells(fromCoords, toCoords ?? fromCoords)) {
-      cell.selected.update(state => !state);
-    }
+    this._updateState(fromCoords, toCoords ?? fromCoords, oldState => !oldState);
   }
   selectAll() {
-    for (const cell of this._validCells({
+    this._updateState({
       row: 0,
       col: 0
     }, {
       row: this.inputs.grid.maxRowCount(),
       col: this.inputs.grid.maxColCount()
-    })) {
-      cell.selected.set(true);
-    }
+    }, () => true);
   }
   deselectAll() {
-    for (const cell of this._validCells({
+    this._updateState({
       row: 0,
       col: 0
     }, {
       row: this.inputs.grid.maxRowCount(),
       col: this.inputs.grid.maxColCount()
-    })) {
-      cell.selected.set(false);
-    }
+    }, () => false);
+  }
+  isSelectable(cell) {
+    return cell.selectable() && !cell.disabled();
   }
   *_validCells(fromCoords, toCoords) {
     const startRow = Math.min(fromCoords.row, toCoords.row);
@@ -473,14 +601,22 @@ class GridSelection {
           col
         });
         if (cell === undefined) continue;
-        if (!cell.selectable()) continue;
-        if (cell.disabled()) continue;
+        if (!this.isSelectable(cell)) continue;
         if (visited.has(cell)) continue;
         visited.add(cell);
         yield cell;
       }
     }
   }
+  _updateState(fromCoords, toCoords, stateFn) {
+    const undoList = [];
+    for (const cell of this._validCells(fromCoords, toCoords)) {
+      const oldState = cell.selected();
+      undoList.push([cell, oldState]);
+      cell.selected.set(stateFn(oldState));
+    }
+    this._undoList.set(undoList);
+  }
 }
 
 class Grid {
@@ -490,9 +626,12 @@ class Grid {
   navigationBehavior;
   selectionBehavior;
   selectionAnchor = linkedSignal(() => this.focusBehavior.activeCoords());
-  gridTabIndex = computed(() => this.focusBehavior.gridTabIndex());
-  gridDisabled = computed(() => this.focusBehavior.gridDisabled());
-  activeDescendant = computed(() => this.focusBehavior.activeDescendant());
+  selectionAnchorCell = computed(() => this.data.getCell(this.selectionAnchor()));
+  selectionStabled = signal(true);
+  allSelected = computed(() => this.data.cells().flat().filter(c => this.selectionBehavior.isSelectable(c)).every(c => c.selected()));
+  gridTabIndex = () => this.focusBehavior.gridTabIndex();
+  gridDisabled = () => this.focusBehavior.gridDisabled();
+  activeDescendant = () => this.focusBehavior.activeDescendant();
   constructor(inputs) {
     this.inputs = inputs;
     this.data = new GridData(inputs);
@@ -520,51 +659,33 @@ class Grid {
     return index !== undefined ? index + 1 : undefined;
   }
   cellTabIndex(cell) {
-    return this.focusBehavior.getCellTabindex(cell);
-  }
-  up() {
-    return this.navigationBehavior.advance(direction.Up);
-  }
-  rangeSelectUp() {
-    const coords = this.navigationBehavior.peek(direction.Up, this.selectionAnchor());
-    if (coords === undefined) return;
-    this._rangeSelectCoords(coords);
-  }
-  down() {
-    return this.navigationBehavior.advance(direction.Down);
+    return this.focusBehavior.getCellTabIndex(cell);
   }
-  rangeSelectDown() {
-    const coords = this.navigationBehavior.peek(direction.Down, this.selectionAnchor());
-    if (coords === undefined) return;
-    this._rangeSelectCoords(coords);
+  up(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peek(direction.Up, this.selectionAnchor(), 'nowrap', true)) : this.navigationBehavior.advance(direction.Up), opts);
   }
-  left() {
-    return this.navigationBehavior.advance(direction.Left);
+  down(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peek(direction.Down, this.selectionAnchor(), 'nowrap', true)) : this.navigationBehavior.advance(direction.Down), opts);
   }
-  rangeSelectLeft() {
-    const coords = this.navigationBehavior.peek(direction.Left, this.selectionAnchor());
-    if (coords === undefined) return;
-    this._rangeSelectCoords(coords);
+  left(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peek(direction.Left, this.selectionAnchor(), 'nowrap', true)) : this.navigationBehavior.advance(direction.Left), opts);
   }
-  right() {
-    return this.navigationBehavior.advance(direction.Right);
+  right(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peek(direction.Right, this.selectionAnchor(), 'nowrap', true)) : this.navigationBehavior.advance(direction.Right), opts);
   }
-  rangeSelectRight() {
-    const coords = this.navigationBehavior.peek(direction.Right, this.selectionAnchor());
-    if (coords === undefined) return;
-    this._rangeSelectCoords(coords);
+  first(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peekFirst(undefined, true)) : this.navigationBehavior.first(), opts);
   }
-  first() {
-    return this.navigationBehavior.first();
-  }
-  firstInRow() {
-    return this.navigationBehavior.first(this.focusBehavior.activeCoords().row);
+  firstInRow(opts = {}) {
+    const row = this.focusBehavior.activeCoords().row;
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peekFirst(row, true)) : this.navigationBehavior.first(row), opts);
   }
-  last() {
-    return this.navigationBehavior.last();
+  last(opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peekLast(undefined, true)) : this.navigationBehavior.last(), opts);
   }
-  lastInRow() {
-    return this.navigationBehavior.last(this.focusBehavior.activeCoords().row);
+  lastInRow(opts = {}) {
+    const row = this.focusBehavior.activeCoords().row;
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.navigationBehavior.peekLast(row, true)) : this.navigationBehavior.last(row), opts);
   }
   selectRow() {
     const row = this.focusBehavior.activeCoords().row;
@@ -588,50 +709,48 @@ class Grid {
       col
     });
   }
-  selectAll() {
-    this.selectionBehavior.selectAll();
+  select() {
+    this.selectionBehavior.select(this.focusBehavior.activeCoords());
   }
-  gotoCell(cell) {
-    return this.navigationBehavior.gotoCell(cell);
-  }
-  toggleSelect(cell) {
-    const coords = this.data.getCoords(cell);
-    if (coords === undefined) return;
-    this.selectionBehavior.toggle(coords);
-  }
-  rangeSelect(cell) {
-    const coords = this.data.getCoords(cell);
-    if (coords === undefined) return;
-    this._rangeSelectCoords(coords);
-  }
-  _rangeSelectCoords(coords) {
-    const activeCell = this.focusBehavior.activeCell();
-    const anchorCell = this.data.getCell(coords);
-    if (activeCell === undefined || anchorCell === undefined) {
+  deselect() {
+    this.selectionBehavior.deselect(this.focusBehavior.activeCoords());
+  }
+  toggle() {
+    this.selectionBehavior.toggle(this.focusBehavior.activeCoords());
+  }
+  toggleOne() {
+    const selected = !!this.focusBehavior.activeCell()?.selected();
+    if (selected) {
+      this.deselect();
       return;
     }
-    const allCoords = [...this.data.getAllCoords(activeCell), ...this.data.getAllCoords(anchorCell)];
-    const allRows = allCoords.map(c => c.row);
-    const allCols = allCoords.map(c => c.col);
-    const fromCoords = {
-      row: Math.min(...allRows),
-      col: Math.min(...allCols)
-    };
-    const toCoords = {
-      row: Math.max(...allRows),
-      col: Math.max(...allCols)
-    };
+    this.deselectAll();
+    this.select();
+  }
+  selectAll() {
+    this.selectionBehavior.selectAll();
+  }
+  deselectAll() {
     this.selectionBehavior.deselectAll();
-    this.selectionBehavior.select(fromCoords, toCoords);
-    this.selectionAnchor.set(coords);
+  }
+  gotoCell(cell, opts = {}) {
+    return this._navigateWithSelection(() => opts.anchor ? this._updateSelectionAnchor(() => this.data.getCoords(cell)) : this.navigationBehavior.gotoCell(cell), opts);
+  }
+  setDefaultState() {
+    const focusableSelectedCell = this.data.cells().flat().filter(c => this.focusBehavior.isFocusable(c)).find(c => c.selected());
+    if (focusableSelectedCell !== undefined) {
+      this.focusBehavior.focusCell(focusableSelectedCell);
+      return true;
+    }
+    const firstFocusableCoords = this.navigationBehavior.peekFirst();
+    if (firstFocusableCoords !== undefined) {
+      return this.focusBehavior.focusCoordinates(firstFocusableCoords);
+    }
+    return false;
   }
   resetState() {
     if (this.focusBehavior.stateEmpty()) {
-      const firstFocusableCoords = this.navigationBehavior.peekFirst();
-      if (firstFocusableCoords === undefined) {
-        return false;
-      }
-      return this.focusBehavior.focusCoordinates(firstFocusableCoords);
+      return this.setDefaultState();
     }
     if (this.focusBehavior.stateStale()) {
       if (this.focusBehavior.focusCell(this.focusBehavior.activeCell())) {
@@ -646,6 +765,67 @@ class Grid {
     }
     return false;
   }
+  _updateSelectionAnchor(peekFn) {
+    const coords = peekFn();
+    const success = coords !== undefined;
+    if (!success) return false;
+    this.selectionAnchor.set(coords);
+    return success;
+  }
+  _updateRangeSelection() {
+    if (!this.selectionStabled()) {
+      this.selectionBehavior.undo();
+    }
+    this.selectionBehavior.select(...this._getSelectionCoords(this.focusBehavior.activeCoords(), this.selectionAnchor()));
+  }
+  _getSelectionCoords(startCoords, endCoords) {
+    const startCell = this.data.getCell(startCoords);
+    const endCell = this.data.getCell(endCoords);
+    const allCoords = [...this.data.getAllCoords(startCell), ...this.data.getAllCoords(endCell)];
+    const allRows = allCoords.map(c => c.row);
+    const allCols = allCoords.map(c => c.col);
+    const fromCoords = {
+      row: Math.min(...allRows),
+      col: Math.min(...allCols)
+    };
+    const toCoords = {
+      row: Math.max(...allRows),
+      col: Math.max(...allCols)
+    };
+    return [fromCoords, toCoords];
+  }
+  _navigateWithSelection(op, opts = {}) {
+    const success = op();
+    if (!success) return false;
+    if (opts.anchor) {
+      this._updateRangeSelection();
+      this.selectionStabled.set(false);
+      return success;
+    }
+    this.selectionStabled.set(true);
+    if (opts.select) {
+      this.select();
+      return success;
+    }
+    if (opts.selectOne) {
+      this.deselectAll();
+      this.select();
+      return success;
+    }
+    if (opts.toggle) {
+      this.toggle();
+      return success;
+    }
+    if (opts.toggleOne) {
+      const selected = !!this.focusBehavior.activeCell()?.selected();
+      this.deselectAll();
+      if (!selected) {
+        this.select();
+      }
+      return success;
+    }
+    return success;
+  }
 }
 
 class GridPattern {
@@ -656,53 +836,111 @@ class GridPattern {
   disabled = computed(() => this.gridBehavior.gridDisabled());
   activeDescendant = computed(() => this.gridBehavior.activeDescendant());
   activeCell = computed(() => this.gridBehavior.focusBehavior.activeCell());
-  pauseNavigation = computed(() => this.gridBehavior.data.cells().flat().reduce((res, c) => res || c.widgetActivated(), false));
+  anchorCell = computed(() => this.inputs.enableSelection() && this.inputs.multi() ? this.gridBehavior.selectionAnchorCell() : undefined);
+  pauseNavigation = computed(() => this.gridBehavior.data.cells().flat().reduce((res, c) => res || c.isActivated(), false));
   isFocused = signal(false);
+  hasBeenFocused = signal(false);
   dragging = signal(false);
+  prevColKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft');
+  nextColKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight');
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
     if (this.pauseNavigation()) {
       return manager;
     }
-    manager.on('ArrowUp', () => this.gridBehavior.up()).on('ArrowDown', () => this.gridBehavior.down()).on('ArrowLeft', () => this.gridBehavior.left()).on('ArrowRight', () => this.gridBehavior.right()).on('Home', () => this.gridBehavior.firstInRow()).on('End', () => this.gridBehavior.lastInRow()).on([Modifier.Ctrl], 'Home', () => this.gridBehavior.first()).on([Modifier.Ctrl], 'End', () => this.gridBehavior.last());
-    if (this.inputs.enableSelection()) {
-      manager.on(Modifier.Shift, 'ArrowUp', () => this.gridBehavior.rangeSelectUp()).on(Modifier.Shift, 'ArrowDown', () => this.gridBehavior.rangeSelectDown()).on(Modifier.Shift, 'ArrowLeft', () => this.gridBehavior.rangeSelectLeft()).on(Modifier.Shift, 'ArrowRight', () => this.gridBehavior.rangeSelectRight()).on([Modifier.Ctrl, Modifier.Meta], 'A', () => this.gridBehavior.selectAll()).on([Modifier.Shift], ' ', () => this.gridBehavior.selectRow()).on([Modifier.Ctrl, Modifier.Meta], ' ', () => this.gridBehavior.selectCol());
+    const opts = {
+      selectOne: this.inputs.enableSelection() && this.inputs.selectionMode() === 'follow'
+    };
+    manager.on('ArrowUp', () => this.gridBehavior.up(opts)).on('ArrowDown', () => this.gridBehavior.down(opts)).on(this.prevColKey(), () => this.gridBehavior.left(opts)).on(this.nextColKey(), () => this.gridBehavior.right(opts)).on('Home', () => this.gridBehavior.firstInRow(opts)).on('End', () => this.gridBehavior.lastInRow(opts)).on([Modifier.Ctrl], 'Home', () => this.gridBehavior.first(opts)).on([Modifier.Ctrl], 'End', () => this.gridBehavior.last(opts));
+    if (this.inputs.enableSelection() && this.inputs.selectionMode() === 'explicit') {
+      manager.on(/Enter| /, () => this.inputs.multi() ? this.gridBehavior.toggle() : this.gridBehavior.toggleOne());
+    }
+    if (this.inputs.enableSelection() && this.inputs.enableRangeSelection()) {
+      manager.on(Modifier.Shift, 'ArrowUp', () => this.gridBehavior.up({
+        anchor: true
+      })).on(Modifier.Shift, 'ArrowDown', () => this.gridBehavior.down({
+        anchor: true
+      })).on(Modifier.Shift, this.prevColKey(), () => this.gridBehavior.left({
+        anchor: true
+      })).on(Modifier.Shift, this.nextColKey(), () => this.gridBehavior.right({
+        anchor: true
+      })).on(Modifier.Shift, 'Home', () => this.gridBehavior.firstInRow({
+        anchor: true
+      })).on(Modifier.Shift, 'End', () => this.gridBehavior.lastInRow({
+        anchor: true
+      })).on([Modifier.Ctrl | Modifier.Shift], 'Home', () => this.gridBehavior.first({
+        anchor: true
+      })).on([Modifier.Ctrl | Modifier.Shift], 'End', () => this.gridBehavior.last({
+        anchor: true
+      })).on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
+        if (this.gridBehavior.allSelected()) {
+          this.gridBehavior.deselectAll();
+        } else {
+          this.gridBehavior.selectAll();
+        }
+      }).on([Modifier.Shift], ' ', () => this.gridBehavior.selectRow()).on([Modifier.Ctrl, Modifier.Meta], ' ', () => this.gridBehavior.selectCol());
     }
     return manager;
   });
   pointerdown = computed(() => {
     const manager = new PointerEventManager();
-    manager.on(e => {
-      const cell = this.inputs.getCell(e.target);
-      if (!cell) return;
-      this.gridBehavior.gotoCell(cell);
-      if (this.inputs.enableSelection()) {
-        this.dragging.set(true);
-      }
-    });
-    if (this.inputs.enableSelection()) {
-      manager.on([Modifier.Ctrl, Modifier.Meta], e => {
+    if (!this.inputs.enableSelection()) {
+      manager.on(e => {
         const cell = this.inputs.getCell(e.target);
-        if (!cell) return;
-        this.gridBehavior.toggleSelect(cell);
-      }).on(Modifier.Shift, e => {
+        if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
+        this.gridBehavior.gotoCell(cell);
+      });
+    }
+    if (this.inputs.enableSelection()) {
+      manager.on(e => {
         const cell = this.inputs.getCell(e.target);
-        if (!cell) return;
-        this.gridBehavior.rangeSelect(cell);
-        this.dragging.set(true);
+        if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
+        this.gridBehavior.gotoCell(cell, {
+          selectOne: this.inputs.selectionMode() === 'follow',
+          toggleOne: this.inputs.selectionMode() === 'explicit' && !this.inputs.multi(),
+          toggle: this.inputs.selectionMode() === 'explicit' && this.inputs.multi()
+        });
+        if (this.inputs.multi() && this.inputs.enableRangeSelection()) {
+          this.dragging.set(true);
+        }
       });
+      if (this.inputs.multi()) {
+        manager.on([Modifier.Ctrl, Modifier.Meta], e => {
+          const cell = this.inputs.getCell(e.target);
+          if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
+          this.gridBehavior.gotoCell(cell, {
+            toggle: true
+          });
+          if (this.inputs.enableRangeSelection()) {
+            this.dragging.set(true);
+          }
+        });
+        if (this.inputs.enableRangeSelection()) {
+          manager.on(Modifier.Shift, e => {
+            const cell = this.inputs.getCell(e.target);
+            if (!cell) return;
+            this.gridBehavior.gotoCell(cell, {
+              anchor: true
+            });
+            this.dragging.set(true);
+          });
+        }
+      }
     }
     return manager;
   });
   pointerup = computed(() => {
     const manager = new PointerEventManager();
-    if (this.inputs.enableSelection()) {
-      manager.on([Modifier.Shift, Modifier.None], () => {
+    if (this.inputs.enableSelection() && this.inputs.enableRangeSelection()) {
+      manager.on([Modifier.Shift, Modifier.Ctrl, Modifier.Meta, Modifier.None], () => {
         this.dragging.set(false);
       });
     }
     return manager;
   });
+  _maybeDeletion = signal(false);
+  _deletion = signal(false);
+  _stateStale = signal(false);
   constructor(inputs) {
     this.inputs = inputs;
     this.gridBehavior = new Grid({
@@ -711,65 +949,100 @@ class GridPattern {
     });
   }
   onKeydown(event) {
-    if (!this.disabled()) {
-      this.keydown().handle(event);
-    }
+    if (this.disabled()) return;
+    this.activeCell()?.onKeydown(event);
+    this.keydown().handle(event);
   }
   onPointerdown(event) {
-    if (!this.disabled()) {
-      this.pointerdown().handle(event);
-    }
+    if (this.disabled()) return;
+    this.pointerdown().handle(event);
   }
   onPointermove(event) {
-    if (this.disabled()) return;
-    if (!this.inputs.enableSelection()) return;
-    if (!this.dragging()) return;
+    if (this.disabled() || !this.inputs.enableSelection() || !this.inputs.enableRangeSelection() || !this.dragging()) {
+      return;
+    }
     const cell = this.inputs.getCell(event.target);
-    if (!cell) return;
-    this.gridBehavior.rangeSelect(cell);
+    if (cell !== undefined) {
+      this.gridBehavior.gotoCell(cell, {
+        anchor: true
+      });
+    }
   }
   onPointerup(event) {
-    if (!this.disabled()) {
-      this.pointerup().handle(event);
-    }
+    if (this.disabled()) return;
+    this.pointerup().handle(event);
   }
   onFocusIn(event) {
     this.isFocused.set(true);
+    this.hasBeenFocused.set(true);
+    if (this.dragging()) return;
     const cell = this.inputs.getCell(event.target);
-    if (!cell) return;
-    this.gridBehavior.gotoCell(cell);
+    if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
+    cell.onFocusIn(event);
+    if (cell !== this.activeCell()) {
+      this.gridBehavior.gotoCell(cell);
+    }
   }
-  _maybeDeletion = signal(false);
   onFocusOut(event) {
-    const parentEl = this.inputs.element();
-    const targetEl = event.relatedTarget;
-    if (targetEl === null) {
+    const blurTarget = event.target;
+    const cell = this.inputs.getCell(blurTarget);
+    cell?.onFocusOut(event);
+    const focusTarget = event.relatedTarget;
+    if (this.inputs.element().contains(focusTarget)) return;
+    if (focusTarget === null) {
       this._maybeDeletion.set(true);
     }
-    if (parentEl.contains(targetEl)) return;
     this.isFocused.set(false);
   }
-  _deletion = signal(false);
+  setDefaultStateEffect() {
+    if (this.hasBeenFocused()) return;
+    this.gridBehavior.setDefaultState();
+  }
   resetStateEffect() {
     const hasReset = this.gridBehavior.resetState();
-    if (hasReset && this._maybeDeletion()) {
-      this._deletion.set(true);
+    if (hasReset) {
+      if (this._maybeDeletion()) {
+        this._deletion.set(true);
+      } else {
+        this._stateStale.set(true);
+      }
     }
-    if (this._maybeDeletion()) {
-      this._maybeDeletion.set(false);
+    this._maybeDeletion.set(false);
+  }
+  resetFocusEffect() {
+    const stateStale = this._stateStale();
+    if (!stateStale) return;
+    const isFocused = untracked(() => this.isFocused());
+    const isRoving = untracked(() => this.inputs.focusMode() === 'roving');
+    const activeCell = untracked(() => this.activeCell());
+    if (isRoving && activeCell !== undefined && isFocused) {
+      if (!activeCell.isFocused()) {
+        activeCell.focus();
+      }
     }
+    this._stateStale.set(false);
   }
-  focusEffect() {
-    const activeCell = this.activeCell();
-    const hasFocus = this.isFocused();
+  restoreFocusEffect() {
     const deletion = this._deletion();
-    const isRoving = this.inputs.focusMode() === 'roving';
-    if (activeCell !== undefined && isRoving && (hasFocus || deletion)) {
-      activeCell.element().focus();
-      if (deletion) {
-        this._deletion.set(false);
+    if (!deletion) return;
+    const isRoving = untracked(() => this.inputs.focusMode() === 'roving');
+    const activeCell = untracked(() => this.activeCell());
+    if (isRoving && activeCell !== undefined) {
+      if (!activeCell.isFocused()) {
+        activeCell.focus();
       }
     }
+    this._deletion.set(false);
+  }
+  focusEffect() {
+    const activeCell = this.activeCell();
+    const gridFocused = untracked(() => this.isFocused());
+    if (activeCell === undefined || !gridFocused) return;
+    const isRoving = untracked(() => this.inputs.focusMode() === 'roving');
+    const cellFocused = untracked(() => activeCell.isFocused());
+    if (isRoving && !cellFocused) {
+      activeCell.focus();
+    }
   }
 }
 
@@ -784,44 +1057,224 @@ class GridRowPattern {
 
 class GridCellPattern {
   inputs;
-  id;
-  disabled;
+  id = () => this.inputs.id();
+  element = () => this.inputs.element();
+  isFocused = signal(false);
   selected;
-  selectable;
-  rowSpan;
-  colSpan;
+  selectable = () => this.inputs.selectable();
+  disabled = () => this.inputs.disabled();
+  rowSpan = () => this.inputs.rowSpan();
+  colSpan = () => this.inputs.colSpan();
+  active = computed(() => this.inputs.grid().activeCell() === this);
+  anchor = computed(() => this.inputs.grid().anchorCell() === this ? true : undefined);
   ariaSelected = computed(() => this.inputs.grid().inputs.enableSelection() && this.selectable() ? this.selected() : undefined);
   ariaRowIndex = computed(() => this.inputs.row().rowIndex() ?? this.inputs.rowIndex() ?? this.inputs.grid().gridBehavior.rowIndex(this));
   ariaColIndex = computed(() => this.inputs.colIndex() ?? this.inputs.grid().gridBehavior.colIndex(this));
-  element = computed(() => this.inputs.widget()?.element() ?? this.inputs.element());
-  active = computed(() => this.inputs.grid().activeCell() === this);
   _tabIndex = computed(() => this.inputs.grid().gridBehavior.cellTabIndex(this));
-  tabIndex = computed(() => this.inputs.widget() !== undefined ? -1 : this._tabIndex());
-  widgetActivated = computed(() => this.inputs.widget()?.inputs.activate() ?? false);
+  tabIndex = computed(() => {
+    if (this.singleWidgetMode() || this.navigationActivated()) {
+      return -1;
+    }
+    return this._tabIndex();
+  });
+  singleWidgetMode = computed(() => this.inputs.widgets().length === 1);
+  multiWidgetMode = computed(() => this.inputs.widgets().length > 1);
+  navigationDisabled = computed(() => !this.multiWidgetMode() || !this.active() || this.inputs.disabled());
+  focusBehavior;
+  navigationBehavior;
+  activeWidget = linkedSignal(() => this.inputs.widgets().length > 0 ? this.inputs.widgets()[0] : undefined);
+  navigationActivated = signal(false);
+  widgetActivated = computed(() => this.inputs.widgets().some(w => w.isActivated()));
+  isActivated = computed(() => this.navigationActivated() || this.widgetActivated());
+  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.navigationActivated()) {
+      manager.on('Enter', () => this.startNavigation());
+      return manager;
+    }
+    manager.on('Escape', () => this.stopNavigation()).on(this.prevKey(), () => this._advance(() => this.navigationBehavior.prev({
+      focusElement: false
+    }))).on(this.nextKey(), () => this._advance(() => this.navigationBehavior.next({
+      focusElement: false
+    }))).on('Home', () => this._advance(() => this.navigationBehavior.next({
+      focusElement: false
+    }))).on('End', () => this._advance(() => this.navigationBehavior.next({
+      focusElement: false
+    })));
+    return manager;
+  });
   constructor(inputs) {
     this.inputs = inputs;
-    this.id = inputs.id;
-    this.disabled = inputs.disabled;
-    this.rowSpan = inputs.rowSpan;
-    this.colSpan = inputs.colSpan;
     this.selected = inputs.selected;
-    this.selectable = inputs.selectable;
+    const listNavigationInputs = {
+      ...inputs,
+      items: inputs.widgets,
+      activeItem: this.activeWidget,
+      disabled: this.navigationDisabled,
+      focusMode: () => 'roving',
+      softDisabled: () => true
+    };
+    this.focusBehavior = new ListFocus(listNavigationInputs);
+    this.navigationBehavior = new ListNavigation({
+      ...listNavigationInputs,
+      focusManager: this.focusBehavior
+    });
+  }
+  onKeydown(event) {
+    if (this.disabled() || this.inputs.widgets().length === 0) return;
+    if (this.singleWidgetMode()) {
+      this.activeWidget().onKeydown(event);
+      return;
+    }
+    if (!this.navigationActivated()) {
+      this.keydown().handle(event);
+      return;
+    }
+    const widgetActivated = this.widgetActivated();
+    this.activeWidget().onKeydown(event);
+    if (!widgetActivated) {
+      this.keydown().handle(event);
+    }
+  }
+  onFocusIn(event) {
+    this.isFocused.set(true);
+    const focusTarget = event.target;
+    const widget = this.inputs.getWidget(focusTarget);
+    if (!widget) return;
+    widget.onFocusIn(event);
+    if (widget !== this.activeWidget()) {
+      this.navigationBehavior.goto(widget, {
+        focusElement: false
+      });
+    }
+    if (this.multiWidgetMode()) {
+      this.navigationActivated.set(true);
+    }
+  }
+  onFocusOut(event) {
+    const blurTarget = event.target;
+    const widget = this.inputs.getWidget(blurTarget);
+    widget?.onFocusOut(event);
+    const focusTarget = event.relatedTarget;
+    if (this.element().contains(focusTarget)) return;
+    this.isFocused.set(false);
+    this.navigationActivated.set(false);
+  }
+  focus() {
+    if (this.singleWidgetMode()) {
+      this.activeWidget()?.focus();
+    } else {
+      this.element().focus();
+    }
   }
   widgetTabIndex() {
-    return this._tabIndex();
+    if (this.singleWidgetMode()) {
+      return this._tabIndex();
+    }
+    return this.navigationActivated() ? 0 : -1;
+  }
+  startNavigation() {
+    if (this.navigationActivated()) return;
+    this.navigationActivated.set(true);
+    this.navigationBehavior.first();
+  }
+  stopNavigation() {
+    if (!this.navigationActivated()) return;
+    this.navigationActivated.set(false);
+    this.element().focus();
+  }
+  _advance(op) {
+    const success = op();
+    if (success) {
+      this.activeWidget()?.focus();
+    }
   }
 }
 
 class GridCellWidgetPattern {
   inputs;
-  element;
+  id = () => this.inputs.id();
+  element = () => this.inputs.element();
+  widgetHost = computed(() => this.inputs.focusTarget() ?? this.element());
+  index = computed(() => this.inputs.cell().inputs.widgets().indexOf(this));
+  disabled = computed(() => this.inputs.disabled() || this.inputs.cell().disabled());
   tabIndex = computed(() => this.inputs.cell().widgetTabIndex());
-  active = computed(() => this.inputs.cell().active());
+  active = computed(() => this.inputs.cell().activeWidget() === this);
+  isActivated = signal(false);
+  lastActivateEvent = signal(undefined);
+  lastDeactivateEvent = signal(undefined);
+  keydown = computed(() => {
+    const manager = new KeyboardEventManager();
+    if (this.inputs.widgetType() === 'simple') {
+      return manager;
+    }
+    if (this.isActivated()) {
+      manager.on('Escape', e => {
+        this.deactivate(e);
+        this.focus();
+      });
+      if (this.inputs.widgetType() === 'editable') {
+        manager.on('Enter', e => {
+          this.deactivate(e);
+          this.focus();
+        });
+      }
+      return manager;
+    }
+    manager.on('Enter', e => this.activate(e));
+    if (this.inputs.widgetType() === 'editable') {
+      manager.on([Modifier.Shift, Modifier.None], /^[a-zA-Z0-9]$/, e => this.activate(e), {
+        preventDefault: false
+      });
+    }
+    return manager;
+  });
   constructor(inputs) {
     this.inputs = inputs;
-    this.element = inputs.element;
+  }
+  onKeydown(event) {
+    if (this.disabled()) return;
+    this.keydown().handle(event);
+  }
+  onFocusIn(event) {
+    if (this.inputs.widgetType() === 'simple') return;
+    const focusTarget = event.target;
+    if (this.widgetHost().contains(focusTarget) && this.widgetHost() !== focusTarget) {
+      this.activate(event);
+    }
+  }
+  onFocusOut(event) {
+    const focusTarget = event.relatedTarget;
+    if (this.widgetHost().contains(focusTarget)) return;
+    this.deactivate(event);
+  }
+  focus() {
+    this.widgetHost().focus();
+  }
+  activate(event) {
+    if (this.isActivated()) return;
+    if (this.inputs.widgetType() === 'simple') return;
+    this.isActivated.set(true);
+    this.lastActivateEvent.set(event);
+  }
+  deactivate(event) {
+    if (!this.isActivated()) return;
+    this.isActivated.set(false);
+    this.lastDeactivateEvent.set(event);
   }
 }
 
-export { GridCellPattern, GridCellWidgetPattern, GridPattern, GridRowPattern, KeyboardEventManager, Modifier, PointerEventManager };
+export { GridCellPattern, GridCellWidgetPattern, GridPattern, GridRowPattern, KeyboardEventManager, ListFocus, ListNavigation, Modifier, PointerEventManager };
 //# sourceMappingURL=_widget-chunk.mjs.map