@vonage/vivid 5.5.0 → 5.7.0

package/data-grid/definition.cjs

@@ -16,7 +16,7 @@ const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-
 
 const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 
-const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
+const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
 
 let kernelMode;
 const kernelAttr = "fast-kernel";
@@ -106,6 +106,39 @@ const noop = () => void 0;
         result.globalThis = result;
     }
 })();
+(function requestIdleCallbackPolyfill() {
+    if ("requestIdleCallback" in globalThis) {
+        return;
+    }
+    /**
+     * A polyfill for requestIdleCallback that falls back to setTimeout.
+     *
+     * @param callback - The function to call when the browser is idle.
+     * @param options - Options object that may contain a timeout property.
+     * @returns An ID that can be used to cancel the callback.
+     * @public
+     */
+    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
+        const start = Date.now();
+        return setTimeout(() => {
+            callback({
+                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
+                    ? Date.now() - start >= options.timeout
+                    : false,
+                timeRemaining: () => 0,
+            });
+        }, 1);
+    };
+    /**
+     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
+     *
+     * @param id - The ID of the callback to cancel.
+     * @public
+     */
+    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
+        clearTimeout(id);
+    };
+})();
 
 // ensure FAST global - duplicated debug.ts
 const propConfig = {
@@ -1011,6 +1044,7 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
       case DataGridCellTypes.columnHeader:
         if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
           const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+          /* v8 ignore else -- @preserve */
           if (focusTarget !== null) {
             focusTarget.focus();
           }
@@ -1019,6 +1053,7 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
       default:
         if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
           const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+          /* v8 ignore else -- @preserve */
           if (focusTarget !== null) {
             focusTarget.focus();
           }
@@ -1029,6 +1064,7 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
   }
   handleFocusout(_) {
     this.shadowRoot.querySelector(".base").classList.remove("active");
+    /* v8 ignore else -- @preserve */
     if (this !== document.activeElement && !this.contains(document.activeElement)) {
       this.isActiveCell = false;
     }
@@ -1044,32 +1080,38 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
           return;
         }
         switch (this.cellType) {
-          case DataGridCellTypes.columnHeader:
+          case DataGridCellTypes.columnHeader: {
             if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
               const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+              /* v8 ignore else -- @preserve */
               if (focusTarget !== null) {
                 focusTarget.focus();
               }
               e.preventDefault();
             }
             break;
-          default:
+          }
+          default: {
             if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
               const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+              /* v8 ignore else -- @preserve */
               if (focusTarget !== null) {
                 focusTarget.focus();
               }
               e.preventDefault();
             }
             break;
+          }
         }
         break;
-      case fastWebUtilities.keyEscape:
+      case fastWebUtilities.keyEscape: {
+        /* v8 ignore else -- @preserve */
         if (this.contains(document.activeElement) && document.activeElement !== this) {
           this.focus();
           e.preventDefault();
         }
         break;
+      }
     }
   }
   updateCellView() {
@@ -1253,6 +1295,7 @@ class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement)
    */
   connectedCallback() {
     super.connectedCallback();
+    /* v8 ignore else -- @preserve */
     if (this.behaviorOrchestrator === null) {
       this.updateItemTemplate();
       this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
@@ -1284,6 +1327,7 @@ class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement)
     this.removeEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
   }
   handleFocusout(_) {
+    /* v8 ignore else -- @preserve */
     if (!this.contains(document.activeElement)) {
       this.focusColumnIndex = 0;
     }
@@ -1440,6 +1484,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       focusTarget.focus();
     };
     this.onChildListChange = (mutations, _) => {
+      /* v8 ignore else -- @preserve */
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
@@ -1527,7 +1572,9 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     };
     this.#changeHandler = {
       handleChange(dataGrid, propertyName) {
+        /* v8 ignore else -- @preserve */
         if (propertyName === "columnDefinitions") {
+          /* v8 ignore else -- @preserve */
           if (dataGrid.$fastController.isConnected) {
             dataGrid.toggleGeneratedHeader();
           }
@@ -1610,6 +1657,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    * @internal
    */
   gridTemplateColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updateRowIndexes();
       if (this.fixedColumns && this.fixedColumns > 0) {
@@ -1639,6 +1687,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.generatedGridTemplateColumns = _DataGrid.generateTemplateColumns(
       this.columnDefinitions
     );
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.columnDefinitionsStale = true;
       this.queueRowIndexUpdate();
@@ -1648,6 +1697,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    * @internal
    */
   headerCellItemTemplateChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       if (this.generatedHeader !== null) {
         this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
@@ -1674,6 +1724,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    * @internal
    */
   fixedColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.applyFixedColumns();
       this.setupResizeObserver();
@@ -1699,9 +1750,11 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    */
   connectedCallback() {
     super.connectedCallback();
+    /* v8 ignore else -- @preserve */
     if (this.rowItemTemplate === void 0) {
       this.rowItemTemplate = this.defaultRowItemTemplate;
     }
+    /* v8 ignore else -- @preserve */
     if (this.behaviorOrchestrator === null) {
       this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
       this.$fastController.addBehavior(this.behaviorOrchestrator);
@@ -1841,13 +1894,16 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         }
         this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
         break;
-      case fastWebUtilities.keyHome:
+      case fastWebUtilities.keyHome: {
+        /* v8 ignore else -- @preserve */
         if (e.ctrlKey) {
           e.preventDefault();
           this.focusOnCell(0, 0, true);
         }
         break;
-      case fastWebUtilities.keyEnd:
+      }
+      case fastWebUtilities.keyEnd: {
+        /* v8 ignore else -- @preserve */
         if (e.ctrlKey && this.columnDefinitions !== null) {
           e.preventDefault();
           this.focusOnCell(
@@ -1857,6 +1913,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
           );
         }
         break;
+      }
     }
   }
   queueFocusUpdate() {
@@ -1885,6 +1942,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       this.generatedHeader.columnDefinitions = this.columnDefinitions;
       this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
       this.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
+      /* v8 ignore else -- @preserve */
       if (this.firstChild !== null) {
         this.insertBefore(generatedHeaderElement, this.firstChild);
       }
@@ -1952,8 +2010,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
+        /* v8 ignore else -- @preserve */
         if (index < cells.length) {
           const gridCell = cells[index];
+          /* v8 ignore else -- @preserve */
           if (typeof gridCell.setFixedPosition === "function") {
             gridCell.setFixedPosition(`${position}px`);
           }
@@ -1991,8 +2051,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
+        /* v8 ignore else -- @preserve */
         if (index < cells.length) {
           const gridCell = cells[index];
+          /* v8 ignore else -- @preserve */
           if (typeof gridCell.setFixedPosition === "function") {
             gridCell.setFixedPosition(void 0);
           }
@@ -2192,6 +2254,25 @@ function renderSortIcons(c) {
   )}
 	`;
 }
+function shouldAnnounceSortState(x) {
+  return x.cellType === DataGridCellTypes.columnHeader && x.sortDirection !== void 0;
+}
+function getSortStateKey(x) {
+  return x.sortDirection ?? DataGridCellSortStates.none;
+}
+function getLocalizedSortStatus(x) {
+  const direction = getSortStateKey(x);
+  const sortStatus = x.locale.dataGrid.cell.sortStatus;
+  return sortStatus?.[direction];
+}
+function getLocalizedSortInstruction(x) {
+  const direction = getSortStateKey(x);
+  const sortInstruction = x.locale.dataGrid.cell.sortInstruction;
+  return sortInstruction?.[direction];
+}
+function getSortAnnouncement(x) {
+  return [getLocalizedSortStatus(x), getLocalizedSortInstruction(x)].filter((part) => !!part).join(" ").trim();
+}
 function handleKeyDown(x, e) {
   if (e.key === fastWebUtilities.keyEnter || e.key === fastWebUtilities.keySpace) {
     x._handleInteraction();
@@ -2216,12 +2297,29 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.selected ? fastElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? fastElement.html`<${visuallyHiddenTagName}
+								data-announcement="selection"
+							>
+								${(x2) => x2.locale.dataGrid.cell.selected}
+							</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${fastElement.when(
     shouldShowSortIcons,
-    fastElement.html`<${visuallyHiddenTagName}>${(x) => x.locale.dataGrid.cell.button}</${visuallyHiddenTagName}>
+    fastElement.html`<${visuallyHiddenTagName}
+							data-announcement="button-role"
+						>
+							${(x) => x.locale.dataGrid.cell.button}
+						</${visuallyHiddenTagName}>
 					`
+  )}
+				${fastElement.when(
+    shouldAnnounceSortState,
+    fastElement.html`<${visuallyHiddenTagName}
+							aria-live="polite"
+							data-announcement="sort-state"
+						>
+							${getSortAnnouncement}
+						</${visuallyHiddenTagName}>`
   )}
 				${(_) => renderSortIcons(context)}
 			</div>

package/data-grid/definition.js

@@ -12,7 +12,7 @@ const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-
 
 const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 
-const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
+const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
 
 let kernelMode;
 const kernelAttr = "fast-kernel";
@@ -102,6 +102,39 @@ const noop = () => void 0;
         result.globalThis = result;
     }
 })();
+(function requestIdleCallbackPolyfill() {
+    if ("requestIdleCallback" in globalThis) {
+        return;
+    }
+    /**
+     * A polyfill for requestIdleCallback that falls back to setTimeout.
+     *
+     * @param callback - The function to call when the browser is idle.
+     * @param options - Options object that may contain a timeout property.
+     * @returns An ID that can be used to cancel the callback.
+     * @public
+     */
+    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
+        const start = Date.now();
+        return setTimeout(() => {
+            callback({
+                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
+                    ? Date.now() - start >= options.timeout
+                    : false,
+                timeRemaining: () => 0,
+            });
+        }, 1);
+    };
+    /**
+     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
+     *
+     * @param id - The ID of the callback to cancel.
+     * @public
+     */
+    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
+        clearTimeout(id);
+    };
+})();
 
 // ensure FAST global - duplicated debug.ts
 const propConfig = {
@@ -1007,6 +1040,7 @@ class DataGridCell extends Localized(HostSemantics(VividElement)) {
       case DataGridCellTypes.columnHeader:
         if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
           const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+          /* v8 ignore else -- @preserve */
           if (focusTarget !== null) {
             focusTarget.focus();
           }
@@ -1015,6 +1049,7 @@ class DataGridCell extends Localized(HostSemantics(VividElement)) {
       default:
         if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
           const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+          /* v8 ignore else -- @preserve */
           if (focusTarget !== null) {
             focusTarget.focus();
           }
@@ -1025,6 +1060,7 @@ class DataGridCell extends Localized(HostSemantics(VividElement)) {
   }
   handleFocusout(_) {
     this.shadowRoot.querySelector(".base").classList.remove("active");
+    /* v8 ignore else -- @preserve */
     if (this !== document.activeElement && !this.contains(document.activeElement)) {
       this.isActiveCell = false;
     }
@@ -1040,32 +1076,38 @@ class DataGridCell extends Localized(HostSemantics(VividElement)) {
           return;
         }
         switch (this.cellType) {
-          case DataGridCellTypes.columnHeader:
+          case DataGridCellTypes.columnHeader: {
             if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
               const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+              /* v8 ignore else -- @preserve */
               if (focusTarget !== null) {
                 focusTarget.focus();
               }
               e.preventDefault();
             }
             break;
-          default:
+          }
+          default: {
             if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
               const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+              /* v8 ignore else -- @preserve */
               if (focusTarget !== null) {
                 focusTarget.focus();
               }
               e.preventDefault();
             }
             break;
+          }
         }
         break;
-      case keyEscape:
+      case keyEscape: {
+        /* v8 ignore else -- @preserve */
         if (this.contains(document.activeElement) && document.activeElement !== this) {
           this.focus();
           e.preventDefault();
         }
         break;
+      }
     }
   }
   updateCellView() {
@@ -1249,6 +1291,7 @@ class DataGridRow extends HostSemantics(VividElement) {
    */
   connectedCallback() {
     super.connectedCallback();
+    /* v8 ignore else -- @preserve */
     if (this.behaviorOrchestrator === null) {
       this.updateItemTemplate();
       this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
@@ -1280,6 +1323,7 @@ class DataGridRow extends HostSemantics(VividElement) {
     this.removeEventListener(eventKeyDown, this.handleKeydown);
   }
   handleFocusout(_) {
+    /* v8 ignore else -- @preserve */
     if (!this.contains(document.activeElement)) {
       this.focusColumnIndex = 0;
     }
@@ -1436,6 +1480,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       focusTarget.focus();
     };
     this.onChildListChange = (mutations, _) => {
+      /* v8 ignore else -- @preserve */
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
@@ -1523,7 +1568,9 @@ const _DataGrid = class _DataGrid extends VividElement {
     };
     this.#changeHandler = {
       handleChange(dataGrid, propertyName) {
+        /* v8 ignore else -- @preserve */
         if (propertyName === "columnDefinitions") {
+          /* v8 ignore else -- @preserve */
           if (dataGrid.$fastController.isConnected) {
             dataGrid.toggleGeneratedHeader();
           }
@@ -1606,6 +1653,7 @@ const _DataGrid = class _DataGrid extends VividElement {
    * @internal
    */
   gridTemplateColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updateRowIndexes();
       if (this.fixedColumns && this.fixedColumns > 0) {
@@ -1635,6 +1683,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.generatedGridTemplateColumns = _DataGrid.generateTemplateColumns(
       this.columnDefinitions
     );
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.columnDefinitionsStale = true;
       this.queueRowIndexUpdate();
@@ -1644,6 +1693,7 @@ const _DataGrid = class _DataGrid extends VividElement {
    * @internal
    */
   headerCellItemTemplateChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       if (this.generatedHeader !== null) {
         this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
@@ -1670,6 +1720,7 @@ const _DataGrid = class _DataGrid extends VividElement {
    * @internal
    */
   fixedColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.applyFixedColumns();
       this.setupResizeObserver();
@@ -1695,9 +1746,11 @@ const _DataGrid = class _DataGrid extends VividElement {
    */
   connectedCallback() {
     super.connectedCallback();
+    /* v8 ignore else -- @preserve */
     if (this.rowItemTemplate === void 0) {
       this.rowItemTemplate = this.defaultRowItemTemplate;
     }
+    /* v8 ignore else -- @preserve */
     if (this.behaviorOrchestrator === null) {
       this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
       this.$fastController.addBehavior(this.behaviorOrchestrator);
@@ -1837,13 +1890,16 @@ const _DataGrid = class _DataGrid extends VividElement {
         }
         this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
         break;
-      case keyHome:
+      case keyHome: {
+        /* v8 ignore else -- @preserve */
         if (e.ctrlKey) {
           e.preventDefault();
           this.focusOnCell(0, 0, true);
         }
         break;
-      case keyEnd:
+      }
+      case keyEnd: {
+        /* v8 ignore else -- @preserve */
         if (e.ctrlKey && this.columnDefinitions !== null) {
           e.preventDefault();
           this.focusOnCell(
@@ -1853,6 +1909,7 @@ const _DataGrid = class _DataGrid extends VividElement {
           );
         }
         break;
+      }
     }
   }
   queueFocusUpdate() {
@@ -1881,6 +1938,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       this.generatedHeader.columnDefinitions = this.columnDefinitions;
       this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
       this.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
+      /* v8 ignore else -- @preserve */
       if (this.firstChild !== null) {
         this.insertBefore(generatedHeaderElement, this.firstChild);
       }
@@ -1948,8 +2006,10 @@ const _DataGrid = class _DataGrid extends VividElement {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
+        /* v8 ignore else -- @preserve */
         if (index < cells.length) {
           const gridCell = cells[index];
+          /* v8 ignore else -- @preserve */
           if (typeof gridCell.setFixedPosition === "function") {
             gridCell.setFixedPosition(`${position}px`);
           }
@@ -1987,8 +2047,10 @@ const _DataGrid = class _DataGrid extends VividElement {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
+        /* v8 ignore else -- @preserve */
         if (index < cells.length) {
           const gridCell = cells[index];
+          /* v8 ignore else -- @preserve */
           if (typeof gridCell.setFixedPosition === "function") {
             gridCell.setFixedPosition(void 0);
           }
@@ -2188,6 +2250,25 @@ function renderSortIcons(c) {
   )}
 	`;
 }
+function shouldAnnounceSortState(x) {
+  return x.cellType === DataGridCellTypes.columnHeader && x.sortDirection !== void 0;
+}
+function getSortStateKey(x) {
+  return x.sortDirection ?? DataGridCellSortStates.none;
+}
+function getLocalizedSortStatus(x) {
+  const direction = getSortStateKey(x);
+  const sortStatus = x.locale.dataGrid.cell.sortStatus;
+  return sortStatus?.[direction];
+}
+function getLocalizedSortInstruction(x) {
+  const direction = getSortStateKey(x);
+  const sortInstruction = x.locale.dataGrid.cell.sortInstruction;
+  return sortInstruction?.[direction];
+}
+function getSortAnnouncement(x) {
+  return [getLocalizedSortStatus(x), getLocalizedSortInstruction(x)].filter((part) => !!part).join(" ").trim();
+}
 function handleKeyDown(x, e) {
   if (e.key === keyEnter || e.key === keySpace) {
     x._handleInteraction();
@@ -2212,12 +2293,29 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.selected ? html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? html`<${visuallyHiddenTagName}
+								data-announcement="selection"
+							>
+								${(x2) => x2.locale.dataGrid.cell.selected}
+							</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${when(
     shouldShowSortIcons,
-    html`<${visuallyHiddenTagName}>${(x) => x.locale.dataGrid.cell.button}</${visuallyHiddenTagName}>
+    html`<${visuallyHiddenTagName}
+							data-announcement="button-role"
+						>
+							${(x) => x.locale.dataGrid.cell.button}
+						</${visuallyHiddenTagName}>
 					`
+  )}
+				${when(
+    shouldAnnounceSortState,
+    html`<${visuallyHiddenTagName}
+							aria-live="polite"
+							data-announcement="sort-state"
+						>
+							${getSortAnnouncement}
+						</${visuallyHiddenTagName}>`
   )}
 				${(_) => renderSortIcons(context)}
 			</div>