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

package/fesm2022/_widget-chunk.mjs

@@ -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) {
@@ -130,7 +135,6 @@ class PointerEventManager extends EventManager {
 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(() => {
@@ -280,7 +284,7 @@ class GridFocus {
   constructor(inputs) {
     this.inputs = inputs;
   }
-  getCellTabindex(cell) {
+  getCellTabIndex(cell) {
     if (this.gridDisabled()) {
       return -1;
     }
@@ -290,7 +294,7 @@ class GridFocus {
     return this.activeCell() === cell ? 0 : -1;
   }
   isFocusable(cell) {
-    return !cell.disabled() || !this.inputs.skipDisabled();
+    return !cell.disabled() || this.inputs.softDisabled();
   }
   focusCell(cell) {
     if (this.gridDisabled()) {
@@ -349,37 +353,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();
@@ -406,11 +411,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 +431,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 +484,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 +509,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 +542,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 +592,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 +648,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 +719,110 @@ class GridPattern {
   disabled = computed(() => this.gridBehavior.gridDisabled());
   activeDescendant = computed(() => this.gridBehavior.activeDescendant());
   activeCell = computed(() => this.gridBehavior.focusBehavior.activeCell());
+  anchorCell = computed(() => this.inputs.enableSelection() && this.inputs.multi() ? this.gridBehavior.selectionAnchorCell() : undefined);
   pauseNavigation = computed(() => this.gridBehavior.data.cells().flat().reduce((res, c) => res || c.widgetActivated(), 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()).on(' ', () => 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);
   constructor(inputs) {
     this.inputs = inputs;
     this.gridBehavior = new Grid({
@@ -723,23 +843,23 @@ class GridPattern {
   onPointermove(event) {
     if (this.disabled()) return;
     if (!this.inputs.enableSelection()) return;
+    if (!this.inputs.enableRangeSelection()) return;
     if (!this.dragging()) return;
     const cell = this.inputs.getCell(event.target);
     if (!cell) return;
-    this.gridBehavior.rangeSelect(cell);
+    this.gridBehavior.gotoCell(cell, {
+      anchor: true
+    });
   }
   onPointerup(event) {
     if (!this.disabled()) {
       this.pointerup().handle(event);
     }
   }
-  onFocusIn(event) {
+  onFocusIn() {
     this.isFocused.set(true);
-    const cell = this.inputs.getCell(event.target);
-    if (!cell) return;
-    this.gridBehavior.gotoCell(cell);
+    this.hasBeenFocused.set(true);
   }
-  _maybeDeletion = signal(false);
   onFocusOut(event) {
     const parentEl = this.inputs.element();
     const targetEl = event.relatedTarget;
@@ -749,15 +869,16 @@ class GridPattern {
     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 (this._maybeDeletion()) {
-      this._maybeDeletion.set(false);
-    }
+    this._maybeDeletion.set(false);
   }
   focusEffect() {
     const activeCell = this.activeCell();
@@ -795,6 +916,7 @@ class GridCellPattern {
   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);
+  anchor = computed(() => this.inputs.grid().anchorCell() === this ? true : undefined);
   _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);