@bluevolt-tech/lumen 2.3.1 → 2.6.1

package/dist/components/bv-table/bv-table.d.ts

@@ -22,6 +22,21 @@ export declare class BvTable extends HTMLElement {
     private _mutationObserver;
     private _bodyObserver;
     private _headerObserver;
+    /**
+     * BTN-11914 — the `<thead>` the header observer currently watches for
+     * `characterData`. Held so the re-attach below can tell "already watching
+     * this one" from "the consumer swapped the header out", and so
+     * `disconnectedCallback` can drop it: `disconnect()` clears the
+     * registration, and a stale ref would make the re-attach skip itself.
+     */
+    private _observedThead;
+    /**
+     * BTN-11914 — dedicated to the `<thead>` `characterData` watch. Separate from
+     * `_headerObserver` so a replaced header can be dropped with `disconnect()`
+     * without discarding the host observer's queued childList records. See
+     * `_observeTheadCharacterData`.
+     */
+    private _theadObserver;
     get loading(): boolean;
     set loading(v: boolean);
     get fitViewport(): boolean;
@@ -31,6 +46,7 @@ export declare class BvTable extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _renderSkeleton;
     private _removeSkeleton;
+    private _syncSkeletonLabel;
     private _setupDrag;
     private _teardownDrag;
     private _setupStickyColumns;
@@ -46,8 +62,42 @@ export declare class BvTable extends HTMLElement {
     private _isOverText;
     private _enhanceHeaders;
     private _enhanceOneHeader;
+    private _renderTooltipOnlyTh;
+    private _buildThContent;
     private _extractHeaderLabel;
     private _syncSortableTh;
     private _cycleSort;
     private _observeHeaderMutations;
+    /**
+     * The header observer's record handling, shared by both observers that feed
+     * it: the host-wide one above (childList + attributes) and the `<thead>`
+     * characterData one below. One body so a branch added to either cannot drift
+     * from the other.
+     */
+    private _handleHeaderMutations;
+    /**
+     * BTN-11914 — watches `characterData` on the current `<thead>`, and nothing
+     * else. Cheap to call repeatedly: it returns immediately while the same
+     * element is already being watched.
+     *
+     * `characterData` must keep reaching the header (BTN-11247): Angular's Ivy
+     * creates the header's text node empty and fills it on the update pass, which
+     * arrives as a characterData mutation, not a childList one.
+     *
+     * **Why its own MutationObserver instead of a second `observe()` on the
+     * header one.** A replaced `<thead>` has to stop being watched, or a consumer
+     * that keeps and mutates the detached subtree still reaches
+     * `_enhanceFilledHeader` — records for stale DOM, which is the narrow scope
+     * leaking back open (raised by Copilot on PR #50). There is no
+     * `unobserve(node)`, so the only way to drop one registration is
+     * `disconnect()`, and that also **discards records already queued and not yet
+     * delivered**. On the shared observer that would throw away pending childList
+     * and attribute records mid-batch — the first version of this fix accepted the
+     * stale registration for exactly that reason. A dedicated observer removes the
+     * trade entirely: the records it discards are the old `<thead>`'s, which are
+     * the ones being dropped on purpose.
+     */
+    private _observeTheadCharacterData;
+    private _enhanceFilledHeader;
+    private _enhanceAddedHeaders;
 }

package/dist/components/bv-table/bv-table.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-table/bv-table.css
-var bv_table_default = "bv-table {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  overflow-x: auto;\n  border: 1px solid var(--bv-color-neutral-200);\n  font-family: var(--bv-font-family-base);\n  cursor: grab;\n}\n\n/* \u2500\u2500 fit-viewport (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Consumer wraps the table in a flex container that fills the viewport bottom\n * (e.g. `.wrap { display: flex; flex-direction: column; height: 100vh }` +\n * `bv-table { flex: 1 }`). Then this attribute:\n *   1. Adds vertical scrolling on the host (in addition to the horizontal one\n *      that already exists), so the body scrolls without pushing page layout.\n *   2. Pins the header row(s) via `position: sticky; top: 0` inside the\n *      scrolling viewport, so column labels stay visible while the user\n *      pages through rows.\n * The horizontal scrollbar stays at the bottom of the host \u2014 always visible,\n * per the CET spec.\n */\nbv-table[fit-viewport] {\n  overflow: auto;\n  height: 100%;\n  min-height: 0;\n}\n\nbv-table[fit-viewport] thead th {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n/* Header row 2 (subheaders) sits below row 1 in the sticky stack \u2014 offset by\n * the height of row 1 so both rows pin. Split down the middle so the visual\n * height of a 2-row header still equals a single-row header. */\nbv-table[fit-viewport] thead tr:nth-child(2) th {\n  top: calc(var(--bv-sticky-head-row1-height, 24px));\n}\n\n/* During drag: override cursor for the entire table and all children */\nbv-table[data-dragging],\nbv-table[data-dragging] * {\n  cursor: grabbing !important;\n  user-select: none !important;\n}\n\nbv-table tbody td {\n  cursor: grab;\n}\n\n/* Only the rendered glyphs are text-selectable \u2014 see _enhanceBodyCells in bv-table.ts */\nbv-table tbody td .bv-cell-text {\n  cursor: text;\n}\n\nbv-table table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th {\n  /* Own background per <th> (was on <tr>) \u2014 under `fit-viewport` every\n   * header cell becomes `position: sticky` and the sticky cell floats at\n   * top:0 while its parent <tr> scrolls off-screen. A <tr>-level bg would\n   * scroll away with the row and leave the pinned header transparent\n   * (BTN-10755 followup). */\n  background: var(--bv-color-neutral-100);\n  padding: 12px 16px;\n  text-align: left;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  white-space: nowrap;\n  user-select: none;\n  vertical-align: middle;\n}\n\nbv-table thead th[data-sortable] {\n  cursor: pointer;\n}\n\nbv-table thead th[data-sortable]:hover {\n  color: var(--bv-color-neutral-700);\n}\n\nbv-table thead th[data-sort='asc'] .bv-sort-icon,\nbv-table thead th[data-sort='desc'] .bv-sort-icon {\n  color: var(--bv-color-primary);\n}\n\n.bv-th-content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.bv-sort-icon {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table tbody td {\n  padding: 12px 16px;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  border-bottom: 1px solid var(--bv-color-neutral-100);\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\nbv-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\nbv-table tbody tr:hover td {\n  background: var(--bv-color-neutral-100);\n}\n\n/* \u2500\u2500 Column alignment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th[data-align='right'],\nbv-table tbody td[data-align='right'] {\n  text-align: right;\n}\n\nbv-table thead th[data-align='center'],\nbv-table tbody td[data-align='center'] {\n  text-align: center;\n}\n\n/* \u2500\u2500 Cell modifier classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n/* Muted: em dash or empty placeholder */\nbv-table td.bv-cell-muted {\n  color: var(--bv-color-neutral-400);\n}\n\n/* Hidden: redacted identity for external users */\nbv-table td.bv-cell-hidden {\n  color: var(--bv-color-neutral-400);\n  font-style: italic;\n}\n\n/* Colored text for numeric highlight states */\nbv-table td.bv-cell-success {\n  color: var(--bv-color-success);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-warning {\n  color: var(--bv-color-warning);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-danger {\n  color: var(--bv-color-danger);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-info {\n  color: var(--bv-color-primary);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n/* \u2500\u2500 Modifiers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table[striped] tbody tr:nth-child(even) td {\n  background: var(--bv-color-neutral-100);\n}\n\nbv-table[bordered] thead th,\nbv-table[bordered] tbody td {\n  border-right: 1px solid var(--bv-color-neutral-100);\n}\n\nbv-table[bordered] thead th:last-child,\nbv-table[bordered] tbody td:last-child {\n  border-right: none;\n}\n\n/* \u2500\u2500 Column divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th[data-divider],\nbv-table tbody td[data-divider] {\n  border-left: 1px solid var(--bv-color-neutral-200);\n}\n\n/* \u2500\u2500 Grouped header (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*\n *\n * 2-row header pattern: consumer writes a first-row <th colspan=\"N\">\n * spanning the group cells, then a second <tr> in <thead> with N\n * sub-header <th>s below it. Cells outside the group use rowspan=\"2\".\n *\n * Sub-headers are visually lighter than main headers and get their own\n * divider from the group cell above. The group cell centers its label\n * horizontally over the axis of the sub-columns (data-align=\"center\"\n * on the group th, per convention).\n */\nbv-table thead tr + tr th {\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  /* Half of the base 8px 16px so the two-row header packs tighter \u2014 the\n   * rowspan=2 cells still control the row-1 height, so this only affects\n   * how much air sits around the group label and sub-headers. */\n  padding: 4px 16px;\n}\n\nbv-table thead th[data-group] {\n  text-align: center;\n  /* Same halving as the sub-header row \u2014 matches the visual density of the\n   * grouped-header stack (label + 3 subs) with the surrounding row-1 cells. */\n  padding: 6px 16px;\n  /* The base `thead th { border-bottom }` rule paints the divider between\n   * the header and tbody. On a group cell that divider would appear\n   * *inside* the header block (between the group label and its sub-headers)\n   * \u2014 the sub-header row's own border-bottom already covers the header/body\n   * boundary. */\n  border-bottom: none;\n}\n\n/* \u2500\u2500 Sticky columns (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*\n *\n * Consumers opt in per cell with `data-sticky` on the th/td of the\n * columns they want to freeze during horizontal scroll. The component\n * computes cumulative `left` offsets from the natural widths of the\n * sticky <th>s and writes them as a `--bv-sticky-left` inline style\n * on every sticky cell (see _updateStickyColumnOffsets in bv-table.ts).\n *\n * The last sticky cell in each row is marked with `data-sticky-last`\n * so CSS can hang the scroll shadow gradient on its trailing edge \u2014\n * only visible when the host has scrolled off `scrollLeft: 0` (that\n * toggles `data-scrolled-x` on the host from bv-table.ts).\n */\nbv-table td[data-sticky],\nbv-table th[data-sticky] {\n  position: sticky;\n  left: var(--bv-sticky-left, 0);\n  /* --bv-sticky-bg is the sole knob for state-dependent sticky background\n   * (default / header / striped / hover). The gap-fill box-shadow below\n   * reads the same variable, so the two always stay in sync. */\n  --bv-sticky-bg: var(--bv-color-neutral-0);\n  background: var(--bv-sticky-bg);\n  z-index: 1;\n}\n\n/* Sub-pixel gap guard (BTN-10755 followup) \u2014 the computed sticky `left`\n * offset comes from `offsetWidth`, which rounds to the nearest integer\n * pixel while the browser renders the column widths as fractional pixels.\n * That mismatch leaves a hairline gap between adjacent sticky cells,\n * through which the scrolling columns behind bleed visible text. Extend\n * each non-last sticky cell 1px to the right with a box-shadow in the\n * cell's own background color to close the gap. The last sticky cell has\n * the scroll-shadow gradient (::after below) doing the same visual job. */\nbv-table td[data-sticky]:not([data-sticky-last]),\nbv-table th[data-sticky]:not([data-sticky-last]) {\n  box-shadow: 1px 0 0 0 var(--bv-sticky-bg);\n}\n\n/* Header sticky cells stack above body sticky cells during vertical\n * scroll (relevant only under [fit-viewport]) and above the row\n * hovering neighbors that also carry sticky. */\nbv-table thead th[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n  z-index: 3;\n}\n\n/* Under fit-viewport, header sticky cells sit above the horizontal\n * sticky \"corner\" area \u2014 their z stacking must beat both. */\nbv-table[fit-viewport] thead th[data-sticky] {\n  z-index: 4;\n}\n\n/* Striped rows: sticky cells match the row's background so the frozen\n * column doesn't visually break the alternating band. */\nbv-table[striped] tbody tr:nth-child(even) td[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n}\n\n/* Hover: same override \u2014 sticky cell background must track the row's\n * hover background or the frozen cells look \"unclickable\". */\nbv-table tbody tr:hover td[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n}\n\n/* Scroll shadow \u2014 spec gradient from the ticket:\n *   linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0))\n * Painted as an absolutely-positioned ::after so it extends outside the\n * sticky cell without affecting its own width. Only paints when the\n * host has scrolled off the initial x-position (data-scrolled-x set\n * by _onScroll in bv-table.ts).\n */\nbv-table[data-scrolled-x] td[data-sticky-last]::after,\nbv-table[data-scrolled-x] th[data-sticky-last]::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: -12px;\n  bottom: 0;\n  width: 12px;\n  /* Ticket spec was `linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0))`.\n   * `rgba(15, 23, 42, ...)` is `--bv-color-neutral-900` (#0f172a) \u2014 drive it\n   * through the token so a future dark theme automatically rethemes the\n   * shadow and CLAUDE.md's \"no hardcoded colors\" rule holds. `color-mix`\n   * has been baseline-supported since Chrome 111 / Firefox 113 / Safari 16.2. */\n  background: linear-gradient(\n    to right,\n    color-mix(in srgb, var(--bv-color-neutral-900) 10%, transparent),\n    transparent\n  );\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Checkbox column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th.bv-col-check,\nbv-table tbody td.bv-col-check {\n  width: 48px;\n  padding: 12px 16px;\n}\n\n/* \u2500\u2500 BTN-10191 \xB7 loading skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Hide the real table while the skeleton is showing. Consumers keep\n   their <thead>/<tbody> markup in place so no re-hydration is needed\n   when data lands \u2014 only display switches. */\nbv-table[loading] > table {\n  display: none;\n}\n\n.bv-table-skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-md-minus);\n  padding: var(--bv-spacing-md);\n}\n\n.bv-table-skeleton-row {\n  display: flex;\n  gap: var(--bv-spacing-lg);\n}\n\n.bv-table-skeleton-bar {\n  flex: 1;\n  height: 14px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-table-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n/* Slight offset per row so the shimmer isn't in lockstep \u2014 reads more\n   like real content loading than a pulsing wall. */\n.bv-table-skeleton-row:nth-child(even) .bv-table-skeleton-bar {\n  animation-delay: 0.2s;\n}\n\n@keyframes bv-table-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
+var bv_table_default = "bv-table {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  overflow-x: auto;\n  border: 1px solid var(--bv-color-neutral-200);\n  font-family: var(--bv-font-family-base);\n  cursor: grab;\n}\n\n/* \u2500\u2500 fit-viewport (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Consumer wraps the table in a flex container that fills the viewport bottom\n * (e.g. `.wrap { display: flex; flex-direction: column; height: 100vh }` +\n * `bv-table { flex: 1 }`). Then this attribute:\n *   1. Adds vertical scrolling on the host (in addition to the horizontal one\n *      that already exists), so the body scrolls without pushing page layout.\n *   2. Pins the header row(s) via `position: sticky; top: 0` inside the\n *      scrolling viewport, so column labels stay visible while the user\n *      pages through rows.\n * The horizontal scrollbar stays at the bottom of the host \u2014 always visible,\n * per the CET spec.\n */\nbv-table[fit-viewport] {\n  overflow: auto;\n  height: 100%;\n  min-height: 0;\n}\n\nbv-table[fit-viewport] thead th {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n/* Header row 2 (subheaders) sits below row 1 in the sticky stack \u2014 offset by\n * the height of row 1 so both rows pin. Split down the middle so the visual\n * height of a 2-row header still equals a single-row header. */\nbv-table[fit-viewport] thead tr:nth-child(2) th {\n  top: calc(var(--bv-sticky-head-row1-height, 24px));\n}\n\n/* During drag: override cursor for the entire table and all children */\nbv-table[data-dragging],\nbv-table[data-dragging] * {\n  cursor: grabbing !important;\n  user-select: none !important;\n}\n\nbv-table tbody td {\n  cursor: grab;\n}\n\n/* Only the rendered glyphs are text-selectable \u2014 see _enhanceBodyCells in bv-table.ts */\nbv-table tbody td .bv-cell-text {\n  cursor: text;\n}\n\nbv-table table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th {\n  /* Own background per <th> (was on <tr>) \u2014 under `fit-viewport` every\n   * header cell becomes `position: sticky` and the sticky cell floats at\n   * top:0 while its parent <tr> scrolls off-screen. A <tr>-level bg would\n   * scroll away with the row and leave the pinned header transparent\n   * (BTN-10755 followup). */\n  background: var(--bv-color-neutral-100);\n  padding: 12px 16px;\n  text-align: left;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  white-space: nowrap;\n  user-select: none;\n  vertical-align: middle;\n}\n\nbv-table thead th[data-sortable] {\n  cursor: pointer;\n}\n\nbv-table thead th[data-sortable]:hover {\n  color: var(--bv-color-neutral-700);\n}\n\nbv-table thead th[data-sort='asc'] .bv-sort-icon,\nbv-table thead th[data-sort='desc'] .bv-sort-icon {\n  color: var(--bv-color-primary);\n}\n\n.bv-th-content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.bv-sort-icon {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table tbody td {\n  padding: 12px 16px;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  border-bottom: 1px solid var(--bv-color-neutral-100);\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\nbv-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\nbv-table tbody tr:hover td {\n  background: var(--bv-color-neutral-100);\n}\n\n/* \u2500\u2500 Column alignment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th[data-align='right'],\nbv-table tbody td[data-align='right'] {\n  text-align: right;\n}\n\nbv-table thead th[data-align='center'],\nbv-table tbody td[data-align='center'] {\n  text-align: center;\n}\n\n/* \u2500\u2500 Cell modifier classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n/* Muted: em dash or empty placeholder */\nbv-table td.bv-cell-muted {\n  color: var(--bv-color-neutral-400);\n}\n\n/* Hidden: redacted identity for external users */\nbv-table td.bv-cell-hidden {\n  color: var(--bv-color-neutral-400);\n  font-style: italic;\n}\n\n/* Colored text for numeric highlight states */\nbv-table td.bv-cell-success {\n  color: var(--bv-color-success);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-warning {\n  color: var(--bv-color-warning);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-danger {\n  color: var(--bv-color-danger);\n  font-weight: var(--bv-font-weight-medium);\n}\n\nbv-table td.bv-cell-info {\n  color: var(--bv-color-primary);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n/* \u2500\u2500 Modifiers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table[striped] tbody tr:nth-child(even) td {\n  background: var(--bv-color-neutral-100);\n}\n\nbv-table[bordered] thead th,\nbv-table[bordered] tbody td {\n  border-right: 1px solid var(--bv-color-neutral-100);\n}\n\nbv-table[bordered] thead th:last-child,\nbv-table[bordered] tbody td:last-child {\n  border-right: none;\n}\n\n/* \u2500\u2500 Column divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th[data-divider],\nbv-table tbody td[data-divider] {\n  border-left: 1px solid var(--bv-color-neutral-200);\n}\n\n/* \u2500\u2500 Grouped header (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*\n *\n * 2-row header pattern: consumer writes a first-row <th colspan=\"N\">\n * spanning the group cells, then a second <tr> in <thead> with N\n * sub-header <th>s below it. Cells outside the group use rowspan=\"2\".\n *\n * Sub-headers are visually lighter than main headers and get their own\n * divider from the group cell above. The group cell centers its label\n * horizontally over the axis of the sub-columns (data-align=\"center\"\n * on the group th, per convention).\n */\nbv-table thead tr + tr th {\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  /* Half of the base 8px 16px so the two-row header packs tighter \u2014 the\n   * rowspan=2 cells still control the row-1 height, so this only affects\n   * how much air sits around the group label and sub-headers. */\n  padding: 4px 16px;\n}\n\nbv-table thead th[data-group] {\n  text-align: center;\n  /* Same halving as the sub-header row \u2014 matches the visual density of the\n   * grouped-header stack (label + 3 subs) with the surrounding row-1 cells. */\n  padding: 6px 16px;\n  /* The base `thead th { border-bottom }` rule paints the divider between\n   * the header and tbody. On a group cell that divider would appear\n   * *inside* the header block (between the group label and its sub-headers)\n   * \u2014 the sub-header row's own border-bottom already covers the header/body\n   * boundary. */\n  border-bottom: none;\n}\n\n/* \u2500\u2500 Sticky columns (BTN-10755) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*\n *\n * Consumers opt in per cell with `data-sticky` on the th/td of the\n * columns they want to freeze during horizontal scroll. The component\n * computes cumulative `left` offsets from the natural widths of the\n * sticky <th>s and writes them as a `--bv-sticky-left` inline style\n * on every sticky cell (see _updateStickyColumnOffsets in bv-table.ts).\n *\n * The last sticky cell in each row is marked with `data-sticky-last`\n * so CSS can hang the scroll shadow gradient on its trailing edge \u2014\n * only visible when the host has scrolled off `scrollLeft: 0` (that\n * toggles `data-scrolled-x` on the host from bv-table.ts).\n */\nbv-table td[data-sticky],\nbv-table th[data-sticky] {\n  position: sticky;\n  left: var(--bv-sticky-left, 0);\n  /* --bv-sticky-bg is the sole knob for state-dependent sticky background\n   * (default / header / striped / hover). The gap-fill box-shadow below\n   * reads the same variable, so the two always stay in sync. */\n  --bv-sticky-bg: var(--bv-color-neutral-0);\n  background: var(--bv-sticky-bg);\n  z-index: 1;\n}\n\n/* Sub-pixel gap guard (BTN-10755 followup) \u2014 the computed sticky `left`\n * offset comes from `offsetWidth`, which rounds to the nearest integer\n * pixel while the browser renders the column widths as fractional pixels.\n * That mismatch leaves a hairline gap between adjacent sticky cells,\n * through which the scrolling columns behind bleed visible text. Extend\n * each non-last sticky cell 1px to the right with a box-shadow in the\n * cell's own background color to close the gap. The last sticky cell has\n * the scroll-shadow gradient (::after below) doing the same visual job. */\nbv-table td[data-sticky]:not([data-sticky-last]),\nbv-table th[data-sticky]:not([data-sticky-last]) {\n  box-shadow: 1px 0 0 0 var(--bv-sticky-bg);\n}\n\n/* Header sticky cells stack above body sticky cells during vertical\n * scroll (relevant only under [fit-viewport]) and above the row\n * hovering neighbors that also carry sticky. */\nbv-table thead th[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n  z-index: 3;\n}\n\n/* Under fit-viewport, header sticky cells sit above the horizontal\n * sticky \"corner\" area \u2014 their z stacking must beat both. */\nbv-table[fit-viewport] thead th[data-sticky] {\n  z-index: 4;\n}\n\n/* Striped rows: sticky cells match the row's background so the frozen\n * column doesn't visually break the alternating band. */\nbv-table[striped] tbody tr:nth-child(even) td[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n}\n\n/* Hover: same override \u2014 sticky cell background must track the row's\n * hover background or the frozen cells look \"unclickable\". */\nbv-table tbody tr:hover td[data-sticky] {\n  --bv-sticky-bg: var(--bv-color-neutral-100);\n}\n\n/* Scroll shadow \u2014 spec gradient from the ticket:\n *   linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0))\n * Painted as an absolutely-positioned ::after so it extends outside the\n * sticky cell without affecting its own width. Only paints when the\n * host has scrolled off the initial x-position (data-scrolled-x set\n * by _onScroll in bv-table.ts).\n */\nbv-table[data-scrolled-x] td[data-sticky-last]::after,\nbv-table[data-scrolled-x] th[data-sticky-last]::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: -12px;\n  bottom: 0;\n  width: 12px;\n  /* Ticket spec was `linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0))`.\n   * `rgba(15, 23, 42, ...)` is `--bv-color-neutral-900` (#0f172a) \u2014 drive it\n   * through the token so a future dark theme automatically rethemes the\n   * shadow and CLAUDE.md's \"no hardcoded colors\" rule holds. `color-mix`\n   * has been baseline-supported since Chrome 111 / Firefox 113 / Safari 16.2. */\n  background: linear-gradient(\n    to right,\n    color-mix(in srgb, var(--bv-color-neutral-900) 10%, transparent),\n    transparent\n  );\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Checkbox column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\nbv-table thead th.bv-col-check,\nbv-table tbody td.bv-col-check {\n  width: 48px;\n  padding: 12px 16px;\n}\n\n/* \u2500\u2500 BTN-10191 \xB7 loading skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Hide the real table while the skeleton is showing. Consumers keep\n   their <thead>/<tbody> markup in place so no re-hydration is needed\n   when data lands \u2014 only display switches. */\nbv-table[loading] > table {\n  display: none;\n}\n\n.bv-table-skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-md-minus);\n  padding: var(--bv-spacing-md);\n}\n\n.bv-table-skeleton-row {\n  display: flex;\n  gap: var(--bv-spacing-lg);\n}\n\n.bv-table-skeleton-bar {\n  flex: 1;\n  height: 14px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-table-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n/* Slight offset per row so the shimmer isn't in lockstep \u2014 reads more\n   like real content loading than a pulsing wall. */\n.bv-table-skeleton-row:nth-child(even) .bv-table-skeleton-bar {\n  animation-delay: 0.2s;\n}\n\n@keyframes bv-table-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Light DOM by design (the CSS is injected into document.head so it can reach\n   nested th/td), so this is the element selector, not `:host`. The rule above\n   sets `display: block` from the author origin, which beats the user agent's\n   `[hidden] { display: none }` regardless of specificity. */\nbv-table[hidden] {\n  display: none;\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-tooltip/bv-tooltip.css
 var bv_tooltip_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.wrap {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: help;\n  color: var(--bv-color-neutral-400);\n  outline: none;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 0;\n}\n\n.trigger:hover,\n.trigger:focus {\n  color: var(--bv-color-neutral-600);\n}\n\n.trigger svg {\n  display: block;\n  width: 14px;\n  height: 14px;\n}\n\n/* \u2500\u2500 Popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.popup {\n  /* Shown/positioned entirely via JS \u2014 display starts as none */\n  display: none;\n  position: absolute;\n  z-index: 500;\n  min-width: 200px;\n  max-width: 300px;\n  background: var(--bv-color-neutral-900);\n  color: var(--bv-color-neutral-0);\n  border-radius: var(--bv-radius-md);\n  padding: 10px 12px;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-regular);\n  line-height: 1.6;\n  box-shadow: var(--bv-shadow-lg);\n  pointer-events: none;\n  white-space: normal;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.text-content {\n  display: none;\n}\n\n:host([text]) .text-content {\n  display: block;\n}\n\n:host([text]) slot {\n  display: none;\n}\n\n::slotted(p) {\n  margin: 0 0 4px;\n}\n\n::slotted(p:last-child) {\n  margin-bottom: 0;\n}\n";
@@ -156,8 +156,8 @@ var SORT_ASC = `<svg class="bv-sort-icon" viewBox="0 0 16 16" fill="none" xmlns=
 var SORT_DESC = `<svg class="bv-sort-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M8 3v10M5 10l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-function escapeAttr(s) {
-  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function normalizeLoadingLabel(label) {
+  return (label == null ? void 0 : label.trim()) || "Loading";
 }
 function injectTableStyles() {
   if (document.getElementById("bv-table-styles")) return;
@@ -172,6 +172,7 @@ var BvTable = class extends HTMLElement {
     "bordered",
     "loading",
     "loading-rows",
+    "loading-label",
     "fit-viewport"
   ];
   _isDragging = false;
@@ -185,6 +186,21 @@ var BvTable = class extends HTMLElement {
   _mutationObserver = null;
   _bodyObserver = null;
   _headerObserver = null;
+  /**
+   * BTN-11914 — the `<thead>` the header observer currently watches for
+   * `characterData`. Held so the re-attach below can tell "already watching
+   * this one" from "the consumer swapped the header out", and so
+   * `disconnectedCallback` can drop it: `disconnect()` clears the
+   * registration, and a stale ref would make the re-attach skip itself.
+   */
+  _observedThead = null;
+  /**
+   * BTN-11914 — dedicated to the `<thead>` `characterData` watch. Separate from
+   * `_headerObserver` so a replaced header can be dropped with `disconnect()`
+   * without discarding the host observer's queued childList records. See
+   * `_observeTheadCharacterData`.
+   */
+  _theadObserver = null;
   get loading() {
     return this.hasAttribute("loading");
   }
@@ -210,13 +226,16 @@ var BvTable = class extends HTMLElement {
     if (this.hasAttribute("loading")) this._renderSkeleton();
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     this._teardownDrag();
     this._teardownStickyColumns();
     (_a = this._bodyObserver) == null ? void 0 : _a.disconnect();
     this._bodyObserver = null;
     (_b = this._headerObserver) == null ? void 0 : _b.disconnect();
     this._headerObserver = null;
+    (_c = this._theadObserver) == null ? void 0 : _c.disconnect();
+    this._theadObserver = null;
+    this._observedThead = null;
   }
   attributeChangedCallback(name, _old, val) {
     if (!this.isConnected) return;
@@ -228,6 +247,7 @@ var BvTable = class extends HTMLElement {
       this._removeSkeleton();
       this._renderSkeleton();
     }
+    if (name === "loading-label") this._syncSkeletonLabel(val);
     if (name === "fit-viewport") {
       this._teardownStickyColumns();
       this._setupStickyColumns();
@@ -245,7 +265,7 @@ var BvTable = class extends HTMLElement {
     skeleton.className = "bv-table-skeleton";
     skeleton.setAttribute("role", "status");
     skeleton.setAttribute("aria-live", "polite");
-    skeleton.setAttribute("aria-label", this.getAttribute("loading-label") ?? "Loading");
+    skeleton.setAttribute("aria-label", normalizeLoadingLabel(this.getAttribute("loading-label")));
     for (let r = 0; r < rows; r++) {
       const row = document.createElement("div");
       row.className = "bv-table-skeleton-row";
@@ -262,6 +282,19 @@ var BvTable = class extends HTMLElement {
     var _a;
     (_a = this.querySelector(":scope > .bv-table-skeleton")) == null ? void 0 : _a.remove();
   }
+  // BTN-11343 — patches the skeleton's accessible name in place. Extracted
+  // rather than inlined in `attributeChangedCallback` for the same reason
+  // `_renderSkeleton` and `_removeSkeleton` are: `wc/no-child-traversal-in-
+  // attributechangedcallback` rejects traversing children from there, and the
+  // rule is right — the skeleton only exists while loading, so the caller
+  // cannot assume it is there. No-op when it is absent.
+  _syncSkeletonLabel(label) {
+    var _a;
+    (_a = this.querySelector(":scope > .bv-table-skeleton")) == null ? void 0 : _a.setAttribute(
+      "aria-label",
+      normalizeLoadingLabel(label)
+    );
+  }
   _setupDrag() {
     this.addEventListener("mousedown", this._boundMouseDown);
     window.addEventListener("mousemove", this._boundMouseMove);
@@ -367,10 +400,22 @@ var BvTable = class extends HTMLElement {
     if (td.children.length > 0) return;
     const text = td.textContent;
     if (!text || !text.trim()) return;
-    const span = document.createElement("span");
-    span.className = "bv-cell-text";
-    span.textContent = text;
-    td.replaceChildren(span);
+    const children = Array.from(td.childNodes);
+    let run = [];
+    const wrapRun = () => {
+      if (run.length === 0) return;
+      const span = document.createElement("span");
+      span.className = "bv-cell-text";
+      span.textContent = run.map((n) => n.textContent ?? "").join("");
+      td.insertBefore(span, run[0] ?? null);
+      for (const n of run) td.removeChild(n);
+      run = [];
+    };
+    for (const node of children) {
+      if (node.nodeType === Node.TEXT_NODE) run.push(node);
+      else wrapRun();
+    }
+    wrapRun();
   }
   // Watches the host for TDs materialized after the initial `_enhanceBodyCells`
   // pass — Angular *ngFor, React lists, or any consumer that mounts <bv-table>
@@ -436,14 +481,15 @@ var BvTable = class extends HTMLElement {
     const hasTooltip = th.hasAttribute("data-tooltip");
     if (!hasSortable && !hasTooltip) return;
     if (hasSortable && !th.hasAttribute("data-column")) {
-      console.warn(
-        "[bv-table] <th data-sortable> requires data-column; skipping sort enhancement for:",
-        th
-      );
+      if (!th.dataset["bvColumnWarned"]) {
+        th.dataset["bvColumnWarned"] = "true";
+        console.warn(
+          "[bv-table] <th data-sortable> requires data-column; skipping sort enhancement for:",
+          th
+        );
+      }
       if (!hasTooltip) return;
-      const label = this._extractHeaderLabel(th);
-      const tip = escapeAttr(th.getAttribute("data-tooltip") ?? "");
-      th.innerHTML = `<span class="bv-th-content">${label}<bv-tooltip text="${tip}" position="bottom"></bv-tooltip></span>`;
+      this._renderTooltipOnlyTh(th);
       return;
     }
     if (hasSortable) {
@@ -464,10 +510,57 @@ var BvTable = class extends HTMLElement {
       th.setAttribute("tabindex", "0");
       this._syncSortableTh(th);
     } else {
-      const label = this._extractHeaderLabel(th);
-      const tip = escapeAttr(th.getAttribute("data-tooltip") ?? "");
-      th.innerHTML = `<span class="bv-th-content">${label}<bv-tooltip text="${tip}" position="bottom"></bv-tooltip></span>`;
+      this._renderTooltipOnlyTh(th);
+    }
+  }
+  // BTN-11212 — tooltip-only header render. Extracted from `_enhanceOneHeader`
+  // because two call sites need it and both are now re-entrant: the header
+  // observer watches childList, so this runs again every time the consumer's
+  // framework mutates the header's children.
+  //
+  // Two guards keep the re-entry harmless:
+  //   1. An already-enhanced th short-circuits on the bv-tooltip probe, which
+  //      preserves the single-shot property the previous inline version had.
+  //   2. An empty label means the framework has created the th but has not
+  //      written its text yet — rewriting now would delete the text node it
+  //      is about to fill. Skip; the childList branch of the observer calls
+  //      back once the text lands.
+  _renderTooltipOnlyTh(th) {
+    if (th.querySelector("bv-tooltip")) return;
+    const label = this._extractHeaderLabel(th);
+    if (!label) return;
+    this._buildThContent(th, label);
+  }
+  // Builds the `.bv-th-content` wrapper without ever interpolating consumer
+  // text into markup (Copilot review). The label arrives from
+  // `_extractHeaderLabel`, i.e. from `textContent` — decoded text, not
+  // markup — so interpolating it into `innerHTML` re-parsed it: a header
+  // whose label was the plain string "<img src=x onerror=…>" became a real
+  // <img> element. Reachable in practice, because a header label is routinely
+  // data (a category name, an admin-configured column title) rendered through
+  // a framework binding.
+  //
+  // The label goes in as a text node and the tooltip text through
+  // `setAttribute`, so neither can be parsed as HTML and neither needs
+  // escaping. `icon` is the only raw markup and it is always one of the three
+  // module-level SVG constants — never anything a consumer supplies.
+  //
+  // `replaceChildren` reports the wrapper as the single added node, same as
+  // the `innerHTML` write it replaces, so the observer's re-entry guard is
+  // unaffected.
+  _buildThContent(th, label, icon) {
+    const content = document.createElement("span");
+    content.className = "bv-th-content";
+    content.appendChild(document.createTextNode(label));
+    const tip = th.getAttribute("data-tooltip");
+    if (tip !== null) {
+      const tooltip = document.createElement("bv-tooltip");
+      tooltip.setAttribute("text", tip);
+      tooltip.setAttribute("position", "bottom");
+      content.appendChild(tooltip);
     }
+    if (icon) content.insertAdjacentHTML("beforeend", icon);
+    th.replaceChildren(content);
   }
   // Reads the plain-text label from a th, whether it's still raw markup
   // (initial enhance pass) or has already been wrapped in `.bv-th-content`
@@ -489,14 +582,14 @@ var BvTable = class extends HTMLElement {
   // `_headerObserver` (to reflect a consumer's external data-sort write).
   _syncSortableTh(th) {
     const sortDir = th.getAttribute("data-sort") ?? "none";
-    const label = this._extractHeaderLabel(th);
-    const tooltip = th.hasAttribute("data-tooltip") ? `<bv-tooltip text="${escapeAttr(th.getAttribute("data-tooltip") ?? "")}" position="bottom"></bv-tooltip>` : "";
-    const icon = sortDir === "asc" ? SORT_ASC : sortDir === "desc" ? SORT_DESC : SORT_NONE;
-    th.innerHTML = `<span class="bv-th-content">${label}${tooltip}${icon}</span>`;
     th.setAttribute(
       "aria-sort",
       sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none"
     );
+    const label = this._extractHeaderLabel(th);
+    if (!label) return;
+    const icon = sortDir === "asc" ? SORT_ASC : sortDir === "desc" ? SORT_DESC : SORT_NONE;
+    this._buildThContent(th, label, icon);
   }
   // BTN-10755 — click and Enter/Space both route through here. Cycles the
   // tri-state, clears sibling sortable ths (UX for user interaction — the
@@ -537,25 +630,173 @@ var BvTable = class extends HTMLElement {
   //      runs the initial enhance for that th.
   // The observer never clears siblings — sibling sanitation is UX for the
   // user-driven click / keydown paths.
+  //
+  // BTN-11212 — the observer also watches `childList`. Before that, headers
+  // were enhanced from `connectedCallback` and nowhere else, which never runs
+  // against real headers for a framework that appends <bv-table> before
+  // creating its children (Angular does). The initial pass saw an empty
+  // <thead>, and a <th> appended afterwards — already carrying data-sortable
+  // or data-tooltip — is a childList mutation the attribute filter cannot
+  // see. Tooltips therefore never rendered at all, and sortable headers were
+  // enhanced only by the accident of a later `data-sort` write, at a moment
+  // when their text had not been written yet. `_bodyObserver` has had the
+  // equivalent childList branch for <td> all along; this is the same thing
+  // for <th>.
   _observeHeaderMutations() {
     this._headerObserver = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        if (m.type !== "attributes") continue;
-        const target = m.target;
-        if (!(target instanceof HTMLElement)) continue;
-        if (target.tagName !== "TH" || !target.closest("thead")) continue;
-        if (m.attributeName === "data-sort") {
-          if (target.hasAttribute("data-sortable")) this._syncSortableTh(target);
-        } else if (m.attributeName === "data-sortable") {
-          if (target.hasAttribute("data-sortable")) this._enhanceOneHeader(target);
-        }
-      }
+      this._observeTheadCharacterData();
+      this._handleHeaderMutations(mutations);
     });
     this._headerObserver.observe(this, {
       attributes: true,
+      childList: true,
       subtree: true,
       attributeFilter: ["data-sort", "data-sortable"]
     });
+    this._observeTheadCharacterData();
+  }
+  /**
+   * The header observer's record handling, shared by both observers that feed
+   * it: the host-wide one above (childList + attributes) and the `<thead>`
+   * characterData one below. One body so a branch added to either cannot drift
+   * from the other.
+   */
+  _handleHeaderMutations(mutations) {
+    for (const m of mutations) {
+      if (m.target.nodeType === Node.COMMENT_NODE) continue;
+      if (m.type === "childList") {
+        this._enhanceAddedHeaders(m);
+        continue;
+      }
+      if (m.type === "characterData") {
+        this._enhanceFilledHeader(m);
+        continue;
+      }
+      if (m.type !== "attributes") continue;
+      const target = m.target;
+      if (!(target instanceof HTMLElement)) continue;
+      if (target.tagName !== "TH" || !target.closest("thead")) continue;
+      if (m.attributeName === "data-sort") {
+        if (target.hasAttribute("data-sortable")) this._syncSortableTh(target);
+      } else if (m.attributeName === "data-sortable") {
+        if (target.hasAttribute("data-sortable")) this._enhanceOneHeader(target);
+      }
+    }
+  }
+  /**
+   * BTN-11914 — watches `characterData` on the current `<thead>`, and nothing
+   * else. Cheap to call repeatedly: it returns immediately while the same
+   * element is already being watched.
+   *
+   * `characterData` must keep reaching the header (BTN-11247): Angular's Ivy
+   * creates the header's text node empty and fills it on the update pass, which
+   * arrives as a characterData mutation, not a childList one.
+   *
+   * **Why its own MutationObserver instead of a second `observe()` on the
+   * header one.** A replaced `<thead>` has to stop being watched, or a consumer
+   * that keeps and mutates the detached subtree still reaches
+   * `_enhanceFilledHeader` — records for stale DOM, which is the narrow scope
+   * leaking back open (raised by Copilot on PR #50). There is no
+   * `unobserve(node)`, so the only way to drop one registration is
+   * `disconnect()`, and that also **discards records already queued and not yet
+   * delivered**. On the shared observer that would throw away pending childList
+   * and attribute records mid-batch — the first version of this fix accepted the
+   * stale registration for exactly that reason. A dedicated observer removes the
+   * trade entirely: the records it discards are the old `<thead>`'s, which are
+   * the ones being dropped on purpose.
+   */
+  _observeTheadCharacterData() {
+    const thead = this.querySelector("thead");
+    if (thead === this._observedThead) return;
+    this._observedThead = thead;
+    if (!this._theadObserver) {
+      this._theadObserver = new MutationObserver(
+        (mutations) => this._handleHeaderMutations(mutations)
+      );
+    }
+    this._theadObserver.disconnect();
+    if (thead) this._theadObserver.observe(thead, { characterData: true, subtree: true });
+  }
+  // BTN-11247 — characterData half of the header observer. BTN-11212 covered
+  // the two childList shapes (a <th> appended, and a text node appended into
+  // a <th>) and assumed those were all the ways a label can arrive late.
+  // They are not: Angular's Ivy creates the header's text node **empty**
+  // during the creation pass and fills it during the update pass. Filling an
+  // existing text node is neither of those shapes — it is a characterData
+  // mutation, and nothing was listening.
+  //
+  // The consequence was not a missing observer callback but a half-rendered
+  // header, which is why it read as working: `_enhanceOneHeader` did run off
+  // the empty-text-node append, wired the listeners and set tabindex /
+  // aria-sort, then returned on the empty-label guard exactly as intended.
+  // Nothing called it back, so sorting ended up fully accessible and
+  // completely invisible, and tooltip-only headers rendered nothing at all.
+  //
+  // Re-entry is safe for the same two reasons the childList branch documents
+  // above, and the second one holds here specifically: `_buildThContent`
+  // writes a **new** text node via `replaceChildren`, which the observer
+  // reports as a childList mutation on the wrapper — never characterData on
+  // a <th>'s own child. So our own writes cannot reach this branch at all.
+  //
+  // BTN-11850 — that last sentence is true and was not enough, which is the
+  // part worth carrying forward. It reasons about the nodes *we* write, and
+  // the loop that shipped came from nodes we do not write: a framework's own
+  // children living inside the same <th>, mutated by that framework, landing
+  // here, and being destroyed by the rebuild this function triggers — so the
+  // framework wrote them again. The feedback edge does not need our writes to
+  // reach this branch; it only needs our writes to disturb something whose
+  // owner will restore it.
+  //
+  // The guard for that specific shape is in `_observeHeaderMutations`, which
+  // drops comment targets before this function is reached. The general rule
+  // it stands for: an enhancer that rebuilds a subtree it does not fully own
+  // must be judged on what else lives in that subtree, not only on what it
+  // writes into it.
+  _enhanceFilledHeader(m) {
+    var _a;
+    const el = (_a = m.target.parentElement) == null ? void 0 : _a.closest("th, tbody");
+    if (!(el instanceof HTMLElement) || el.tagName !== "TH") return;
+    if (el.closest("thead")) this._enhanceOneHeader(el);
+  }
+  // BTN-11212 — childList half of the header observer. Covers the two ways a
+  // header can materialize as a *structural* change: the <th> itself being
+  // appended (directly, or as part of a <thead> / <table> subtree), and the
+  // label text landing in a <th> that was appended empty. The third way — an
+  // already-appended empty text node being filled in place — is not a
+  // childList mutation at all; see `_enhanceFilledHeader` (BTN-11247).
+  //
+  // This runs inside the subtree the enhancers rewrite, so re-entry matters.
+  // Two independent things make it safe, in order of strength:
+  //
+  //   1. Both render paths are idempotent. `_syncSortableTh` re-reads the
+  //      label out of the `.bv-th-content` it wrote and produces the same
+  //      markup; `_renderTooltipOnlyTh` short-circuits on the bv-tooltip
+  //      probe. So the worst case of an unexpected re-entry is one redundant
+  //      rewrite that converges — not a loop. This is the guarantee to
+  //      preserve if the rewrite below is ever changed, and it is pinned by
+  //      the "stray text appended to an already-enhanced th" test.
+  //   2. In practice re-entry does not happen for our own writes at all:
+  //      `_buildThContent`'s `replaceChildren` reports the `.bv-th-content`
+  //      wrapper as the added node, never a bare text node with a <th> parent
+  //      and never a <th>, so both branches below skip it.
+  //
+  // Point 2 is an observation about what MutationObserver reports; point 1 is
+  // structural. Do not let a future rewrite rely on point 2 alone.
+  _enhanceAddedHeaders(m) {
+    m.addedNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const parent = node.parentElement;
+        if ((parent == null ? void 0 : parent.tagName) === "TH" && parent.closest("thead")) this._enhanceOneHeader(parent);
+        return;
+      }
+      if (!(node instanceof HTMLElement)) return;
+      if (node.classList.contains("bv-th-content")) return;
+      if (node.closest("tbody")) return;
+      if (node.matches("th") && node.closest("thead")) this._enhanceOneHeader(node);
+      node.querySelectorAll("th").forEach((th) => {
+        if (th.closest("thead")) this._enhanceOneHeader(th);
+      });
+    });
   }
 };
 if (!customElements.get("bv-table")) {

package/dist/components/bv-toggle/bv-toggle.d.ts

@@ -2,11 +2,26 @@ export type ToggleSize = 'sm' | 'md';
 export declare class BvToggle extends HTMLElement {
     static readonly observedAttributes: readonly ["checked", "disabled", "label", "size"];
     private _rendered;
+    private _wrapEl;
     private _labelEl;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     get checked(): boolean;
     set checked(v: boolean);
+    /**
+     * Focus the toggle. The focusable element is the internal `.wrap`, not the
+     * host, so `hostEl.focus()` would otherwise be a silent no-op. Consumers that
+     * rebuild the panel a toggle lives in (bv-input-dropdown's `toggle-label`,
+     * bv-search-picker's `inactive-toggle-label`) need this to restore focus
+     * after the rebuild without reaching into this component's shadow root.
+     *
+     * No-op before the first render, and when disabled — `tabindex="-1"` only
+     * removes the element from Tab order, it does not block programmatic focus,
+     * so a restore pass could otherwise land focus on a control that was
+     * disabled mid-rebuild.
+     */
+    focus(options?: FocusOptions): void;
     private _render;
+    private _syncAria;
 }