@ni/nimble-components 32.3.1 → 32.4.0

package/dist/all-components-bundle.js

@@ -16035,6 +16035,7 @@
   const PowerGreen = "#32eb96";
   const PowerGreen10 = "#364941";
   const PowerGreen30 = "#356d54";
+  const PowerGreenDark50 = "#98f5ca";
   const Black22 = "#e6e6e6";
   const Black82 = "#434445";
   const NiHoneyLight = "#ffe76b";
@@ -16658,7 +16659,7 @@
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, White, White));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
@@ -65776,13 +65777,6 @@ focus outline in that case.
         cursor: var(--ni-private-table-cursor-override);
     }
 
-    .glass-overlay {
-        width: 100%;
-        height: 100%;
-        display: contents;
-        pointer-events: var(--ni-private-glass-overlay-pointer-events);
-    }
-
     .header-row-container {
         position: sticky;
         top: 0;
@@ -65860,6 +65854,7 @@ focus outline in that case.
         cursor: col-resize;
         position: absolute;
         z-index: ${ZIndexLevels.zIndex1};
+        touch-action: pan-y;
     }
 
     .column-divider:hover,
@@ -67102,159 +67097,156 @@ focus outline in that case.
             --ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
             --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
             --ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
-            --ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
             ">
-            <div class="glass-overlay">
-                <div role="rowgroup" class="header-row-container">
-                    <div class="header-row" role="row">
-                        <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
-                            ${when(x => x.showRowOperationColumn, html `
-                                <span class="accessibly-hidden">
-                                    ${x => tableRowOperationColumnLabel.getValueFor(x)}
-                                </span>
-                            `)}
-                            ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
-                                <span class="checkbox-container">
-                                    <${checkboxTag}
-                                        ${ref('selectionCheckbox')}
-                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
-                                        tabindex="-1"
-                                        class="selection-checkbox"
-                                        @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
-                                        title="${x => tableSelectAllLabel.getValueFor(x)}"
-                                        aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
-                                    >
-                                    </${checkboxTag}>
-                                </span>
-                            `)}
-                            <span class="collapse-all-button-container">
-                                <${buttonTag}
-                                    ${ref('collapseAllButton')}
+            <div role="rowgroup" class="header-row-container">
+                <div class="header-row" role="row">
+                    <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                        ${when(x => x.showRowOperationColumn, html `
+                            <span class="accessibly-hidden">
+                                ${x => tableRowOperationColumnLabel.getValueFor(x)}
+                            </span>
+                        `)}
+                        ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
+                            <span class="checkbox-container">
+                                <${checkboxTag}
+                                    ${ref('selectionCheckbox')}
                                     ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                     tabindex="-1"
-                                    class="collapse-all-button ${x => x.collapseButtonVisibility}"
-                                    content-hidden
-                                    appearance="${ButtonAppearance.ghost}"
-                                    title="${x => tableCollapseAllLabel.getValueFor(x)}"
-                                    @click="${x => x.handleCollapseAllRows()}"
+                                    class="selection-checkbox"
+                                    @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
+                                    title="${x => tableSelectAllLabel.getValueFor(x)}"
+                                    aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
                                 >
-                                    <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                                    ${x => tableCollapseAllLabel.getValueFor(x)}
-                                </${buttonTag}>
+                                </${checkboxTag}>
                             </span>
+                        `)}
+                        <span class="collapse-all-button-container">
+                            <${buttonTag}
+                                ${ref('collapseAllButton')}
+                                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                tabindex="-1"
+                                class="collapse-all-button ${x => x.collapseButtonVisibility}"
+                                content-hidden
+                                appearance="${ButtonAppearance.ghost}"
+                                title="${x => tableCollapseAllLabel.getValueFor(x)}"
+                                @click="${x => x.handleCollapseAllRows()}"
+                            >
+                                <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                                ${x => tableCollapseAllLabel.getValueFor(x)}
+                            </${buttonTag}>
                         </span>
-                        <span class="column-headers-container" ${ref('columnHeadersContainer')}>
-                            ${repeat(x => x.visibleColumns, html `
-                                <div class="header-container">
-                                    ${when((_, c) => c.index > 0, html `
-                                        <div
-                                            class="
-                                                column-divider
-                                                left
-                                                ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
-                                                ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
-                                                ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
-                                            "
-                                            @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
-                                        </div>
-                                    `)}
-                                        <${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)}"
-                                            :alignment="${x => x.columnInternals.headerAlignment}"
-                                            :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
-                                        >
-                                            <slot name="${x => x.slot}"></slot>
-                                        </${tableHeaderTag}>
-                                    ${when((_, c) => c.index < c.length - 1, html `
-                                        <div
-                                            class="
-                                                column-divider
-                                                right
-                                                ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
-                                                ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
-                                                ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
-                                            "
-                                             @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
-                                        </div>
-                                    `)}                        
-                                </div>
-                            `, { positioning: true })}
-                            <div class="header-scrollbar-spacer"></div>
-                        </span>
-                    </div>
-                </div>
-                <div class="table-viewport" tabindex="-1" ${ref('viewport')}>
-                    <div class="table-scroll"></div>
-                    <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}"
-                                        :immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
-                                        :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}"
-                                        ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
-                                        @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)}"
-                                    >
-                                    </${tableGroupRowTag}>
+                    </span>
+                    <span class="column-headers-container" ${ref('columnHeadersContainer')}>
+                        ${repeat(x => x.visibleColumns, html `
+                            <div class="header-container">
+                                ${when((_, c) => c.index > 0, html `
+                                    <div
+                                        class="
+                                            column-divider
+                                            left
+                                            ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
+                                            ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                            ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
+                                        "
+                                        @pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event, c.index)}">
+                                    </div>
                                 `)}
-                                ${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}"
-                                        ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
-                                        ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
-                                        ?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
-                                        :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
-                                        :columns="${(_, c) => c.parent.columns}"
-                                        :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
-                                        :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}"
-                                        ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
-                                        @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-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
-                                        @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
+                                    <${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)}"
+                                        :alignment="${x => x.columnInternals.headerAlignment}"
+                                        :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                     >
-                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
-                                        <slot
-                                            name="${x => x.name}"
-                                            slot="${x => x.slot}"
-                                        ></slot>
-                                    `)}
-                                    </${tableRowTag}>
+                                        <slot name="${x => x.slot}"></slot>
+                                    </${tableHeaderTag}>
+                                ${when((_, c) => c.index < c.length - 1, html `
+                                    <div
+                                        class="
+                                            column-divider
+                                            right
+                                            ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
+                                            ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                            ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
+                                        "
+                                        @pointerdown="${(_, c) => c.parent.onRightDividerPointerDown(c.event, c.index)}">
+                                    </div>
+                                `)}                        
+                            </div>
+                        `, { positioning: true })}
+                        <div class="header-scrollbar-spacer"></div>
+                    </span>
+                </div>
+            </div>
+            <div class="table-viewport" tabindex="-1" ${ref('viewport')}>
+                <div class="table-scroll"></div>
+                <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}"
+                                    :immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
+                                    :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}"
+                                    ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
+                                    @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)}"
+                                >
+                                </${tableGroupRowTag}>
+                            `)}
+                            ${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}"
+                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
+                                    ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
+                                    ?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
+                                    :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
+                                    :columns="${(_, c) => c.parent.columns}"
+                                    :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
+                                    :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}"
+                                    ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
+                                    @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-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
+                                    @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
+                                >
+                                ${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
+                                    <slot
+                                        name="${x => x.name}"
+                                        slot="${x => x.slot}"
+                                    ></slot>
                                 `)}
+                                </${tableRowTag}>
                             `)}
                         `)}
-                    </div>
+                    `)}
                 </div>
             </div>
         </div>
@@ -68192,12 +68184,11 @@ focus outline in that case.
           this.currentTotalDelta = 0;
           this.dragStart = 0;
           this.initialColumnWidths = [];
-          this.onDividerMouseMove = (event) => {
-              const mouseEvent = event;
+          this.onDividerPointerMove = (event) => {
               for (let i = 0; i < this.visibleColumns.length; i++) {
                   this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;
               }
-              this.currentTotalDelta = this.getAllowedSizeDelta(mouseEvent.clientX - this.dragStart);
+              this.currentTotalDelta = this.getAllowedSizeDelta(event.clientX - this.dragStart);
               this.performCascadeSizeLeft(this.leftColumnIndex, this.currentTotalDelta);
               this.performCascadeSizeRight(this.rightColumnIndex, this.currentTotalDelta);
               const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth;
@@ -68208,13 +68199,14 @@ focus outline in that case.
                   this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth;
               }
           };
-          this.onDividerMouseUp = () => {
-              document.removeEventListener('mousemove', this.onDividerMouseMove);
-              document.removeEventListener('mouseup', this.onDividerMouseUp);
+          this.onDividerPointerUp = () => {
+              this.activeColumnDividerElement.removeEventListener('pointermove', this.onDividerPointerMove);
+              this.activeColumnDividerElement.removeEventListener('pointerup', this.onDividerPointerUp);
               this.resetGridSizedColumns();
               this.isColumnBeingSized = false;
               this.activeColumnIndex = undefined;
               this.activeColumnDivider = undefined;
+              this.activeColumnDividerElement = undefined;
               this.visibleColumns = [];
           };
       }
@@ -68232,11 +68224,14 @@ focus outline in that case.
       }
       /**
        * Sets up state related to interactively sizing a column.
+       * @param activeColumnDividerElement The divider element that was clicked on
+       * @param pointerId The pointerId of the pointer that started the drag
        * @param dragStart The x-position from which a column size was started
-       * @param activeColumnDivider The divider that was clicked on
+       * @param activeColumnDivider The 1-based index of the divider that was clicked on
        */
-      beginColumnInteractiveSize(dragStart, activeColumnDivider) {
+      beginColumnInteractiveSize(activeColumnDividerElement, pointerId, dragStart, activeColumnDivider) {
           this.activeColumnDivider = activeColumnDivider;
+          this.activeColumnDividerElement = activeColumnDividerElement;
           this.leftColumnIndex = this.getLeftColumnIndexFromDivider(this.activeColumnDivider);
           this.rightColumnIndex = this.leftColumnIndex + 1;
           this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);
@@ -68248,8 +68243,12 @@ focus outline in that case.
           this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
           this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
           this.isColumnBeingSized = true;
-          document.addEventListener('mousemove', this.onDividerMouseMove);
-          document.addEventListener('mouseup', this.onDividerMouseUp);
+          // pointerId of -1 indicates source was synthetic PointerEvent: https://w3c.github.io/pointerevents/#dom-pointerevent-pointerid
+          if (pointerId !== -1) {
+              activeColumnDividerElement.setPointerCapture(pointerId);
+          }
+          activeColumnDividerElement.addEventListener('pointermove', this.onDividerPointerMove);
+          activeColumnDividerElement.addEventListener('pointerup', this.onDividerPointerUp);
       }
       /**
        * Determines if the specified column or any columns to the left are resizable.
@@ -70505,15 +70504,15 @@ focus outline in that case.
           this.expansionManager.collapseAll();
       }
       /** @internal */
-      onRightDividerMouseDown(event, columnIndex) {
-          if (event.button === 0) {
-              this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getRightDividerIndex(columnIndex));
+      onRightDividerPointerDown(event, columnIndex) {
+          if (event.pointerType !== 'mouse' || event.button === 0) {
+              this.layoutManager.beginColumnInteractiveSize(event.target, event.pointerId, event.clientX, this.getRightDividerIndex(columnIndex));
           }
       }
       /** @internal */
-      onLeftDividerMouseDown(event, columnIndex) {
-          if (event.button === 0) {
-              this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getLeftDividerIndex(columnIndex));
+      onLeftDividerPointerDown(event, columnIndex) {
+          if (event.pointerType !== 'mouse' || event.button === 0) {
+              this.layoutManager.beginColumnInteractiveSize(event.target, event.pointerId, event.clientX, this.getLeftDividerIndex(columnIndex));
           }
       }
       /** @internal */