handsontable 18.0.0 → 18.1.0-rc1

package/utils/ghostTable.mjs

@@ -1,6 +1,39 @@
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
+import { renderCell } from '../renderers/renderCell.mjs';
 import { addClass } from './../helpers/dom/element.mjs';
 import { arrayEach } from './../helpers/array.mjs';
 import { throwWithCause } from '../helpers/errors.mjs';
+var /**
+   * Renders one sampled cell into the TD that will be measured, through the same `renderCell`
+   * contract `TableView.cellRenderer` uses: run the cell's own renderer, run the base renderer
+   * when that renderer did not chain it itself, then reset the chaining flag. Calling only the
+   * cell renderer here would leave the measured TD without `cellProperties.className` and the
+   * other base-renderer classes, so AutoRowSize and AutoColumnSize would measure a cell styled
+   * differently from the one the user sees.
+   *
+   * The sampled value must be rendered verbatim — the AutoRowSize and AutoColumnSize samplers
+   * already run `formatCellValue` when building samples. Formatting here again would
+   * double-format: a date sample already formatted to `1/1/24` fails the ISO-only
+   * `parseToLocalDate` and renders as `#bad-value#`, inflating the measured width.
+   *
+   * @param {HTMLTableCellElement} td The cell element that will be measured.
+   * @param {number} row Visual row index.
+   * @param {number} column Visual column index.
+   * @param {*} value The sampled cell value, already formatted by the sampler.
+   * @param {object} cellProperties The cell meta object.
+   */ _renderCell = /*#__PURE__*/ new WeakSet();
 /**
  * @class GhostTable
  */ class GhostTable {
@@ -180,13 +213,12 @@ import { throwWithCause } from '../helpers/errors.mjs';
         this.samples.forEach((sample)=>{
             arrayEach(sample.strings, (string)=>{
                 const column = string.col;
-                const cellProperties = this.hot.getCellMeta(row, column);
-                const renderer = this.hot.getCellRenderer(cellProperties);
+                const cellProperties = this.hot.getCellMetaTransient(row, column);
                 const td = rootDocument.createElement('td');
                 // Indicate that this element is created and supported by GhostTable. It can be useful to
                 // exclude rendering performance costly logic or exclude logic which doesn't work within a hidden table.
                 td.setAttribute('ghost-table', '1');
-                renderer(this.hot, td, row, column, this.hot.colToProp(column), string.value, cellProperties);
+                _class_private_method_get(this, _renderCell, renderCell1).call(this, td, row, column, string.value, cellProperties);
                 fragment.appendChild(td);
             });
         });
@@ -196,7 +228,10 @@ import { throwWithCause } from '../helpers/errors.mjs';
    * Creates DOM elements for headers and appends them to the THEAD element of the table.
    */ appendColumnHeadersRow() {
         const rootDocument = this.hot.rootDocument;
-        const domFragment = rootDocument.createDocumentFragment();
+        // The headers must sit in a real `<tr>` (`table > thead > tr > th`), mirroring the grid's
+        // DOM — the cell styling is scoped with child combinators (#4363), so a `<th>` appended
+        // straight into `<thead>` would miss it and measure without padding/borders.
+        const headersRow = rootDocument.createElement('tr');
         const columnHeaders = [];
         if (this.hot.hasRowHeaders()) {
             const th = rootDocument.createElement('th');
@@ -204,7 +239,7 @@ import { throwWithCause } from '../helpers/errors.mjs';
                 -1,
                 th
             ]);
-            domFragment.appendChild(th);
+            headersRow.appendChild(th);
         }
         this.samples.forEach((sample)=>{
             arrayEach(sample.strings, (string)=>{
@@ -214,11 +249,11 @@ import { throwWithCause } from '../helpers/errors.mjs';
                     column,
                     th
                 ]);
-                domFragment.appendChild(th);
+                headersRow.appendChild(th);
             });
         });
         // Appending DOM elements for headers
-        this.table.tHead.appendChild(domFragment);
+        this.table.tHead.appendChild(headersRow);
         arrayEach(columnHeaders, (columnHeader)=>{
             const [column, th] = columnHeader;
             // Using source method for filling a header with value.
@@ -236,14 +271,13 @@ import { throwWithCause } from '../helpers/errors.mjs';
         this.samples.forEach((sample)=>{
             arrayEach(sample.strings, (string)=>{
                 const row = string.row;
-                const cellProperties = this.hot.getCellMeta(row, column);
-                const renderer = this.hot.getCellRenderer(cellProperties);
+                const cellProperties = this.hot.getCellMetaTransient(row, column);
                 const td = rootDocument.createElement('td');
                 const tr = rootDocument.createElement('tr');
                 // Indicate that this element is created and supported by GhostTable. It can be useful to
                 // exclude rendering performance costly logic or exclude logic which doesn't work within a hidden table.
                 td.setAttribute('ghost-table', '1');
-                renderer(this.hot, td, row, column, this.hot.colToProp(column), string.value, cellProperties);
+                _class_private_method_get(this, _renderCell, renderCell1).call(this, td, row, column, string.value, cellProperties);
                 tr.appendChild(td);
                 fragment.appendChild(tr);
             });
@@ -291,7 +325,7 @@ import { throwWithCause } from '../helpers/errors.mjs';
         const col = this.hot.rootDocument.createElement('col');
         let colspan = 0;
         if (row >= 0 && column >= 0) {
-            colspan = Number(this.hot.getCellMeta(row, column).colspan);
+            colspan = Number(this.hot.getCellMetaTransient(row, column).colspan);
         }
         let width = this.hot.getColWidth(column);
         if (colspan > 1) {
@@ -376,6 +410,7 @@ import { throwWithCause } from '../helpers/errors.mjs';
     /**
    * Initializes the ghost table utility with a reference to the Handsontable instance used for DOM context.
    */ constructor(hotInstance){
+        _class_private_method_init(this, _renderCell);
         /**
    * Handsontable instance.
    *
@@ -423,4 +458,16 @@ import { throwWithCause } from '../helpers/errors.mjs';
         this.hot = hotInstance;
     }
 }
+function renderCell1(td, row, column, value, cellProperties) {
+    const rendererArgs = [
+        this.hot,
+        td,
+        row,
+        column,
+        this.hot.colToProp(column),
+        value,
+        cellProperties
+    ];
+    renderCell(this.hot.getCellRenderer(cellProperties), rendererArgs);
+}
 export default GhostTable;

package/utils/interval.js

@@ -23,15 +23,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -39,9 +36,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -58,9 +53,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     return value;
 }
 function _class_private_method_get(receiver, privateSet, fn) {
-    if (!privateSet.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
     return fn;
 }
 function _class_private_method_init(obj, privateSet) {

package/utils/interval.mjs

@@ -4,15 +4,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -20,9 +17,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -39,9 +34,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     return value;
 }
 function _class_private_method_get(receiver, privateSet, fn) {
-    if (!privateSet.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
     return fn;
 }
 function _class_private_method_init(obj, privateSet) {

package/utils/licenseBranding/badge.d.mts

@@ -0,0 +1 @@
+export * from './badge.js';

package/utils/licenseBranding/badge.d.ts

@@ -0,0 +1,21 @@
+import type { HotInstance } from '../../core/types';
+import type { LicenseLifecycleFacet } from '../../helpers/mixed';
+/**
+ * Builds the corner badge + popover and mounts it into the overlays layer. Only the trial states
+ * carry `POPOVER_CONTENT`; for every other state this is a no-op (no badge, no popover). The VISUAL glyph is pure CSS inside the corner header cell (gated by the
+ * `ht-license-badge-on` root class - see `_license-branding.scss`), so it can never overflow or
+ * drift out of the corner. The badge button itself is screen-reader-only: it carries the accessible
+ * name, the popover wiring, and the keyboard entry point. The soft-stop popovers additionally
+ * auto-open via the `is-open` class until dismissed with the close (X) button or Escape; dismissal
+ * stamps `is-dismissed` on the wrapper (which gates every CSS open rule, so the popover closes even
+ * while the pointer still hovers it) and re-arms once the pointer has left.
+ *
+ * Mounts once, for the instance lifetime (the license key is read only at init - see
+ * `initLicenseBranding`); its DOM lives in the overlays layer and its hooks are cleared with the
+ * grid on destroy.
+ *
+ * @param {HotInstance} hotInstance The root Handsontable instance.
+ * @param {LicenseLifecycleFacet} lifecycle The resolved lifecycle facet (state + days remaining).
+ * @returns {void}
+ */
+export declare function mountLicenseBadge(hotInstance: HotInstance, lifecycle: LicenseLifecycleFacet): void;

package/utils/licenseBranding/badge.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "mountLicenseBadge", {
+    enumerable: true,
+    get: function() {
+        return mountLicenseBadge;
+    }
+});
+const _templateLiteralTag = require("../../helpers/templateLiteralTag");
+const _constants = require("../../3rdparty/walkontable/src/overlay/constants");
+const _content = require("./content");
+const BADGE_WRAPPER_CLASS = 'ht-license-badge-wrapper';
+const BADGE_CLASS = 'ht-license-badge';
+const BADGE_ON_CLASS = 'ht-license-badge-on';
+const POPOVER_CLASS = 'ht-license-popover';
+const POPOVER_OPEN_CLASS = 'is-open';
+const POPOVER_DISMISSED_CLASS = 'is-dismissed';
+const CORNER_HOVER_CLASS = 'is-corner-hover';
+const CORNERLESS_CLASS = 'is-cornerless';
+const CORNER_MARKER_CLASS = 'ht-license-badge-corner';
+/**
+ * The corner-header clone's table and its header section, read through the TableView's public overlay
+ * accessor (`getOverlayByName`, the same entry the MergeCells plugin uses) rather than reaching into
+ * `_wt.wtOverlays`. This is THIS grid's own corner, never a nested grid's: a grid rendered inside a
+ * cell (the `handsontable` cell type) has its own corner clone earlier in document order, so a CSS
+ * selector on the root subtree could match the inner one and make the badge measure - and pop over -
+ * the wrong corner. The overlay reference sidesteps that entirely. `getOverlayByName` is typed as a
+ * broad union (any overlay or the master table), so it is narrowed to `Overlay` here - a corner name
+ * never resolves to the master instance. Returns `null` before the first render (the overlay/clone is
+ * not built yet) or when there is no corner.
+ *
+ * @param {HotInstance} hotInstance The root Handsontable instance.
+ * @returns {{ table: HTMLElement, thead: HTMLElement|null }|null}
+ */ function getCornerClone(hotInstance) {
+    const cornerOverlay = hotInstance.view?.getOverlayByName(_constants.CLONE_TOP_INLINE_START_CORNER);
+    const wtTable = cornerOverlay?.clone?.wtTable;
+    if (!wtTable?.TABLE) {
+        return null;
+    }
+    return {
+        table: wtTable.TABLE,
+        thead: wtTable.THEAD ?? null
+    };
+}
+/**
+ * Wires the corner-hover detection for the click-through badge. The badge and its wrapper render with
+ * `pointer-events: none`, so the corner header cell underneath keeps its native behavior: the
+ * select-all click, the right-click context menu, drag selection, and touch. Hovering is detected by
+ * delegation instead: a `mouseover` listener on the root element stamps the `is-corner-hover` class on
+ * the wrapper whenever the pointer roams over the corner clone's HEADER area (the clone also holds
+ * frozen data cells, which must never pop the license tooltip), and the popover CSS opens on that
+ * class. Every roam also gives the dismissed soft-stop popover a chance to re-arm. The listeners
+ * die with the root element on destroy.
+ *
+ * @param {HotInstance} hotInstance The root Handsontable instance.
+ * @param {HTMLElement} wrapper The badge wrapper element.
+ * @param {Function} onPointerRoam Called after every pointer roam (used to re-arm the dismissed popover).
+ * @returns {void}
+ */ function wireCornerHoverDetection(hotInstance, wrapper, onPointerRoam) {
+    const rootElement = hotInstance.rootElement;
+    if (!rootElement) {
+        return;
+    }
+    rootElement.addEventListener('mouseover', (event)=>{
+        // Checked against the grid's OWN realm: for an iframe-hosted grid, the loading window's
+        // `Element` does not match nodes from the iframe's document, and the bare `instanceof Element`
+        // would silently kill hover detection there.
+        const target = event.target instanceof hotInstance.rootWindow.Element ? event.target : null;
+        // Only the corner HEADER area (the clone's `thead`, read from the overlay - THIS grid's, never a
+        // nested grid's) triggers the popover: the corner clone also holds frozen data cells
+        // (`fixedRowsTop` + `fixedColumnsStart`), and hovering the user's own data must never pop the
+        // license tooltip. Without a corner cell (`is-cornerless`) there is no badge to point at, so
+        // hover never triggers - only the auto-open popovers show there.
+        const cornerThead = getCornerClone(hotInstance)?.thead ?? null;
+        const overCornerHeader = !wrapper.classList.contains(CORNERLESS_CLASS) && target !== null && cornerThead !== null && cornerThead.contains(target);
+        wrapper.classList.toggle(CORNER_HOVER_CLASS, overCornerHeader);
+        onPointerRoam();
+    });
+    rootElement.addEventListener('mouseleave', ()=>{
+        wrapper.classList.remove(CORNER_HOVER_CLASS);
+        onPointerRoam();
+    });
+}
+function mountLicenseBadge(hotInstance, lifecycle) {
+    const content = _content.POPOVER_CONTENT[lifecycle.state];
+    const host = hotInstance.rootOverlaysElement;
+    // The badge (and its popover) render ONLY for the trial states in `POPOVER_CONTENT`;
+    // every other state returns here with no badge - its console message and any bottom bar come from
+    // `initLicenseNotification` instead.
+    if (!content || !host) {
+        return;
+    }
+    const popoverId = `${hotInstance.guid}-license-popover`;
+    // The badge button is screen-reader-only (the visual glyph is pure CSS inside the corner cell).
+    // The copy is assigned through `textContent` below, never interpolated into the markup.
+    const { refs } = (0, _templateLiteralTag.html)`
+    <div data-ref="wrapper" class="${BADGE_WRAPPER_CLASS}">
+      <button data-ref="badge" type="button" class="${BADGE_CLASS}"
+        aria-label="Handsontable license information"></button>
+      <div data-ref="popover" id="${popoverId}" class="${POPOVER_CLASS}"
+        role="${content.dismissible ? 'dialog' : 'tooltip'}" aria-labelledby="${popoverId}-title">
+        <div class="${POPOVER_CLASS}__content">
+          <div data-ref="popoverTitle" id="${popoverId}-title" class="${POPOVER_CLASS}__title"></div>
+          <p data-ref="popoverBody" class="${POPOVER_CLASS}__body"></p>
+          <a data-ref="popoverLink" class="${POPOVER_CLASS}__link" target="_blank" rel="noopener noreferrer"></a>
+        </div>
+        ${content.dismissible ? `<button data-ref="closeButton" type="button" class="${POPOVER_CLASS}__close" aria-label="Close"></button>` : ''}
+      </div>
+    </div>
+  `;
+    const wrapper = refs.wrapper;
+    const badge = refs.badge;
+    // Presence sync: `is-cornerless` on the wrapper re-anchors the popover to the table's
+    // inline-start edge (there is no corner cell for a tail to point at), `ht-license-badge-on`
+    // on the root element enables the glyph, and `ht-license-badge-corner` marks THIS grid's own
+    // corner clone table so the pure-CSS glyph lands only there. The marker is the CSS counterpart of
+    // the Walkontable-API corner lookup the rest of this file uses: the glyph selector keys off the
+    // marker, not the structural `.ht_clone_top_inline_start_corner` class, which also matches a nested
+    // grid's corner (the `handsontable` cell type) inside this root and would paint a stray badge there.
+    // Settings/overlay reads only, never layout - safe to run on every render.
+    const hasCornerCell = ()=>hotInstance.hasRowHeaders() && hotInstance.hasColHeaders();
+    const syncCornerPresence = ()=>{
+        const hasCorner = hasCornerCell();
+        wrapper.classList.toggle(CORNERLESS_CLASS, !hasCorner);
+        hotInstance.rootElement?.classList.toggle(BADGE_ON_CLASS, hasCorner);
+        getCornerClone(hotInstance)?.table.classList.toggle(CORNER_MARKER_CLASS, hasCorner);
+    };
+    syncCornerPresence();
+    hotInstance.addHook('afterRender', ()=>syncCornerPresence());
+    // Popover anchor: the popover offsets from the corner's inline-end edge, so it needs the corner
+    // WIDTH - the only measured value left (the glyph itself is CSS-anchored inside the corner cell
+    // and needs no measurement). Badge-only states return above and skip this entirely.
+    let lastAnchorWidth = 0;
+    const measurePopoverAnchor = ()=>{
+        const corner = getCornerClone(hotInstance);
+        if (!corner || !hasCornerCell()) {
+            return;
+        }
+        const width = corner.table.offsetWidth;
+        // 1px deadband: while horizontally scrolled, walkontable grows the corner clone by 1px (the
+        // doubled-border compensation), and copying that flutter into the anchor would nudge the open
+        // popover on every scroll. A real corner resize (theme switch, wider row numbers) is always
+        // bigger than 1px.
+        if (width > 0 && Math.abs(width - lastAnchorWidth) > 1) {
+            lastAnchorWidth = width;
+            wrapper.style.setProperty('--ht-license-badge-area-width', `${width}px`);
+        }
+    };
+    const win = hotInstance.rootWindow;
+    if (typeof win.ResizeObserver === 'function') {
+        // Measuring inside an `afterRender` hook would read `offsetWidth` right after the draw's DOM
+        // writes - a forced synchronous reflow on EVERY render. A ResizeObserver delivers its entries
+        // after layout, when the tree is clean, so the anchor stays fresh at zero per-render layout
+        // cost. The clone element persists for the instance lifetime, but the render hook re-attaches
+        // defensively when the element identity changed - a DOM query, no layout.
+        const observer = new win.ResizeObserver(()=>measurePopoverAnchor());
+        let observedTable = null;
+        const observeCorner = ()=>{
+            const table = getCornerClone(hotInstance)?.table ?? null;
+            if (table === observedTable) {
+                return;
+            }
+            observer.disconnect();
+            observedTable = table;
+            if (table) {
+                observer.observe(table);
+            }
+        // No synchronous measure here: `observe()` delivers an initial entry after the next layout.
+        };
+        observeCorner();
+        hotInstance.addHook('afterRender', ()=>observeCorner());
+        hotInstance.addHook('afterDestroy', ()=>observer.disconnect());
+    } else {
+        // No ResizeObserver (jsdom): fall back to measuring per render.
+        //
+        // Dead in every shipped bundle - `ResizeObserver` predates the whole browser floor in
+        // `browser-targets.js` - so this branch exists as the jsdom test seam and nothing else. That makes
+        // the coverage split deliberate but lopsided: the Jest specs only ever walk THIS path (their
+        // `ResizeObserver` stub never fires), and the observer path above is pinned by the Playwright
+        // specs alone. Read a green Jest run accordingly - it says nothing about the shipped measurement.
+        measurePopoverAnchor();
+        hotInstance.addHook('afterRender', ()=>measurePopoverAnchor());
+    }
+    // The popover is a purely visual floating element - it is never focusable and never enters the Tab
+    // order (its links/close are mouse-only, and the same information is in the console and the bottom
+    // bar). So the badge is out of the Tab order too, and there is no focus scope, no shortcut, and no
+    // focus outline to manage.
+    badge.tabIndex = -1;
+    // A non-modal informational popover (already in the template): `dialog` for the dismissible
+    // soft-stop (it has a close button), `tooltip` for the hover-only variants.
+    const popover = refs.popover;
+    refs.popoverTitle.textContent = content.title;
+    refs.popoverBody.textContent = content.body(lifecycle);
+    refs.popoverLink.href = content.linkHref;
+    refs.popoverLink.textContent = content.linkText;
+    // Mouse-only: keep the popover out of the Tab order entirely (its link and close button stay
+    // clickable, and the same information is duplicated in the console and the bottom bar).
+    refs.popoverLink.tabIndex = -1;
+    // The wrapper is click-through, so `:hover` never matches on it directly; the popover re-enables
+    // pointer events for its links, and this flag tracks whether the pointer is inside it.
+    let pointerOverPopover = false;
+    const rearmIfIdle = ()=>{
+        const pointerInside = pointerOverPopover || wrapper.classList.contains(CORNER_HOVER_CLASS);
+        if (!pointerInside) {
+            wrapper.classList.remove(POPOVER_DISMISSED_CLASS);
+        }
+    };
+    popover.addEventListener('mouseenter', ()=>{
+        pointerOverPopover = true;
+    });
+    popover.addEventListener('mouseleave', ()=>{
+        pointerOverPopover = false;
+    // Deliberately NOT re-arming here. Dismissing the popover hides it under the pointer, and the
+    // browser answers that with a `mouseleave` on the very element that was just dismissed - so
+    // re-arming from this handler would drop `is-dismissed` in the same tick, the hover rule would
+    // show the popover again, and the close button would do nothing while the pointer stayed put.
+    // Re-arming belongs to the pointer ROAM path below, which fires once the pointer actually moves
+    // somewhere else.
+    });
+    wireCornerHoverDetection(hotInstance, wrapper, rearmIfIdle);
+    if (content.dismissible) {
+        // Auto-open the soft-stop popover. Dismissal (the close button) stamps `is-dismissed` on the
+        // wrapper: removing `is-open` alone is not enough, because at click time the pointer still hovers
+        // the popover, so the hover CSS rule would keep it visible. The class gates every open rule and
+        // re-arms once the pointer leaves the popover and the corner, so a later corner hover reopens it
+        // as a plain tooltip.
+        popover.classList.add(POPOVER_OPEN_CLASS);
+        refs.closeButton.tabIndex = -1;
+        refs.closeButton.addEventListener('click', ()=>{
+            popover.classList.remove(POPOVER_OPEN_CLASS);
+            wrapper.classList.add(POPOVER_DISMISSED_CLASS);
+        });
+    }
+    host.appendChild(wrapper);
+}