@dxos/lit-grid 0.6.12-main.5cc132e → 0.6.12-main.78ddbdf

package/src/dx-grid.ts

@@ -2,21 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, state, property, eventOptions } from 'lit/decorators.js';
 import { ref, createRef, type Ref } from 'lit/directives/ref.js';
 
+// eslint-disable-next-line unused-imports/no-unused-imports
+import './dx-grid-axis-resize-handle';
 import {
   type AxisMeta,
   type CellIndex,
-  type CellValue,
   DxAxisResize,
-  type DxAxisResizeProps,
+  type DxAxisResizeInternal,
   DxEditRequest,
   type DxGridAxis,
+  type DxGridAxisMeta,
+  type DxGridCells,
+  DxGridCellsSelect,
   type DxGridMode,
+  type DxGridPointer,
+  type DxGridPosition,
   type DxGridPositionNullable,
+  type DxGridRange,
 } from './types';
+import { separator, toCellIndex } from './util';
 
 /**
  * The size in pixels of the gap between cells
@@ -43,11 +51,6 @@ const sizeColMax = 1024;
 const sizeRowMin = 16;
 const sizeRowMax = 1024;
 
-/**
- * Separator for serializing cell position vectors
- */
-const separator = ',';
-
 //
 // A1 notation is the fallback for numbering columns and rows.
 //
@@ -68,7 +71,7 @@ const closestAction = (target: EventTarget | null): { action: string | null; act
   return { actionEl, action: actionEl?.getAttribute('data-dx-grid-action') ?? null };
 };
 
-const closestCell = (target: EventTarget | null, actionEl?: HTMLElement | null): Record<DxGridAxis, number> | null => {
+const closestCell = (target: EventTarget | null, actionEl?: HTMLElement | null): DxGridPositionNullable => {
   let cellElement = actionEl;
   if (!cellElement) {
     const { action, actionEl } = closestAction(target);
@@ -88,9 +91,6 @@ const closestCell = (target: EventTarget | null, actionEl?: HTMLElement | null):
 const isSameCell = (a: DxGridPositionNullable, b: DxGridPositionNullable) =>
   a && b && Number.isFinite(a.col) && Number.isFinite(a.row) && a.col === b.col && a.row === b.row;
 
-const toCellIndex = (cellCoords: Record<DxGridAxis, number>): CellIndex =>
-  `${cellCoords.col}${separator}${cellCoords.row}`;
-
 const localChId = (c0: number) => `ch--${c0}`;
 const localRhId = (r0: number) => `rh--${r0}`;
 
@@ -98,6 +98,22 @@ const getPage = (axis: string, event: PointerEvent) => (axis === 'col' ? event.p
 
 @customElement('dx-grid')
 export class DxGrid extends LitElement {
+  constructor() {
+    super();
+    this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal as EventListener);
+    this.addEventListener('wheel', this.handleWheel);
+    this.addEventListener('pointerdown', this.handlePointerDown);
+    this.addEventListener('pointermove', this.handlePointerMove);
+    this.addEventListener('pointerup', this.handlePointerUp);
+    this.addEventListener('pointerleave', this.handlePointerUp);
+    this.addEventListener('focus', this.handleFocus, { capture: true });
+    this.addEventListener('blur', this.handleBlur, { capture: true });
+    this.addEventListener('keydown', this.handleKeydown);
+  }
+
+  @property({ type: String })
+  gridId: string = 'default-grid-id';
+
   @property({ type: Object })
   rowDefault: AxisMeta = { size: 32 };
 
@@ -105,62 +121,71 @@ export class DxGrid extends LitElement {
   columnDefault: AxisMeta = { size: 180 };
 
   @property({ type: Object })
-  rows: Record<string, AxisMeta> = {};
+  rows: DxGridAxisMeta = {};
 
   @property({ type: Object })
-  columns: Record<string, AxisMeta> = {};
+  columns: DxGridAxisMeta = {};
 
   @property({ type: Object })
-  cells: Record<CellIndex, CellValue> = {};
+  initialCells: DxGridCells = {};
 
   @property({ type: String })
   mode: DxGridMode = 'browse';
 
+  /**
+   * When this function is defined, it is used first to try to get a value for a cell, and otherwise will fall back
+   * to `cells`.
+   */
+  getCells: ((nextRange: DxGridRange) => DxGridCells) | null = null;
+
+  @state()
+  private cells: DxGridCells = {};
+
   //
   // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
   //
 
   @state()
-  posInline = 0;
+  private posInline = 0;
 
   @state()
-  posBlock = 0;
+  private posBlock = 0;
 
   //
   // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
   //
 
   @state()
-  sizeInline = 0;
+  private sizeInline = 0;
 
   @state()
-  sizeBlock = 0;
+  private sizeBlock = 0;
 
   //
   // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
   //
 
   @state()
-  overscanInline = 0;
+  private overscanInline = 0;
 
   @state()
-  overscanBlock = 0;
+  private overscanBlock = 0;
 
   //
   // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
   //
 
   @state()
-  binInlineMin = 0;
+  private binInlineMin = 0;
 
   @state()
-  binInlineMax = this.colSize(0);
+  private binInlineMax = this.colSize(0);
 
   @state()
-  binBlockMin = 0;
+  private binBlockMin = 0;
 
   @state()
-  binBlockMax = this.rowSize(0);
+  private binBlockMax = this.rowSize(0);
 
   //
   // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
@@ -168,97 +193,129 @@ export class DxGrid extends LitElement {
   //
 
   @state()
-  visColMin = 0;
+  private visColMin = 0;
 
   @state()
-  visColMax = 1;
+  private visColMax = 1;
 
   @state()
-  visRowMin = 0;
+  private visRowMin = 0;
 
   @state()
-  visRowMax = 1;
+  private visRowMax = 1;
 
   //
   // `template` is the rendered value of `grid-{axis}-template`.
   //
   @state()
-  templateColumns = `${this.colSize(0)}px`;
+  private templateColumns = `${this.colSize(0)}px`;
 
   @state()
-  templateRows = `${this.rowSize(0)}px`;
+  private templateRows = `${this.rowSize(0)}px`;
 
   //
-  // Resize state
+  // Focus, selection, and resize states
   //
 
   @state()
-  colSizes: Record<string, number> = {};
+  private pointer: DxGridPointer = null;
+
+  @state()
+  private colSizes: Record<string, number> = {};
+
+  @state()
+  private rowSizes: Record<string, number> = {};
+
+  @state()
+  private focusActive: boolean = false;
 
   @state()
-  rowSizes: Record<string, number> = {};
+  private focusedCell: DxGridPosition = { col: 0, row: 0 };
 
   @state()
-  resizing: null | (DxAxisResizeProps & { page: number }) = null;
+  private selectionStart: DxGridPosition = { col: 0, row: 0 };
+
+  @state()
+  private selectionEnd: DxGridPosition = { col: 0, row: 0 };
 
   //
   // Primary pointer and keyboard handlers
   //
 
-  handlePointerDown = (event: PointerEvent) => {
-    const { action, actionEl } = closestAction(event.target);
-    if (action) {
-      if (action.startsWith('resize') && this.mode === 'browse') {
-        const [resize, index] = action.split(',');
-        const [_, axis] = resize.split('-');
-        this.resizing = {
-          axis: axis as DxGridAxis,
-          size: axis === 'col' ? this.colSize(index) : this.rowSize(index),
-          page: getPage(axis, event),
-          index,
-        };
-      } else if (action === 'cell') {
-        const cellCoords = closestCell(event.target, actionEl);
-        if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
-          this.dispatchEvent(
-            new DxEditRequest({
-              cellIndex: toCellIndex(cellCoords!),
-              cellBox: this.focusedCellBox(),
-            }),
-          );
+  private dispatchEditRequest(initialContent?: string) {
+    this.snapPosToFocusedCell();
+    // Without deferring, the event dispatches before `focusedCellBox` can get updated bounds of the cell, hence:
+    queueMicrotask(() =>
+      this.dispatchEvent(
+        new DxEditRequest({
+          cellIndex: toCellIndex(this.focusedCell),
+          cellBox: this.focusedCellBox(),
+          initialContent,
+        }),
+      ),
+    );
+  }
+
+  private handlePointerDown = (event: PointerEvent) => {
+    if (event.isPrimary) {
+      const { action, actionEl } = closestAction(event.target);
+      if (action) {
+        if (action.startsWith('resize') && this.mode === 'browse') {
+          const [resize, index] = action.split(',');
+          const [_, axis] = resize.split('-');
+          this.pointer = {
+            state: 'resizing',
+            axis: axis as DxGridAxis,
+            size: axis === 'col' ? this.colSize(index) : this.rowSize(index),
+            page: getPage(axis, event),
+            index,
+          };
+        } else if (action === 'cell') {
+          const cellCoords = closestCell(event.target, actionEl);
+          if (cellCoords) {
+            this.pointer = { state: 'selecting' };
+            this.selectionStart = cellCoords;
+          }
+          if (this.mode === 'edit') {
+            event.preventDefault();
+          } else {
+            if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
+              this.dispatchEditRequest();
+            }
+          }
         }
       }
     }
   };
 
-  handlePointerUp = (_event: PointerEvent) => {
-    if (this.resizing) {
-      const resizeEvent = new DxAxisResize({
-        axis: this.resizing.axis,
-        index: this.resizing.index,
-        size: this[this.resizing.axis === 'col' ? 'colSize' : 'rowSize'](this.resizing.index),
-      });
-      this.dispatchEvent(resizeEvent);
-      this.resizing = null;
+  private handlePointerUp = (event: PointerEvent) => {
+    if (this.pointer?.state === 'resizing') {
+      // do nothing, todo: remove
+    } else {
+      const cell = closestCell(event.target);
+      if (cell) {
+        this.selectionEnd = cell;
+        this.dispatchEvent(
+          new DxGridCellsSelect({
+            start: this.selectionStart,
+            end: this.selectionEnd,
+          }),
+        );
+      }
     }
+    this.pointer = null;
   };
 
-  handlePointerMove = (event: PointerEvent) => {
-    if (this.resizing) {
-      const delta = getPage(this.resizing.axis, event) - this.resizing.page;
-      if (this.resizing.axis === 'col') {
-        const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
-        this.colSizes = { ...this.colSizes, [this.resizing.index]: nextSize };
-        this.updateVisInline();
-      } else {
-        const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
-        this.rowSizes = { ...this.rowSizes, [this.resizing.index]: nextSize };
-        this.updateVisBlock();
+  private handlePointerMove = (event: PointerEvent) => {
+    if (this.pointer?.state === 'selecting') {
+      const cell = closestCell(event.target);
+      if (cell && (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
+        this.selectionEnd = cell;
       }
     }
   };
 
-  handleKeydown(event: KeyboardEvent) {
+  private handleKeydown(event: KeyboardEvent) {
     if (this.focusActive && this.mode === 'browse') {
       // Adjust state
       switch (event.key) {
@@ -275,15 +332,15 @@ export class DxGrid extends LitElement {
           this.focusedCell = { ...this.focusedCell, col: Math.max(0, this.focusedCell.col - 1) };
           break;
       }
-      // Emit interactions
+      // Emit edit request if relevant
       switch (event.key) {
         case 'Enter':
-          this.dispatchEvent(
-            new DxEditRequest({
-              cellIndex: toCellIndex(this.focusedCell),
-              cellBox: this.focusedCellBox(),
-            }),
-          );
+          this.dispatchEditRequest();
+          break;
+        default:
+          if (event.key.length === 1 && event.key.match(/\P{Cc}/u)) {
+            this.dispatchEditRequest(event.key);
+          }
           break;
       }
       // Handle virtualization & focus consequences
@@ -312,7 +369,8 @@ export class DxGrid extends LitElement {
   }
 
   private cell(c: number | string, r: number | string) {
-    return this.cells[`${c}${separator}${r}`];
+    const index: CellIndex = `${c}${separator}${r}`;
+    return this.cells[index] ?? this.initialCells[index];
   }
 
   private focusedCellBox(): DxEditRequest['cellBox'] {
@@ -339,7 +397,7 @@ export class DxGrid extends LitElement {
   //
 
   @state()
-  observer = new ResizeObserver((entries) => {
+  private observer = new ResizeObserver((entries) => {
     const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
       inlineSize: 0,
       blockSize: 0,
@@ -355,28 +413,32 @@ export class DxGrid extends LitElement {
     }
   });
 
-  viewportRef: Ref<HTMLDivElement> = createRef();
+  private viewportRef: Ref<HTMLDivElement> = createRef();
+
+  private maybeUpdateVis = () => {
+    if (
+      this.posInline >= this.binInlineMin &&
+      this.posInline < this.binInlineMax &&
+      this.posBlock >= this.binBlockMin &&
+      this.posBlock < this.binBlockMax
+    ) {
+      // do nothing
+    } else {
+      // console.info(
+      //   '[updating bounds]',
+      //   'wheel',
+      //   [this.binInlineMin, this.posInline, this.binInlineMax],
+      //   [this.binBlockMin, this.posBlock, this.binBlockMax],
+      // );
+      this.updateVis();
+    }
+  };
 
-  handleWheel = ({ deltaX, deltaY }: WheelEvent) => {
+  private handleWheel = ({ deltaX, deltaY }: WheelEvent) => {
     if (this.mode === 'browse') {
       this.posInline = Math.max(0, this.posInline + deltaX);
       this.posBlock = Math.max(0, this.posBlock + deltaY);
-      if (
-        this.posInline >= this.binInlineMin &&
-        this.posInline < this.binInlineMax &&
-        this.posBlock >= this.binBlockMin &&
-        this.posBlock < this.binBlockMax
-      ) {
-        // do nothing
-      } else {
-        // console.info(
-        //   '[updating bounds]',
-        //   'wheel',
-        //   [this.binInlineMin, this.posInline, this.binInlineMax],
-        //   [this.binBlockMin, this.posBlock, this.binBlockMax],
-        // );
-        this.updateVis();
-      }
+      this.maybeUpdateVis();
     }
   };
 
@@ -455,14 +517,8 @@ export class DxGrid extends LitElement {
 
   // Focus handlers
 
-  @state()
-  focusedCell: Record<DxGridAxis, number> = { col: 0, row: 0 };
-
-  @state()
-  focusActive: boolean = false;
-
   @eventOptions({ capture: true })
-  handleFocus(event: FocusEvent) {
+  private handleFocus(event: FocusEvent) {
     const cellCoords = closestCell(event.target);
     if (cellCoords) {
       this.focusedCell = cellCoords;
@@ -471,17 +527,14 @@ export class DxGrid extends LitElement {
   }
 
   @eventOptions({ capture: true })
-  handleBlur(event: FocusEvent) {
+  private handleBlur(event: FocusEvent) {
     // Only unset `focusActive` if focus is not moving to an element within the grid.
-    if (
-      !event.relatedTarget ||
-      (event.relatedTarget as HTMLElement).closest('.dx-grid__viewport') !== this.viewportRef.value
-    ) {
+    if (!event.relatedTarget || !(event.relatedTarget as HTMLElement).closest(`[data-grid="${this.gridId}"]`)) {
       this.focusActive = false;
     }
   }
 
-  focusedCellElement() {
+  private focusedCellElement() {
     return this.viewportRef.value?.querySelector(
       `[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`,
     ) as HTMLElement | null;
@@ -490,13 +543,13 @@ export class DxGrid extends LitElement {
   /**
    * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
    */
-  refocus(increment?: 'down' | 'right') {
+  refocus(increment?: 'col' | 'row', delta: 1 | -1 = 1) {
     switch (increment) {
-      case 'down':
-        this.focusedCell = { ...this.focusedCell, row: this.focusedCell.row + 1 };
+      case 'row':
+        this.focusedCell = { ...this.focusedCell, row: this.focusedCell.row + delta };
         break;
-      case 'right':
-        this.focusedCell = { ...this.focusedCell, col: this.focusedCell.col + 1 };
+      case 'col':
+        this.focusedCell = { ...this.focusedCell, col: this.focusedCell.col + delta };
     }
     (this.focusedCell.row < this.visRowMin ||
     this.focusedCell.row > this.visRowMax ||
@@ -505,6 +558,9 @@ export class DxGrid extends LitElement {
       ? this.viewportRef.value
       : this.focusedCellElement()
     )?.focus({ preventScroll: true });
+    if (increment) {
+      this.snapPosToFocusedCell();
+    }
   }
 
   /**
@@ -539,7 +595,7 @@ export class DxGrid extends LitElement {
           acc += this.colSize(this.visColMin + overscanCol + c0) + gap;
           return acc;
         }, 0);
-        this.posInline = this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline;
+        this.posInline = Math.max(0, this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline);
         this.updateVisInline();
       }
 
@@ -551,12 +607,60 @@ export class DxGrid extends LitElement {
           acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;
           return acc;
         }, 0);
-        this.posBlock = this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock;
+        this.posBlock = Math.max(0, this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock);
         this.updateVisBlock();
       }
     }
   }
 
+  //
+  // Map scroll DOM methods to virtualized value.
+  //
+
+  override get scrollLeft() {
+    return this.posInline;
+  }
+
+  override set scrollLeft(nextValue: number) {
+    this.posInline = nextValue;
+    this.maybeUpdateVis();
+  }
+
+  override get scrollTop() {
+    return this.posBlock;
+  }
+
+  override set scrollTop(nextValue: number) {
+    this.posBlock = nextValue;
+    this.maybeUpdateVis();
+  }
+
+  //
+  // Resize handlers
+  //
+  private handleAxisResizeInternal(event: DxAxisResizeInternal) {
+    event.stopPropagation();
+    const { axis, delta, size, index, type } = event;
+    if (axis === 'col') {
+      const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
+      this.colSizes = { ...this.colSizes, [index]: nextSize };
+      this.updateVisInline();
+    } else {
+      const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, size + delta));
+      this.rowSizes = { ...this.rowSizes, [index]: nextSize };
+      this.updateVisBlock();
+    }
+    if (type === 'dropped') {
+      this.dispatchEvent(
+        new DxAxisResize({
+          axis,
+          index,
+          size: this[axis === 'col' ? 'colSize' : 'rowSize'](index),
+        }),
+      );
+    }
+  }
+
   //
   // Render and other lifecycle methods
   //
@@ -564,18 +668,21 @@ export class DxGrid extends LitElement {
   override render() {
     const visibleCols = this.visColMax - this.visColMin;
     const visibleRows = this.visRowMax - this.visRowMin;
-    const offsetInline = gap + this.binInlineMin - this.posInline - this.overscanInline;
-    const offsetBlock = gap + this.binBlockMin - this.posBlock - this.overscanBlock;
+    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+
+    const selectColMin = Math.min(this.selectionStart.col, this.selectionEnd.col);
+    const selectColMax = Math.max(this.selectionStart.col, this.selectionEnd.col);
+    const selectRowMin = Math.min(this.selectionStart.row, this.selectionEnd.row);
+    const selectRowMax = Math.max(this.selectionStart.row, this.selectionEnd.row);
+    const selectVisible = selectColMin !== selectColMax || selectRowMin !== selectRowMax;
 
     return html`<div
       role="none"
       class="dx-grid"
-      @pointerdown=${this.handlePointerDown}
-      @pointerup=${this.handlePointerUp}
-      @pointermove=${this.handlePointerMove}
-      @focus=${this.handleFocus}
-      @blur=${this.handleBlur}
-      @keydown=${this.handleKeydown}
+      data-grid=${this.gridId}
+      data-grid-mode=${this.mode}
+      ?data-grid-select=${selectVisible}
     >
       <div role="none" class="dx-grid__corner"></div>
       <div role="none" class="dx-grid__columnheader">
@@ -593,9 +700,12 @@ export class DxGrid extends LitElement {
             >
               <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
               ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) &&
-              html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
-                <span class="sr-only">Resize</span>
-              </button>`}
+              html`<dx-grid-axis-resize-handle
+                axis="col"
+                index=${c}
+                size=${this.colSize(c)}
+                @dxaxisresizeinternal=${this.handleAxisResizeInternal}
+              ></dx-grid-axis-resize-handle>`}
             </div>`;
           })}
         </div>
@@ -612,9 +722,11 @@ export class DxGrid extends LitElement {
             return html`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
               <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
               ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) &&
-              html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
-                <span class="sr-only">Resize</span>
-              </button>`}
+              html`<dx-grid-axis-resize-handle
+                axis="row"
+                index=${r}
+                size=${this.rowSize(r)}
+              ></dx-grid-axis-resize-handle>`}
             </div>`;
           })}
         </div>
@@ -631,10 +743,16 @@ export class DxGrid extends LitElement {
               const c = c0 + this.visColMin;
               const r = r0 + this.visRowMin;
               const cell = this.cell(c, r);
+              const active = this.focusActive && this.focusedCell.col === c && this.focusedCell.row === r;
+              const selected = c >= selectColMin && c <= selectColMax && r >= selectRowMin && r <= selectRowMax;
               return html`<div
                 role="gridcell"
                 tabindex="0"
                 ?inert=${c < 0 || r < 0}
+                ?aria-selected=${selected}
+                class=${cell || active
+                  ? (cell?.className ? cell.className + ' ' : '') + (active ? 'dx-grid__cell--active' : '')
+                  : nothing}
                 aria-rowindex=${r}
                 aria-colindex=${c}
                 data-dx-grid-action="cell"
@@ -658,6 +776,12 @@ export class DxGrid extends LitElement {
   }
 
   override firstUpdated() {
+    if (this.getCells) {
+      this.cells = this.getCells({
+        start: { col: this.visColMin, row: this.visRowMin },
+        end: { col: this.visColMax, row: this.visRowMax },
+      });
+    }
     this.observer.observe(this.viewportRef.value!);
     this.colSizes = Object.entries(this.columns).reduce((acc: Record<string, number>, [colId, colMeta]) => {
       if (colMeta?.size) {
@@ -673,6 +797,22 @@ export class DxGrid extends LitElement {
     }, {});
   }
 
+  override willUpdate(changedProperties: Map<string, any>) {
+    if (
+      this.getCells &&
+      (changedProperties.has('initialCells') ||
+        changedProperties.has('visColMin') ||
+        changedProperties.has('visColMax') ||
+        changedProperties.has('visRowMin') ||
+        changedProperties.has('visRowMax'))
+    ) {
+      this.cells = this.getCells({
+        start: { col: this.visColMin, row: this.visRowMin },
+        end: { col: this.visColMax, row: this.visRowMax },
+      });
+    }
+  }
+
   override updated(changedProperties: Map<string, any>) {
     // Update the focused element if there is a change in bounds (otherwise Lit keeps focus on the relative element).
     if (