@ni/nimble-components 29.6.0 → 29.7.0

package/dist/all-components-bundle.js

@@ -16280,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 20 Jun 2024 19:54:16 GMT
+   * Generated on Tue, 25 Jun 2024 18:25:46 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16699,6 +16699,9 @@
   const keyEnter = "Enter";
   const keyEscape = "Escape";
   const keyHome = "Home";
+  const keyFunction2 = "F2";
+  const keyPageDown = "PageDown";
+  const keyPageUp = "PageUp";
   const keyShift = "Shift";
   const keySpace = " ";
   const keyTab = "Tab";
@@ -64433,6 +64436,20 @@ img.ProseMirror-separator {
       selected: 'selected',
       partiallySelected: 'partially-selected'
   };
+  /**
+   * @internal
+   * Table keyboard focus types
+   */
+  const TableFocusType = {
+      none: 'none',
+      columnHeader: 'columnHeader',
+      headerActions: 'headerActions',
+      row: 'row',
+      rowSelectionCheckbox: 'rowSelectionCheckbox',
+      cell: 'cell',
+      cellActionMenu: 'cellActionMenu',
+      cellContent: 'cellContent'
+  };
 
   /**
    * The possible operations to use when sorting a table column.
@@ -64514,6 +64531,13 @@ img.ProseMirror-separator {
           this.delegatedEvents = [];
           this.delegatedEventHandler = () => { };
       }
+      /**
+       * Gets the child elements in this cell view that should be able to be reached via Tab/ Shift-Tab,
+       * if any.
+       */
+      get tabbableChildren() {
+          return [];
+      }
       /**
        * Called if an element inside this cell view has focus, and this row/cell is being recycled.
        * Expected implementation is to commit changes as needed, and blur the focusable element (or close
@@ -64897,6 +64921,15 @@ img.ProseMirror-separator {
         --ni-private-column-divider-padding: 3px;
     }
 
+    :host(${focusVisible}) {
+        ${
+/* The table can briefly be focused in some keyboard nav cases (e.g. regaining focus and we
+need to scroll to the previously focused row first). Ensure that we don't get the browser-default
+focus outline in that case.
+) */ ''}
+        outline: none;
+    }
+
     .disable-select {
         ${userSelectNone}
     }
@@ -65027,6 +65060,10 @@ img.ProseMirror-separator {
         position: relative;
     }
 
+    .table-viewport${focusVisible} {
+        outline: none;
+    }
+
     .table-scroll {
         pointer-events: none;
         position: absolute;
@@ -65053,10 +65090,17 @@ img.ProseMirror-separator {
 
     .group-row {
         position: relative;
+        --ni-private-table-cell-focus-offset-multiplier: 0;
     }
 
     .row {
         position: relative;
+        --ni-private-table-cell-focus-offset-multiplier: 0;
+    }
+
+    .collapse-all-visible .row,
+    .collapse-all-visible .group-row {
+        --ni-private-table-cell-focus-offset-multiplier: 1;
     }
 
     .accessibly-hidden {
@@ -65087,6 +65131,11 @@ img.ProseMirror-separator {
         cursor: default;
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: calc(-2 * ${borderWidth});
+    }
+
     .sort-indicator,
     .grouped-indicator {
         flex: 0 0 auto;
@@ -65240,6 +65289,11 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: calc(-2 * ${borderWidth});
+    }
+
     .expand-collapse-button {
         flex: 0 0 auto;
         margin-left: max(
@@ -65314,6 +65368,34 @@ img.ProseMirror-separator {
         --ni-private-table-cell-action-menu-display: block;
     }
 
+    nimble-table-cell${focusVisible} {
+        --ni-private-table-cell-action-menu-display: block;
+    }
+
+    nimble-table-cell:first-of-type${focusVisible} {
+        margin-left: calc(
+            -1 * (${controlHeight} - ${smallPadding}) * var(--ni-private-table-cell-focus-offset-multiplier)
+        );
+        padding-left: calc(
+            (${controlHeight} - ${mediumPadding}) *
+                var(--ni-private-table-cell-focus-offset-multiplier) +
+                ${mediumPadding}
+        );
+    }
+
+    nimble-table-cell:first-of-type${focusVisible}::before {
+        content: '';
+        display: block;
+        width: calc(
+            (
+                    ${controlHeight} *
+                        var(--ni-private-table-cell-nesting-level) +
+                        ${smallPadding}
+                ) * var(--ni-private-table-cell-focus-offset-multiplier)
+        );
+        height: ${controlHeight};
+    }
+
     :host(:hover) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
@@ -65321,6 +65403,10 @@ img.ProseMirror-separator {
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
+
+    :host(${focusVisible}) nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: block;
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             :host([selectable]:not([selected]):hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.05)};
@@ -65351,6 +65437,15 @@ img.ProseMirror-separator {
         --ni-private-table-cell-action-menu-display: block;
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .cell-view-container {
+        display: contents;
+    }
+
     .cell-view {
         overflow: hidden;
     }
@@ -65363,19 +65458,33 @@ img.ProseMirror-separator {
         height: ${controlSlimHeight};
         align-self: center;
     }
+
+    ${
+/* This CSS class is applied dynamically by KeyboardNavigationManager */ ''}
+    .action-menu.cell-action-menu-focused {
+        display: block;
+    }
 `;
 
   // prettier-ignore
   const template$h = html `
-    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
-        ${x => x.cellViewTemplate}
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
+        @focusin="${x => x.onCellFocusIn()}"
+        @blur="${x => x.onCellBlur()}"
+    >
+        <div ${ref('cellViewContainer')} class="cell-view-container" @focusin="${x => x.onCellViewFocusIn()}">
+            ${x => x.cellViewTemplate}
+        </div>
         ${when(x => x.hasActionMenu, html `
             <${menuButtonTag} ${ref('actionMenuButton')}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
+                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                tabindex="-1"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
+                @blur="${x => x.onActionMenuBlur()}"
                 class="action-menu"
                 title="${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}"
             >
@@ -65398,6 +65507,11 @@ img.ProseMirror-separator {
           this.menuOpen = false;
           this.nestingLevel = 0;
       }
+      /** @internal */
+      get cellView() {
+          return this.cellViewContainer
+              .firstElementChild;
+      }
       onActionMenuBeforeToggle(event) {
           this.$emit('cell-action-menu-beforetoggle', event.detail);
       }
@@ -65405,6 +65519,18 @@ img.ProseMirror-separator {
           this.menuOpen = event.detail.newState;
           this.$emit('cell-action-menu-toggle', event.detail);
       }
+      onActionMenuBlur() {
+          this.$emit('cell-action-menu-blur', this);
+      }
+      onCellViewFocusIn() {
+          this.$emit('cell-view-focus-in', this);
+      }
+      onCellFocusIn() {
+          this.$emit('cell-focus-in', this);
+      }
+      onCellBlur() {
+          this.$emit('cell-blur', this);
+      }
   }
   __decorate$1([
       observable
@@ -65430,6 +65556,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableCell.prototype, "cellViewTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableCell.prototype, "cellViewContainer", void 0);
   __decorate$1([
       observable
   ], TableCell.prototype, "nestingLevel", void 0);
@@ -65451,11 +65580,13 @@ img.ProseMirror-separator {
     >
         ${when(x => !x.rowOperationGridCellHidden, html `
             <span role="gridcell" class="row-operations-container">
-                ${when(x => x.selectable && !x.hideSelection, html `
+                ${when(x => x.showSelectionCheckbox, html `
                     <${checkboxTag}
                         ${ref('selectionCheckbox')}
                         class="selection-checkbox"
-                        @change="${(x, c) => x.onSelectionChange(c.event)}"
+                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                        tabindex="-1"
+                        @change="${(x, c) => x.onSelectionCheckboxChange(c.event)}"
                         @click="${(_, c) => c.event.stopPropagation()}"
                         title="${x => tableRowSelectLabel.getValueFor(x)}"
                         aria-label="${x => tableRowSelectLabel.getValueFor(x)}"
@@ -65576,6 +65707,10 @@ img.ProseMirror-separator {
       get isNestedParent() {
           return this.isParentRow && this.nestingLevel > 0;
       }
+      /** @internal */
+      get showSelectionCheckbox() {
+          return this.selectable && !this.hideSelection;
+      }
       get ariaSelected() {
           if (this.selectable) {
               return this.selected ? 'true' : 'false';
@@ -65583,16 +65718,20 @@ img.ProseMirror-separator {
           return null;
       }
       /** @internal */
-      onSelectionChange(event) {
+      onSelectionCheckboxChange(event) {
           if (this.ignoreSelectionChangeEvents) {
               return;
           }
           const checkbox = event.target;
           const checked = checkbox.checked;
-          this.selected = checked;
+          this.onSelectionChange(!checked, checked);
+      }
+      /** @internal */
+      onSelectionChange(oldState, newState) {
+          this.selected = newState;
           const detail = {
-              oldState: !checked,
-              newState: checked
+              oldState,
+              newState
           };
           this.$emit('row-selection-toggle', detail);
       }
@@ -65623,6 +65762,20 @@ img.ProseMirror-separator {
               this.updateCellStates();
           }
       }
+      /** @internal */
+      getFocusableElements() {
+          return {
+              selectionCheckbox: this.showSelectionCheckbox
+                  ? this.selectionCheckbox
+                  : undefined,
+              cells: Array.from(this.cellContainer.querySelectorAll(tableCellTag)).map(cell => ({
+                  cell,
+                  actionMenuButton: cell.hasActionMenu
+                      ? cell.actionMenuButton
+                      : undefined
+              }))
+          };
+      }
       onRowExpandToggle(event) {
           const expandEventDetail = {
               oldState: this.expanded,
@@ -65630,7 +65783,7 @@ img.ProseMirror-separator {
               recordId: this.recordId
           };
           this.$emit('row-expand-toggle', expandEventDetail);
-          event.stopImmediatePropagation();
+          event?.stopImmediatePropagation();
           // To avoid a visual glitch with improper expand/collapse icons performing an
           // animation (due to visual re-use apparently), we apply a class to the
           // contained expand-collapse button temporarily. We use the 'transitionend' event
@@ -65742,6 +65895,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableRow.prototype, "nestingLevel", void 0);
+  __decorate$1([
+      observable
+  ], TableRow.prototype, "resolvedRowIndex", void 0);
   __decorate$1([
       attr({ attribute: 'is-parent-row', mode: 'boolean' })
   ], TableRow.prototype, "isParentRow", void 0);
@@ -65772,6 +65928,9 @@ img.ProseMirror-separator {
   __decorate$1([
       volatile
   ], TableRow.prototype, "isNestedParent", null);
+  __decorate$1([
+      volatile
+  ], TableRow.prototype, "showSelectionCheckbox", null);
   __decorate$1([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
@@ -65822,6 +65981,11 @@ img.ProseMirror-separator {
         background-color: ${fillHoverColor};
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: calc(-2 * ${borderWidth});
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${mediumPadding} + ${standardPadding} * 2 *
@@ -65882,7 +66046,7 @@ img.ProseMirror-separator {
                 <${checkboxTag}
                     ${ref('selectionCheckbox')}
                     class="selection-checkbox"
-                    @change="${(x, c) => x.onSelectionChange(c.event)}"
+                    @change="${(x, c) => x.onSelectionCheckboxChange(c.event)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
                     title="${x => tableGroupSelectAllLabel.getValueFor(x)}"
                     aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}"
@@ -65948,7 +66112,7 @@ img.ProseMirror-separator {
           this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
       }
       /** @internal */
-      onSelectionChange(event) {
+      onSelectionCheckboxChange(event) {
           if (this.ignoreSelectionChangeEvents) {
               return;
           }
@@ -65963,6 +66127,15 @@ img.ProseMirror-separator {
           };
           this.$emit('group-selection-toggle', detail);
       }
+      /** @internal */
+      getFocusableElements() {
+          return {
+              selectionCheckbox: this.selectable
+                  ? this.selectionCheckbox
+                  : undefined,
+              cells: []
+          };
+      }
       selectionStateChanged() {
           this.setSelectionCheckboxState();
       }
@@ -65985,6 +66158,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableGroupRow.prototype, "nestingLevel", void 0);
+  __decorate$1([
+      observable
+  ], TableGroupRow.prototype, "resolvedRowIndex", void 0);
   __decorate$1([
       observable
   ], TableGroupRow.prototype, "immediateChildCount", void 0);
@@ -66018,6 +66194,8 @@ img.ProseMirror-separator {
   const template$e = html `
     <template
         role="treegrid"
+        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+        tabindex="0"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
@@ -66045,6 +66223,8 @@ img.ProseMirror-separator {
                                 <span class="checkbox-container">
                                     <${checkboxTag}
                                         ${ref('selectionCheckbox')}
+                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                        tabindex="-1"
                                         class="${x => `selection-checkbox ${x.selectionMode ? x.selectionMode : ''}`}"
                                         @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
                                         title="${x => tableSelectAllLabel.getValueFor(x)}"
@@ -66054,6 +66234,9 @@ img.ProseMirror-separator {
                                 </span>
                             `)}
                             <${buttonTag}
+                                ${ref('collapseAllButton')}
+                                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                tabindex="-1"
                                 class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
                                 content-hidden
                                 appearance="${ButtonAppearance.ghost}"
@@ -66081,9 +66264,11 @@ img.ProseMirror-separator {
                                     `)}
                                         <${tableHeaderTag}
                                             class="header"
+                                            ${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
                                             sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
                                             ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
                                             ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
+                                            @keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
                                             @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
                                             :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                         >
@@ -66107,15 +66292,17 @@ img.ProseMirror-separator {
                         </span>
                     </div>
                 </div>
-                <div class="table-viewport" ${ref('viewport')}>
+                <div class="table-viewport" tabindex="-1" ${ref('viewport')}>
                     <div class="table-scroll"></div>
-                    <div class="table-row-container" ${children$1({ property: 'rowElements', filter: elements(tableRowTag) })}
+                    <div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children$1({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
                         role="rowgroup">
                         ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                             ${repeat(x => x.virtualizer.visibleItems, html `
                                 ${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
                                     <${tableGroupRowTag}
                                         class="group-row"
+                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                        tabindex="-1"
                                         :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
                                         ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
@@ -66123,6 +66310,9 @@ img.ProseMirror-separator {
                                         :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
                                         ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
                                         selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
+                                        :resolvedRowIndex="${x => x.index}"
+                                        @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
+                                        @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
                                         @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
                                     >
@@ -66131,6 +66321,8 @@ img.ProseMirror-separator {
                                 ${when((x, c) => !c.parent.tableData[x.index]?.isGroupRow, html `
                                     <${tableRowTag}
                                         class="row"
+                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                        tabindex="-1"
                                         record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                         ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
                                         ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
@@ -66142,12 +66334,14 @@ img.ProseMirror-separator {
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                         ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                         ?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
+                                        :resolvedRowIndex="${x => x.index}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
+                                        @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
+                                        @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
                                         @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                         @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
-                                        :dataIndex="${x => x.index}"
                                     >
                                     ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
                                         ${repeat((_, c) => c.parent.actionMenuSlots, html `
@@ -66812,16 +67006,25 @@ img.ProseMirror-separator {
    * @internal
    */
   class Virtualizer {
+      get pageSize() {
+          return this._pageSize;
+      }
+      get rowHeight() {
+          return (parseFloat(controlHeight.getValueFor(this.table))
+              + 2 * parseFloat(borderWidth.getValueFor(this.table)));
+      }
       constructor(table, tanStackTable) {
           this.visibleItems = [];
           this.scrollHeight = 0;
           this.headerContainerMarginRight = 0;
           this.rowContainerYOffset = 0;
+          this._pageSize = 0;
           this.table = table;
           this.tanStackTable = tanStackTable;
           this.viewportResizeObserver = new ResizeObserver(entries => {
               const borderBoxSize = entries[0]?.borderBoxSize[0];
               if (borderBoxSize) {
+                  this.updatePageSize();
                   // If we have enough rows that a vertical scrollbar is shown, we need to offset the header widths
                   // by the same margin so the column headers align with the corresponding rendered cells
                   const viewportBoundingWidth = borderBoxSize.inlineSize;
@@ -66842,6 +67045,9 @@ img.ProseMirror-separator {
               this.updateVirtualizer();
           }
       }
+      scrollToIndex(index, options) {
+          this.virtualizer?.scrollToIndex(index, options);
+      }
       updateVirtualizer() {
           const options = this.createVirtualizerOptions();
           if (this.virtualizer) {
@@ -66854,8 +67060,7 @@ img.ProseMirror-separator {
           this.handleVirtualizerChange();
       }
       createVirtualizerOptions() {
-          const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
-              + 2 * parseFloat(borderWidth.getValueFor(this.table));
+          const rowHeight = this.rowHeight;
           return {
               count: this.tanStackTable.getRowModel().rows.length,
               getScrollElement: () => {
@@ -66872,7 +67077,7 @@ img.ProseMirror-separator {
           };
       }
       handleVirtualizerChange() {
-          this.notifyFocusedCellRecycling();
+          this.table.handleFocusedCellRecycling();
           const virtualizer = this.virtualizer;
           this.visibleItems = virtualizer.getVirtualItems();
           this.scrollHeight = virtualizer.getTotalSize();
@@ -66887,24 +67092,8 @@ img.ProseMirror-separator {
           }
           this.rowContainerYOffset = rowContainerYOffset;
       }
-      notifyFocusedCellRecycling() {
-          let tableFocusedElement = this.table.shadowRoot.activeElement;
-          while (tableFocusedElement !== null
-              && !(tableFocusedElement instanceof TableCellView)) {
-              if (tableFocusedElement.shadowRoot) {
-                  tableFocusedElement = tableFocusedElement.shadowRoot.activeElement;
-              }
-              else {
-                  break;
-              }
-          }
-          if (tableFocusedElement instanceof TableCellView) {
-              tableFocusedElement.focusedRecycleCallback();
-          }
-          if (this.table.openActionMenuRecordId !== undefined) {
-              const activeRow = this.table.rowElements.find(row => row.recordId === this.table.openActionMenuRecordId);
-              activeRow?.closeOpenActionMenus();
-          }
+      updatePageSize() {
+          this._pageSize = Math.round(this.table.viewport.clientHeight / this.rowHeight);
       }
   }
   __decorate$1([
@@ -67264,7 +67453,9 @@ img.ProseMirror-separator {
       'rowParentIds',
       'groupRows',
       'columnIds',
+      'columnHidden',
       'columnSort',
+      'columnSortDisabled',
       'columnWidths',
       'columnDefinition',
       'actionMenuSlots',
@@ -67320,6 +67511,13 @@ img.ProseMirror-separator {
               || this.isTracked('columnDefinition')
               || this.isTracked('rowParentIds'));
       }
+      get requiresKeyboardFocusReset() {
+          return (this.isTracked('columnSortDisabled')
+              || this.isTracked('columnDefinition')
+              || this.isTracked('columnHidden')
+              || this.isTracked('selectionMode')
+              || this.isTracked('actionMenuSlots'));
+      }
       trackAllStateChanged() {
           this.trackAll();
           this.queueUpdate();
@@ -67334,13 +67532,20 @@ img.ProseMirror-separator {
           else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
               this.track('columnDefinition');
           }
-          else if (isColumnInternalsProperty(changedColumnProperty, 'sortingDisabled', 'currentSortDirection', 'currentSortIndex')) {
+          else if (isColumnInternalsProperty(changedColumnProperty, 'sortingDisabled')) {
+              this.track('columnSort');
+              this.track('columnSortDisabled');
+          }
+          else if (isColumnInternalsProperty(changedColumnProperty, 'currentSortDirection', 'currentSortIndex')) {
               this.track('columnSort');
           }
-          else if (isColumnProperty(changedColumnProperty, 'columnHidden')
-              || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth', 'resizingDisabled')) {
+          else if (isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth', 'resizingDisabled')) {
               this.track('columnWidths');
           }
+          else if (isColumnProperty(changedColumnProperty, 'columnHidden')) {
+              this.track('columnWidths');
+              this.track('columnHidden');
+          }
           else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
               this.track('actionMenuSlots');
           }
@@ -67353,6 +67558,7 @@ img.ProseMirror-separator {
           this.track('columnIds');
           this.track('columnDefinition');
           this.track('columnSort');
+          this.track('columnSortDisabled');
           this.track('columnWidths');
           this.track('actionMenuSlots');
           this.track('groupRows');
@@ -67982,6 +68188,992 @@ img.ProseMirror-separator {
       observable
   ], ColumnValidator.prototype, "isColumnValid", void 0);
 
+  /**
+   * Manages the keyboard navigation and focus within the table.
+   * @internal
+   */
+  class KeyboardNavigationManager {
+      get inNavigationMode() {
+          return (this.focusType !== TableFocusType.cellActionMenu
+              && this.focusType !== TableFocusType.cellContent);
+      }
+      constructor(table, virtualizer) {
+          this.table = table;
+          this.virtualizer = virtualizer;
+          this.focusType = TableFocusType.none;
+          this.headerActionIndex = -1;
+          this.rowIndex = -1;
+          this.cellContentIndex = -1;
+          this.columnIndex = -1;
+          this.focusWithinTable = false;
+          this.isCurrentlyFocusingElement = false;
+          this.visibleRowNotifiers = [];
+          this.onTableFocusIn = (event) => {
+              this.focusWithinTable = true;
+              this.updateFocusStateFromActiveElement(false);
+              // Sets initial focus on the appropriate table content
+              const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
+              if ((event.target === this.table
+                  || this.focusType === TableFocusType.none)
+                  && !actionMenuOpen) {
+                  let focusHeader = true;
+                  if (this.hasRowOrCellFocusType()
+                      && this.scrollToAndFocusRow(this.rowIndex)) {
+                      focusHeader = false;
+                  }
+                  if (focusHeader && !this.setFocusOnHeader()) {
+                      // nothing to focus
+                      this.table.blur();
+                  }
+              }
+          };
+          this.onTableFocusOut = () => {
+              this.focusWithinTable = false;
+          };
+          this.onCellActionMenuBlur = (event) => {
+              event.stopPropagation();
+              const cell = event.detail;
+              if (cell.actionMenuButton) {
+                  // Ensure that action menu buttons get hidden when no longer focused
+                  this.setActionMenuButtonFocused(cell.actionMenuButton, false);
+              }
+          };
+          this.onCellViewFocusIn = (event) => {
+              event.stopPropagation();
+              this.updateFocusStateFromActiveElement(false);
+          };
+          this.onCellFocusIn = (event) => {
+              event.stopPropagation();
+              const cell = event.detail;
+              this.updateFocusStateFromActiveElement(true);
+              // Currently, clicking a non-interactive cell only updates the focus state to that row, it
+              // doesn't focus the cell. If we revisit this, we most likely need to set the cells to tabindex=-1
+              // upfront too, so their focusing behavior is consistent whether they've been previously keyboard
+              // focused or not.
+              if (this.focusType === TableFocusType.row
+                  && this.getActiveElement() === cell) {
+                  this.focusCurrentRow(false);
+              }
+          };
+          this.onCellBlur = (event) => {
+              event.stopPropagation();
+              const cell = event.detail;
+              this.setElementFocusable(cell, false);
+          };
+          this.onCaptureKeyDown = (event) => {
+              let handled = false;
+              if (event.key === keyTab) {
+                  handled = this.onTabPressed(event.shiftKey);
+              }
+              else if (this.inNavigationMode) {
+                  switch (event.key) {
+                      case keyArrowLeft:
+                          handled = this.onLeftArrowPressed();
+                          break;
+                      case keyArrowRight:
+                          handled = this.onRightArrowPressed();
+                          break;
+                      case keyArrowUp:
+                          handled = this.onUpArrowPressed();
+                          break;
+                      case keyArrowDown:
+                          handled = this.onDownArrowPressed();
+                          break;
+                      case keyPageUp:
+                          handled = this.onPageUpPressed();
+                          break;
+                      case keyPageDown:
+                          handled = this.onPageDownPressed();
+                          break;
+                      case keyHome:
+                          handled = this.onHomePressed(event.ctrlKey);
+                          break;
+                      case keyEnd:
+                          handled = this.onEndPressed(event.ctrlKey);
+                          break;
+                      case keyEnter:
+                          handled = this.onEnterPressed(event.ctrlKey);
+                          break;
+                      case keySpace:
+                          handled = this.onSpacePressed(event.shiftKey);
+                          break;
+                      case keyFunction2:
+                          handled = this.onF2Pressed();
+                          break;
+                  }
+              }
+              if (handled) {
+                  event.preventDefault();
+              }
+          };
+          this.onKeyDown = (event) => {
+              if (!this.inNavigationMode && !event.defaultPrevented) {
+                  if (event.key === keyEscape || event.key === keyFunction2) {
+                      const row = this.getCurrentRow();
+                      if (row) {
+                          this.trySetCellFocus(row.getFocusableElements());
+                      }
+                  }
+              }
+          };
+          this.onViewportKeyDown = (event) => {
+              let handleEvent = !this.inNavigationMode
+                  && (event.key === keyArrowUp || event.key === keyArrowDown);
+              switch (event.key) {
+                  case keyPageUp:
+                  case keyPageDown:
+                  case keyHome:
+                  case keyEnd:
+                      handleEvent = true;
+                      break;
+              }
+              if (handleEvent) {
+                  // Swallow key presses that would cause table scrolling, independently of keyboard navigation
+                  event.preventDefault();
+                  event.stopImmediatePropagation();
+              }
+          };
+          this.tableNotifier = Observable.getNotifier(this.table);
+          this.tableNotifier.subscribe(this, 'rowElements');
+          this.virtualizerNotifier = Observable.getNotifier(this.virtualizer);
+          this.virtualizerNotifier.subscribe(this, 'visibleItems');
+      }
+      resetFocusState() {
+          this.focusType = TableFocusType.none;
+          const activeElement = this.getActiveElement();
+          if (activeElement && this.isInTable(activeElement)) {
+              this.setDefaultFocus();
+          }
+      }
+      get hasActiveRowOrCellFocus() {
+          return this.focusWithinTable && this.hasRowOrCellFocusType();
+      }
+      connect() {
+          this.table.addEventListener('keydown', this.onCaptureKeyDown, { capture: true });
+          this.table.addEventListener('keydown', this.onKeyDown);
+          this.table.addEventListener('focusin', this.onTableFocusIn);
+          this.table.addEventListener('focusout', this.onTableFocusOut);
+          this.table.viewport.addEventListener('keydown', this.onViewportKeyDown);
+          this.table.viewport.addEventListener('cell-action-menu-blur', this.onCellActionMenuBlur);
+          this.table.viewport.addEventListener('cell-view-focus-in', this.onCellViewFocusIn);
+          this.table.viewport.addEventListener('cell-focus-in', this.onCellFocusIn);
+          this.table.viewport.addEventListener('cell-blur', this.onCellBlur);
+      }
+      disconnect() {
+          this.table.removeEventListener('keydown', this.onCaptureKeyDown, { capture: true });
+          this.table.removeEventListener('keydown', this.onKeyDown);
+          this.table.removeEventListener('focusin', this.onTableFocusIn);
+          this.table.removeEventListener('focusout', this.onTableFocusOut);
+          this.table.viewport.removeEventListener('keydown', this.onViewportKeyDown);
+          this.table.viewport.removeEventListener('cell-action-menu-blur', this.onCellActionMenuBlur);
+          this.table.viewport.removeEventListener('cell-view-focus-in', this.onCellViewFocusIn);
+          this.table.viewport.removeEventListener('cell-focus-in', this.onCellFocusIn);
+          this.table.viewport.removeEventListener('cell-blur', this.onCellBlur);
+      }
+      handleChange(source, args) {
+          let focusRowAndCell = false;
+          if (source === this.virtualizer && args === 'visibleItems') {
+              focusRowAndCell = true;
+          }
+          else if (source === this.table && args === 'rowElements') {
+              for (const notifier of this.visibleRowNotifiers) {
+                  notifier.unsubscribe(this);
+              }
+              this.visibleRowNotifiers = [];
+              for (const visibleRow of this.table.rowElements) {
+                  const rowNotifier = Observable.getNotifier(visibleRow);
+                  rowNotifier.subscribe(this, 'resolvedRowIndex');
+                  if (visibleRow.resolvedRowIndex === this.rowIndex) {
+                      focusRowAndCell = true;
+                  }
+              }
+          }
+          else if (args === 'resolvedRowIndex'
+              && this.isResolvedRowType(source)) {
+              if (source.resolvedRowIndex === this.rowIndex) {
+                  focusRowAndCell = true;
+              }
+          }
+          if (focusRowAndCell) {
+              // Focusable elements in cells, and action menus, are both blurred on scroll. To maintain our row/cell focus state,
+              // we focus the cell instead here. (We also don't want to refocus the cell content when the focusedRecycleCallback just
+              // blurred it.)
+              if (this.focusType === TableFocusType.cellActionMenu
+                  || this.focusType === TableFocusType.cellContent) {
+                  this.setCellFocusState(this.columnIndex, this.rowIndex, false);
+              }
+              if (this.inNavigationMode && this.hasRowOrCellFocusType()) {
+                  if (this.rowIndex > this.table.tableData.length - 1) {
+                      // Focused row index no longer valid, coerce to 1st row if possible
+                      if (this.table.tableData.length > 0) {
+                          this.rowIndex = 0;
+                      }
+                      else {
+                          if (this.focusWithinTable) {
+                              this.setDefaultFocus();
+                          }
+                          else {
+                              this.focusType = TableFocusType.none;
+                          }
+                          return;
+                      }
+                  }
+                  if (this.focusWithinTable) {
+                      this.focusCurrentRow(false);
+                  }
+              }
+          }
+      }
+      handleFocusedCellRecycling(hadRowOrCellFocus) {
+          if (hadRowOrCellFocus && !this.focusWithinTable) {
+              this.focusCurrentRow(false);
+          }
+      }
+      onRowFocusIn(event) {
+          if (this.isCurrentlyFocusingElement) {
+              return;
+          }
+          const row = event.target;
+          if (this.isResolvedRowType(row)) {
+              if (this.rowIndex !== row.resolvedRowIndex) {
+                  // If user focuses a row some other way (e.g. mouse), update our focus state so future keyboard nav
+                  // will start from that row
+                  this.setRowFocusState(row.resolvedRowIndex);
+              }
+          }
+      }
+      onRowBlur(event) {
+          const row = event.target;
+          if (this.isResolvedRowType(row)) {
+              this.setElementFocusable(row, false);
+          }
+      }
+      onRowActionMenuToggle(event) {
+          const isOpen = event.detail.newState;
+          if (isOpen) {
+              const row = event.target;
+              const columnIndex = this.table.visibleColumns.findIndex(column => column.columnId === event.detail.columnId);
+              this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
+          }
+      }
+      onEnterPressed(ctrlKey) {
+          let row;
+          let rowElements;
+          if (this.hasRowOrCellFocusType()) {
+              row = this.getCurrentRow();
+              rowElements = row?.getFocusableElements();
+          }
+          if (this.focusType === TableFocusType.row) {
+              if (row instanceof TableGroupRow) {
+                  this.toggleRowExpanded(row);
+                  return true;
+              }
+          }
+          if (this.focusType === TableFocusType.cell) {
+              if (ctrlKey) {
+                  const cell = rowElements?.cells[this.columnIndex];
+                  if (cell?.actionMenuButton && !cell.actionMenuButton.open) {
+                      cell.actionMenuButton.toggleButton.control.click();
+                      return true;
+                  }
+              }
+              return this.focusFirstInteractiveElementInCurrentCell(rowElements);
+          }
+          return false;
+      }
+      onF2Pressed() {
+          if (this.focusType === TableFocusType.cell) {
+              const row = this.getCurrentRow();
+              const rowElements = row?.getFocusableElements();
+              return this.focusFirstInteractiveElementInCurrentCell(rowElements);
+          }
+          return false;
+      }
+      onSpacePressed(shiftKey) {
+          if (this.focusType === TableFocusType.row
+              || this.focusType === TableFocusType.cell) {
+              if (this.focusType === TableFocusType.row || shiftKey) {
+                  const row = this.getCurrentRow();
+                  if (row instanceof TableRow && row.selectable) {
+                      row.onSelectionChange(row.selected, !row.selected);
+                  }
+                  else if (row instanceof TableGroupRow) {
+                      this.toggleRowExpanded(row);
+                  }
+              }
+              // Default Space behavior scrolls down, which is redundant given the rest of our keyboard nav code, and we'd still try to focus a
+              // row that you scrolled away from. So suppress default Space behavior if a row or cell is selected, regardless of if we're
+              // toggling selection or not.
+              return true;
+          }
+          return false;
+      }
+      onLeftArrowPressed() {
+          let row;
+          let rowElements;
+          let headerElements;
+          if (this.hasRowOrCellFocusType()) {
+              row = this.getCurrentRow();
+              rowElements = row?.getFocusableElements();
+          }
+          else if (this.hasHeaderFocusType()) {
+              headerElements = this.getTableHeaderFocusableElements();
+          }
+          switch (this.focusType) {
+              case TableFocusType.headerActions:
+                  return this.trySetHeaderActionFocus(headerElements, this.headerActionIndex - 1);
+              case TableFocusType.columnHeader:
+                  return (this.trySetColumnHeaderFocus(headerElements, this.columnIndex - 1)
+                      || this.trySetHeaderActionFocus(headerElements, headerElements.headerActions.length - 1));
+              case TableFocusType.row:
+                  if (this.isRowExpanded(row) === true) {
+                      this.toggleRowExpanded(row);
+                      return true;
+                  }
+                  return false;
+              case TableFocusType.rowSelectionCheckbox:
+                  this.setRowFocusState();
+                  return this.focusCurrentRow(true);
+              case TableFocusType.cell:
+                  if (!this.trySetCellFocus(rowElements, this.columnIndex - 1)
+                      && !this.trySetRowSelectionCheckboxFocus(rowElements)) {
+                      this.setRowFocusState();
+                      this.focusCurrentRow(true);
+                  }
+                  return true;
+          }
+          return false;
+      }
+      onRightArrowPressed() {
+          let row;
+          let rowElements;
+          let headerElements;
+          if (this.hasRowOrCellFocusType()) {
+              row = this.getCurrentRow();
+              rowElements = row?.getFocusableElements();
+          }
+          else if (this.hasHeaderFocusType()) {
+              headerElements = this.getTableHeaderFocusableElements();
+          }
+          switch (this.focusType) {
+              case TableFocusType.headerActions:
+                  return (this.trySetHeaderActionFocus(headerElements, this.headerActionIndex + 1) || this.trySetColumnHeaderFocus(headerElements, 0));
+              case TableFocusType.columnHeader:
+                  return this.trySetColumnHeaderFocus(headerElements, this.columnIndex + 1);
+              case TableFocusType.row:
+                  if (this.isRowExpanded(row) === false) {
+                      this.toggleRowExpanded(row);
+                      return true;
+                  }
+                  return (this.trySetRowSelectionCheckboxFocus(rowElements)
+                      || this.trySetCellFocus(rowElements, 0));
+              case TableFocusType.rowSelectionCheckbox:
+                  return this.trySetCellFocus(rowElements, 0);
+              case TableFocusType.cell:
+                  return this.trySetCellFocus(rowElements, this.columnIndex + 1);
+          }
+          return false;
+      }
+      onUpArrowPressed() {
+          this.onMoveUp(1);
+          // Always prevent default - prevents page scroll, and FireFox changing focus if focus is at table extents
+          return true;
+      }
+      onPageUpPressed() {
+          return this.onMoveUp(this.virtualizer.pageSize);
+      }
+      onHomePressed(ctrlKey) {
+          if (this.handleHomeEndWithinRow(ctrlKey)) {
+              const row = this.getCurrentRow();
+              const rowElements = row?.getFocusableElements();
+              return (this.trySetRowSelectionCheckboxFocus(rowElements)
+                  || this.trySetCellFocus(rowElements, 0));
+          }
+          return this.onMoveUp(0, 0);
+      }
+      onDownArrowPressed() {
+          this.onMoveDown(1);
+          // Always prevent default - prevents page scroll, and FireFox changing focus if focus is at table extents
+          return true;
+      }
+      onPageDownPressed() {
+          return this.onMoveDown(this.virtualizer.pageSize);
+      }
+      onEndPressed(ctrlKey) {
+          if (this.handleHomeEndWithinRow(ctrlKey)) {
+              const row = this.getCurrentRow();
+              const rowElements = row?.getFocusableElements();
+              return this.trySetCellFocus(rowElements, this.table.visibleColumns.length - 1);
+          }
+          return this.onMoveDown(0, this.table.tableData.length - 1);
+      }
+      handleHomeEndWithinRow(ctrlKey) {
+          return ((this.focusType === TableFocusType.cell
+              || this.focusType === TableFocusType.rowSelectionCheckbox)
+              && !ctrlKey);
+      }
+      onTabPressed(shiftKeyPressed) {
+          const activeElement = this.getActiveElement();
+          if (activeElement === null || activeElement === this.table) {
+              return false;
+          }
+          const nextFocusState = this.hasRowOrCellFocusType()
+              ? this.getNextRowTabStop(shiftKeyPressed)
+              : this.getNextHeaderTabStop(shiftKeyPressed);
+          if (nextFocusState) {
+              this.focusType = nextFocusState.focusType;
+              this.rowIndex = nextFocusState.rowIndex ?? this.rowIndex;
+              this.columnIndex = nextFocusState.columnIndex ?? this.columnIndex;
+              this.headerActionIndex = nextFocusState.headerActionIndex ?? this.headerActionIndex;
+              this.cellContentIndex = nextFocusState.cellContentIndex ?? this.cellContentIndex;
+              if (this.hasRowOrCellFocusType()) {
+                  this.focusCurrentRow(false);
+              }
+              else {
+                  this.focusHeaderElement();
+              }
+              return true;
+          }
+          this.blurAfterLastTab(activeElement);
+          return false;
+      }
+      getNextRowTabStop(shiftKeyPressed) {
+          const row = this.getCurrentRow();
+          if (row === undefined) {
+              return undefined;
+          }
+          let startIndex = -1;
+          const focusStates = [];
+          const rowElements = row.getFocusableElements();
+          if (rowElements.selectionCheckbox) {
+              focusStates.push({
+                  focusType: TableFocusType.rowSelectionCheckbox
+              });
+              if (this.focusType === TableFocusType.rowSelectionCheckbox) {
+                  startIndex = 0;
+              }
+          }
+          let cellIndex = 0;
+          while (cellIndex < rowElements.cells.length) {
+              const firstCellTabbableIndex = focusStates.length;
+              const cellInfo = rowElements.cells[cellIndex];
+              const cellViewTabbableChildren = cellInfo.cell.cellView.tabbableChildren;
+              for (let i = 0; i < cellViewTabbableChildren.length; i++) {
+                  focusStates.push({
+                      focusType: TableFocusType.cellContent,
+                      columnIndex: cellIndex,
+                      cellContentIndex: i
+                  });
+                  if (this.focusType === TableFocusType.cellContent
+                      && this.columnIndex === cellIndex
+                      && this.cellContentIndex === i) {
+                      startIndex = focusStates.length - 1;
+                  }
+              }
+              if (cellInfo.actionMenuButton) {
+                  focusStates.push({
+                      focusType: TableFocusType.cellActionMenu,
+                      columnIndex: cellIndex
+                  });
+                  if (this.focusType === TableFocusType.cellActionMenu
+                      && this.columnIndex === cellIndex) {
+                      startIndex = focusStates.length - 1;
+                  }
+              }
+              const lastCellTabbableIndex = focusStates.length - 1;
+              if (this.focusType === TableFocusType.cell
+                  && this.columnIndex === cellIndex) {
+                  startIndex = shiftKeyPressed
+                      ? lastCellTabbableIndex + 1
+                      : firstCellTabbableIndex - 1;
+              }
+              cellIndex += 1;
+          }
+          if (this.focusType === TableFocusType.row) {
+              startIndex = shiftKeyPressed ? focusStates.length : -1;
+          }
+          const direction = shiftKeyPressed ? -1 : 1;
+          return focusStates[startIndex + direction];
+      }
+      getNextHeaderTabStop(shiftKeyPressed) {
+          let startIndex = -1;
+          const focusStates = [];
+          const headerTabbableElements = this.getTableHeaderFocusableElements().headerActions;
+          for (let i = 0; i < headerTabbableElements.length; i++) {
+              focusStates.push({
+                  focusType: TableFocusType.headerActions,
+                  headerActionIndex: i
+              });
+          }
+          if (this.focusType === TableFocusType.headerActions) {
+              startIndex = this.headerActionIndex;
+          }
+          else {
+              // TableFocusType.columnHeader
+              startIndex = focusStates.length;
+          }
+          const direction = shiftKeyPressed ? -1 : 1;
+          return focusStates[startIndex + direction];
+      }
+      blurAfterLastTab(activeElement) {
+          // In order to get the desired browser-provided Tab/Shift-Tab behavior of focusing the
+          // element before/after the table, the table shouldn't have tabIndex=0 when this event
+          // handling ends. However it needs to be tabIndex=0 so we can re-focus the table the next time
+          // it's tabbed to, so set tabIndex back to 0 after a rAF.
+          // Note: In Chrome this is only needed for Shift-Tab, but in Firefox both Tab and Shift-Tab need this
+          // to work as expected.
+          this.table.tabIndex = -1;
+          window.requestAnimationFrame(() => {
+              this.table.tabIndex = 0;
+          });
+          // Don't explicitly call blur() on activeElement (causes unexpected behavior on Safari / Mac Firefox)
+          this.setElementFocusable(activeElement, false);
+      }
+      onMoveUp(rowDelta, newRowIndex) {
+          const coerceRowIndex = rowDelta > 1;
+          switch (this.focusType) {
+              case TableFocusType.row:
+              case TableFocusType.rowSelectionCheckbox:
+              case TableFocusType.cell: {
+                  const scrollOptions = {};
+                  let rowIndex = this.rowIndex;
+                  if (newRowIndex !== undefined) {
+                      rowIndex = newRowIndex;
+                  }
+                  rowIndex -= rowDelta;
+                  if (coerceRowIndex && rowIndex < 0) {
+                      rowIndex = 0;
+                  }
+                  if (rowDelta > 1) {
+                      scrollOptions.align = 'start';
+                  }
+                  if (rowIndex < this.rowIndex && rowIndex >= 0) {
+                      return this.scrollToAndFocusRow(rowIndex, scrollOptions);
+                  }
+                  if (rowIndex === -1) {
+                      const headerElements = this.getTableHeaderFocusableElements();
+                      if (this.focusType === TableFocusType.row
+                          || this.focusType === TableFocusType.rowSelectionCheckbox) {
+                          return (this.trySetHeaderActionFocus(headerElements, 0)
+                              || this.trySetColumnHeaderFocus(headerElements, 0));
+                      }
+                      return this.trySetColumnHeaderFocus(headerElements, this.columnIndex);
+                  }
+                  return false;
+              }
+          }
+          return false;
+      }
+      onMoveDown(rowDelta, newRowIndex) {
+          const coerceRowIndex = rowDelta > 1;
+          switch (this.focusType) {
+              case TableFocusType.headerActions: {
+                  this.setRowFocusState(0);
+                  return this.scrollToAndFocusRow(0);
+              }
+              case TableFocusType.columnHeader: {
+                  this.setCellFocusState(this.columnIndex, 0, false);
+                  return this.scrollToAndFocusRow(0);
+              }
+              case TableFocusType.row:
+              case TableFocusType.rowSelectionCheckbox:
+              case TableFocusType.cell: {
+                  const scrollOptions = {};
+                  let rowIndex = this.rowIndex;
+                  if (newRowIndex !== undefined) {
+                      rowIndex = newRowIndex;
+                  }
+                  rowIndex += rowDelta;
+                  if (coerceRowIndex && rowIndex >= this.table.tableData.length) {
+                      rowIndex = this.table.tableData.length - 1;
+                  }
+                  if (rowDelta > 1) {
+                      scrollOptions.align = 'end';
+                  }
+                  if (rowIndex > this.rowIndex
+                      && rowIndex < this.table.tableData.length) {
+                      return this.scrollToAndFocusRow(rowIndex, scrollOptions);
+                  }
+                  return false;
+              }
+          }
+          return false;
+      }
+      updateFocusStateFromActiveElement(setRowFocus) {
+          // If the user is interacting with the table with non-keyboard methods (like mouse), we need to
+          // update our focus state based on the current active/focused element
+          const activeElement = this.getActiveElement();
+          if (activeElement) {
+              const row = this.getContainingRow(activeElement);
+              if (row) {
+                  if (!(row instanceof TableGroupRow)) {
+                      const cell = this.getContainingCell(activeElement);
+                      if (cell) {
+                          const columnIndex = this.table.visibleColumns.indexOf(cell.column);
+                          if (cell.actionMenuButton === activeElement) {
+                              this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
+                              return;
+                          }
+                          const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
+                          if (contentIndex > -1) {
+                              this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
+                              return;
+                          }
+                      }
+                  }
+                  if (setRowFocus
+                      && this.hasRowOrCellFocusType()
+                      && this.rowIndex !== row.resolvedRowIndex) {
+                      this.setRowFocusState(row.resolvedRowIndex);
+                  }
+              }
+          }
+      }
+      focusElement(element, focusOptions) {
+          const previousActiveElement = this.getActiveElement();
+          if (previousActiveElement !== element) {
+              this.setElementFocusable(element, true);
+              this.isCurrentlyFocusingElement = true;
+              element.focus(focusOptions);
+              this.isCurrentlyFocusingElement = false;
+              if (previousActiveElement
+                  && this.isInTable(previousActiveElement)) {
+                  this.setElementFocusable(previousActiveElement, false);
+              }
+          }
+      }
+      setElementFocusable(element, focusable) {
+          if (element === this.table) {
+              return;
+          }
+          element.tabIndex = focusable ? 0 : -1;
+      }
+      setActionMenuButtonFocused(menuButton, focused) {
+          // The action MenuButton needs to be visible in order to be focused, so this CSS class styling
+          // handles that (see cell/styles.ts).
+          if (focused) {
+              menuButton.classList.add('cell-action-menu-focused');
+          }
+          else {
+              menuButton.classList.remove('cell-action-menu-focused');
+          }
+      }
+      setFocusOnHeader() {
+          if (this.hasHeaderFocusType()) {
+              return this.focusHeaderElement();
+          }
+          this.setDefaultFocus();
+          return this.focusType !== TableFocusType.none;
+      }
+      setDefaultFocus() {
+          const headerElements = this.getTableHeaderFocusableElements();
+          if (!this.trySetHeaderActionFocus(headerElements, 0)
+              && !this.trySetColumnHeaderFocus(headerElements, 0)
+              && !this.scrollToAndFocusRow(0)) {
+              this.focusType = TableFocusType.none;
+          }
+      }
+      scrollToAndFocusRow(totalRowIndex, scrollOptions) {
+          if (totalRowIndex >= 0 && totalRowIndex < this.table.tableData.length) {
+              switch (this.focusType) {
+                  case TableFocusType.none:
+                  case TableFocusType.headerActions:
+                  case TableFocusType.columnHeader:
+                      this.setRowFocusState(totalRowIndex);
+                      break;
+              }
+              this.rowIndex = totalRowIndex;
+              this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
+              this.focusCurrentRow(true);
+              return true;
+          }
+          return false;
+      }
+      focusCurrentRow(allowScroll) {
+          const visibleRowIndex = this.getCurrentRowVisibleIndex();
+          if (visibleRowIndex < 0) {
+              return false;
+          }
+          const focusedRow = this.table.rowElements[visibleRowIndex];
+          let focusRowOnly = false;
+          switch (this.focusType) {
+              case TableFocusType.row:
+                  focusRowOnly = true;
+                  break;
+              case TableFocusType.cell:
+              case TableFocusType.cellActionMenu:
+              case TableFocusType.cellContent:
+                  focusRowOnly = focusedRow instanceof TableGroupRow;
+                  break;
+          }
+          const focusOptions = { preventScroll: !allowScroll };
+          if (focusRowOnly) {
+              this.focusElement(focusedRow, focusOptions);
+              return true;
+          }
+          this.focusRowElement(focusedRow, focusOptions);
+          return true;
+      }
+      focusRowElement(row, focusOptions) {
+          const rowElements = row.getFocusableElements();
+          let focusableElement;
+          switch (this.focusType) {
+              case TableFocusType.rowSelectionCheckbox:
+                  focusableElement = rowElements.selectionCheckbox;
+                  break;
+              case TableFocusType.cell: {
+                  focusableElement = rowElements.cells[this.columnIndex].cell;
+                  break;
+              }
+              case TableFocusType.cellActionMenu: {
+                  const actionMenuButton = rowElements.cells[this.columnIndex]?.cell.actionMenuButton;
+                  if (actionMenuButton) {
+                      focusableElement = actionMenuButton;
+                      this.setActionMenuButtonFocused(actionMenuButton, true);
+                  }
+                  break;
+              }
+              case TableFocusType.cellContent: {
+                  focusableElement = rowElements.cells[this.columnIndex]?.cell.cellView
+                      .tabbableChildren[this.cellContentIndex];
+                  break;
+              }
+          }
+          if (focusableElement) {
+              this.focusElement(focusableElement, focusOptions);
+          }
+      }
+      focusHeaderElement() {
+          const headerElements = this.getTableHeaderFocusableElements();
+          let focusableElement;
+          switch (this.focusType) {
+              case TableFocusType.headerActions:
+                  focusableElement = headerElements.headerActions[this.headerActionIndex];
+                  break;
+              case TableFocusType.columnHeader:
+                  focusableElement = headerElements.columnHeaders[this.columnIndex];
+                  break;
+          }
+          if (focusableElement) {
+              this.focusElement(focusableElement);
+              return true;
+          }
+          return false;
+      }
+      getCurrentRowVisibleIndex() {
+          return this.table.rowElements.findIndex(row => row.resolvedRowIndex === this.rowIndex);
+      }
+      getTableHeaderFocusableElements() {
+          const headerActions = [];
+          if (this.table.selectionCheckbox?.getRootNode()
+              === this.table.shadowRoot) {
+              headerActions.push(this.table.selectionCheckbox);
+          }
+          if (this.table.showCollapseAll
+              && this.table.collapseAllButton?.getRootNode()
+                  === this.table.shadowRoot) {
+              headerActions.push(this.table.collapseAllButton);
+          }
+          const columnHeaders = [];
+          if (this.canFocusColumnHeaders()) {
+              this.table.columnHeadersContainer
+                  .querySelectorAll(tableHeaderTag)
+                  .forEach(header => columnHeaders.push(header));
+          }
+          return { headerActions, columnHeaders };
+      }
+      canFocusColumnHeaders() {
+          return (this.table.columns.find(c => !c.columnInternals.sortingDisabled)
+              !== undefined);
+      }
+      getCurrentRow() {
+          return this.table.rowElements[this.getCurrentRowVisibleIndex()];
+      }
+      isRowExpanded(row) {
+          if ((row instanceof TableRow && row.isParentRow)
+              || row instanceof TableGroupRow) {
+              return row.expanded;
+          }
+          return undefined;
+      }
+      toggleRowExpanded(row) {
+          if (row instanceof TableGroupRow) {
+              row.onGroupExpandToggle();
+          }
+          else {
+              row.onRowExpandToggle();
+          }
+          this.focusRowElement(row);
+      }
+      getContainingRow(start) {
+          return this.getContainingElement(start, e => this.isResolvedRowType(e));
+      }
+      getContainingCell(start) {
+          return this.getContainingElement(start, e => e instanceof TableCell);
+      }
+      getContainingElement(start, isElementMatch) {
+          let possibleMatch = start;
+          while (possibleMatch && possibleMatch !== this.table) {
+              if (isElementMatch(possibleMatch)) {
+                  return possibleMatch;
+              }
+              possibleMatch = possibleMatch.parentElement
+                  ?? possibleMatch.parentNode?.host;
+          }
+          return undefined;
+      }
+      isInTable(start) {
+          let possibleMatch = start;
+          while (possibleMatch && possibleMatch !== this.table) {
+              possibleMatch = possibleMatch.parentElement
+                  ?? possibleMatch.parentNode?.host;
+          }
+          return possibleMatch === this.table;
+      }
+      getActiveElement() {
+          let activeElement = document.activeElement;
+          while (activeElement?.shadowRoot?.activeElement) {
+              activeElement = activeElement.shadowRoot.activeElement;
+              // In some cases, the active element may be a sub-part of a control (example: MenuButton -> ToggleButton -> a div with tabindex=0). Stop at the outer control boundary, so that
+              // we can more simply check equality against the elements of getTableHeaderFocusableElements() / row.getFocusableElements().
+              // (For rows/cells/cell views, we do need to recurse into them, to get to the appropriate focused controls though)
+              if (activeElement instanceof FoundationElement
+                  && !this.isResolvedRowType(activeElement)
+                  && !(activeElement instanceof TableCell)
+                  && !(activeElement instanceof TableCellView)) {
+                  break;
+              }
+          }
+          return activeElement;
+      }
+      focusFirstInteractiveElementInCurrentCell(rowElements) {
+          if (!rowElements) {
+              return false;
+          }
+          return (this.trySetCellContentFocus(rowElements, 0)
+              || this.trySetCellActionMenuFocus(rowElements));
+      }
+      hasRowOrCellFocusType() {
+          switch (this.focusType) {
+              case TableFocusType.cell:
+              case TableFocusType.cellActionMenu:
+              case TableFocusType.cellContent:
+              case TableFocusType.row:
+              case TableFocusType.rowSelectionCheckbox:
+                  return true;
+              default:
+                  return false;
+          }
+      }
+      hasHeaderFocusType() {
+          switch (this.focusType) {
+              case TableFocusType.headerActions:
+              case TableFocusType.columnHeader:
+                  return true;
+              default:
+                  return false;
+          }
+      }
+      trySetRowSelectionCheckboxFocus(rowElements) {
+          if (rowElements?.selectionCheckbox) {
+              this.focusType = TableFocusType.rowSelectionCheckbox;
+              this.focusCurrentRow(true);
+              return true;
+          }
+          return false;
+      }
+      trySetColumnHeaderFocus(headerElements, columnIndex) {
+          if (columnIndex >= 0
+              && columnIndex < headerElements.columnHeaders.length) {
+              this.focusType = TableFocusType.columnHeader;
+              this.columnIndex = columnIndex;
+              this.focusHeaderElement();
+              return true;
+          }
+          return false;
+      }
+      trySetHeaderActionFocus(headerElements, headerActionIndex) {
+          if (headerActionIndex >= 0
+              && headerActionIndex < headerElements.headerActions.length) {
+              this.focusType = TableFocusType.headerActions;
+              this.headerActionIndex = headerActionIndex;
+              this.focusHeaderElement();
+              return true;
+          }
+          return false;
+      }
+      trySetCellFocus(rowElements, columnIndex, rowIndex) {
+          if (!rowElements) {
+              return false;
+          }
+          const newColumnIndex = columnIndex ?? this.columnIndex;
+          const newRowIndex = rowIndex ?? this.rowIndex;
+          if (newColumnIndex >= 0 && newColumnIndex < rowElements.cells.length) {
+              this.focusType = TableFocusType.cell;
+              this.setRowCellFocusState(newColumnIndex, newRowIndex, true);
+              return true;
+          }
+          return false;
+      }
+      trySetCellContentFocus(rowElements, cellContentIndex, columnIndex, rowIndex) {
+          if (!rowElements) {
+              return false;
+          }
+          const newColumnIndex = columnIndex ?? this.columnIndex;
+          const newRowIndex = rowIndex ?? this.rowIndex;
+          if (newColumnIndex >= 0
+              && newColumnIndex < rowElements.cells.length
+              && cellContentIndex >= 0
+              && cellContentIndex
+                  < rowElements.cells[newColumnIndex].cell.cellView
+                      .tabbableChildren.length) {
+              this.setCellContentFocusState(cellContentIndex, newRowIndex, newColumnIndex, true);
+              return true;
+          }
+          return false;
+      }
+      trySetCellActionMenuFocus(rowElements, columnIndex, rowIndex) {
+          const newColumnIndex = columnIndex ?? this.columnIndex;
+          const newRowIndex = rowIndex ?? this.rowIndex;
+          if (newColumnIndex >= 0
+              && newColumnIndex < rowElements.cells.length
+              && rowElements.cells[newColumnIndex].actionMenuButton) {
+              this.setCellActionMenuFocusState(newRowIndex, newColumnIndex, true);
+              return true;
+          }
+          return false;
+      }
+      setCellActionMenuFocusState(rowIndex, columnIndex, focusElement) {
+          this.focusType = TableFocusType.cellActionMenu;
+          this.setRowCellFocusState(columnIndex, rowIndex, focusElement);
+      }
+      setCellContentFocusState(cellContentIndex, rowIndex, columnIndex, focusElement) {
+          this.focusType = TableFocusType.cellContent;
+          this.cellContentIndex = cellContentIndex;
+          this.setRowCellFocusState(columnIndex, rowIndex, focusElement);
+      }
+      setRowFocusState(rowIndex) {
+          this.focusType = TableFocusType.row;
+          if (rowIndex !== undefined) {
+              this.rowIndex = rowIndex;
+          }
+      }
+      setCellFocusState(columnIndex, rowIndex, focusElement) {
+          this.focusType = TableFocusType.cell;
+          this.setRowCellFocusState(columnIndex, rowIndex, focusElement);
+      }
+      setRowCellFocusState(columnIndex, rowIndex, focusElement) {
+          this.rowIndex = rowIndex;
+          this.columnIndex = columnIndex;
+          if (focusElement) {
+              this.focusCurrentRow(true);
+          }
+      }
+      isResolvedRowType(row) {
+          return row instanceof TableRow || row instanceof TableGroupRow;
+      }
+  }
+
   /**
    * A nimble-styled table.
    */
@@ -68122,6 +69314,7 @@ img.ProseMirror-separator {
           };
           this.table = createTable(this.options);
           this.virtualizer = new Virtualizer(this, this.table);
+          this.keyboardNavigationManager = new KeyboardNavigationManager(this, this.virtualizer);
           this.layoutManager = new TableLayoutManager(this);
           this.layoutManagerNotifier = Observable.getNotifier(this.layoutManager);
           this.layoutManagerNotifier.subscribe(this, 'isColumnBeingSized');
@@ -68162,12 +69355,14 @@ img.ProseMirror-separator {
           this.viewport.addEventListener('scroll', this.onViewPortScroll, {
               passive: true
           });
+          this.keyboardNavigationManager.connect();
           document.addEventListener('keydown', this.onKeyDown);
           document.addEventListener('keyup', this.onKeyUp);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.virtualizer.disconnect();
+          this.keyboardNavigationManager.disconnect();
           this.viewport.removeEventListener('scroll', this.onViewPortScroll);
           document.removeEventListener('keydown', this.onKeyDown);
           document.removeEventListener('keyup', this.onKeyUp);
@@ -68217,6 +69412,14 @@ img.ProseMirror-separator {
           return true;
       }
       /** @internal */
+      onRowFocusIn(event) {
+          this.keyboardNavigationManager.onRowFocusIn(event);
+      }
+      /** @internal */
+      onRowBlur(event) {
+          this.keyboardNavigationManager.onRowBlur(event);
+      }
+      /** @internal */
       onAllRowsSelectionChange(event) {
           event.stopPropagation();
           if (this.ignoreSelectionChangeEvents) {
@@ -68310,6 +69513,18 @@ img.ProseMirror-separator {
           }
           this.emitColumnConfigurationChangeEvent();
       }
+      /**
+       * @internal
+       */
+      onHeaderKeyDown(column, event) {
+          const allowMultiSort = event.shiftKey;
+          if (event.key === keyEnter) {
+              this.toggleColumnSort(column, allowMultiSort);
+          }
+          // Return true so that we don't prevent default behavior. Without this, Tab navigation
+          // gets stuck on the column headers.
+          return true;
+      }
       /**
        * @internal
        */
@@ -68325,6 +69540,9 @@ img.ProseMirror-separator {
               this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
               this.visibleColumns = this.columns.filter(column => !column.columnHidden);
           }
+          if (this.tableUpdateTracker.requiresKeyboardFocusReset) {
+              this.keyboardNavigationManager.resetFocusState();
+          }
       }
       get ariaMultiSelectable() {
           switch (this.selectionMode) {
@@ -68367,6 +69585,29 @@ img.ProseMirror-separator {
           }
           return tanStackUpdates;
       }
+      /** @internal */
+      handleFocusedCellRecycling() {
+          const hadActiveRowOrCellFocus = this.keyboardNavigationManager.hasActiveRowOrCellFocus;
+          let tableFocusedElement = this.shadowRoot.activeElement;
+          while (tableFocusedElement !== null
+              && !(tableFocusedElement instanceof TableCellView)) {
+              if (tableFocusedElement.shadowRoot) {
+                  tableFocusedElement = tableFocusedElement.shadowRoot.activeElement;
+              }
+              else {
+                  break;
+              }
+          }
+          if (tableFocusedElement instanceof TableCellView) {
+              tableFocusedElement.focusedRecycleCallback();
+          }
+          if (this.openActionMenuRecordId !== undefined) {
+              const activeRow = this.rowElements.find(row => row instanceof TableRow
+                  && row.recordId === this.openActionMenuRecordId);
+              activeRow?.closeOpenActionMenus();
+          }
+          this.keyboardNavigationManager.handleFocusedCellRecycling(hadActiveRowOrCellFocus);
+      }
       selectionModeChanged(_prev, _next) {
           if (!this.$fastController.isConnected) {
               return;
@@ -68402,6 +69643,7 @@ img.ProseMirror-separator {
           this.$emit('action-menu-beforetoggle', detail);
       }
       async handleRowActionMenuToggleEvent(event) {
+          this.keyboardNavigationManager.onRowActionMenuToggle(event);
           const detail = await this.getActionMenuToggleEventDetail(event);
           this.$emit('action-menu-toggle', detail);
           if (!event.detail.newState) {
@@ -68612,6 +69854,7 @@ img.ProseMirror-separator {
                   isParentRow: isParent,
                   immediateChildCount: row.subRows.length,
                   groupColumn: this.getGroupRowColumn(row),
+                  resolvedRowIndex: row.index,
                   isLoadingChildren: this.expansionManager.isLoadingChildren(row.id)
               };
               hasDataHierarchy = hasDataHierarchy || isParent;
@@ -68779,6 +70022,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], Table.prototype, "selectionCheckbox", void 0);
+  __decorate$1([
+      observable
+  ], Table.prototype, "collapseAllButton", void 0);
   __decorate$1([
       observable
   ], Table.prototype, "showCollapseAll", void 0);
@@ -68932,10 +70178,12 @@ img.ProseMirror-separator {
 }}"
         class="${x => (x.isPlaceholder ? 'placeholder' : '')}"
     >
-        ${when(x => typeof x.cellRecord?.href === 'string', html `
+        ${when(x => x.showAnchor, html `
             <${anchorTag}
                 ${ref('anchor')}
                 ${overflow('hasOverflow')}
+                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                tabindex="-1"
                 href="${x => x.cellRecord?.href}"
                 hreflang="${x => x.columnConfig?.hreflang}"
                 ping="${x => x.columnConfig?.ping}"
@@ -68950,7 +70198,7 @@ img.ProseMirror-separator {
             >
                 ${x => x.text}
             </${anchorTag}>`)}
-        ${when(x => typeof x.cellRecord?.href !== 'string', html `
+        ${when(x => !x.showAnchor, html `
             <span
                 ${overflow('hasOverflow')}
                 title=${x => (x.hasOverflow ? x.text : null)}
@@ -68987,9 +70235,19 @@ img.ProseMirror-separator {
           }
           return '';
       }
+      /** @internal */
+      get showAnchor() {
+          return typeof this.cellRecord?.href === 'string';
+      }
       focusedRecycleCallback() {
           this.anchor?.blur();
       }
+      get tabbableChildren() {
+          if (this.showAnchor) {
+              return [this.anchor];
+          }
+          return [];
+      }
   }
   __decorate$1([
       observable
@@ -69000,6 +70258,9 @@ img.ProseMirror-separator {
   __decorate$1([
       volatile
   ], TableColumnAnchorCellView.prototype, "text", null);
+  __decorate$1([
+      volatile
+  ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$c,