npm - @bluevolt-tech/lumen - Versions diffs - 2.6.0 → 2.6.1 - Mend

@bluevolt-tech/lumen 2.6.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/bv-search-picker/bv-search-picker.d.ts +30 -0
package/dist/components/bv-search-picker/bv-search-picker.js +85 -4
package/dist/components/bv-table/bv-table.d.ts +45 -0
package/dist/components/bv-table/bv-table.js +84 -22
package/package.json +1 -1

package/dist/components/bv-search-picker/bv-search-picker.d.ts CHANGED Viewed

@@ -93,6 +93,14 @@ export declare class BvSearchPicker extends HTMLElement {
      * cleared when the user next opens the panel or explicitly dismisses.
      */
     private _clearedReason;
+    /**
+     * BTN-11916 — roving-tabindex position in the basket. The basket is a
+     * composite widget: one tab stop for the whole group, Arrow keys to move
+     * between the remove buttons inside it. Without this, a basket of 40 picked
+     * users costs 40 tab presses to step over — and the basket is the *unbounded*
+     * list here, since the results list is capped by the consumer.
+     */
+    private _basketActiveIdx;
     private _labelEl;
     private _triggerEl;
     private _panelEl;
@@ -211,6 +219,28 @@ export declare class BvSearchPicker extends HTMLElement {
      *   would bounce Shift+Tab back into the container's focus handler.
      */
     private _setActiveRow;
+    /**
+     * BTN-11916 — the basket's counterpart to `_setActiveRow`, and deliberately
+     * a different mechanism. The results list is a `role="listbox"`: one focus
+     * holder, `aria-activedescendant` pointing at the active option. The basket
+     * is not a listbox — nothing is being *chosen* there, each row carries its
+     * own action — so it uses a roving tabindex over the native buttons instead,
+     * which keeps their button semantics intact.
+     *
+     * Clamps, so callers may pass an index that has just gone out of range after
+     * a removal. When the basket empties there is no button left to hold focus:
+     * `moveFocus` then falls back to the search box rather than letting the
+     * document drop focus to <body>.
+     */
+    private _setActiveBasketRow;
+    /**
+     * BTN-11916 — Arrow Up/Down (plus Home/End) rove between the basket's remove
+     * buttons. Enter and Space are NOT handled here on purpose: these are native
+     * `<button>`s, so the browser already turns both into a click, and the click
+     * handler owns both the removal and the follow-up focus move. Intercepting
+     * them would mean re-implementing activation we get for free.
+     */
+    private _onBasketKeyDown;
     /**
      * BTN-10322 — Arrow Up/Down navigation between result rows; Enter or Space
      * adds the currently-focused row to the staged basket. Home/End jump to

package/dist/components/bv-search-picker/bv-search-picker.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-search-picker/bv-search-picker.css
-var bv_search_picker_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* \u2500\u2500 Field label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 1.5;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: var(--bv-spacing-xs-plus);\n}\n\n.field-label:empty {\n  display: none;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  /* Shrink-to-fit its own label by default (a compact pill, not a full-width\n     dropdown) \u2014 consumers that need a uniform width across a row of mixed\n     field types (e.g. sitting alongside bv-input-dropdown) can override this\n     rather than the component silently always filling its host's box. */\n  width: var(--bv-search-picker-trigger-width, max-content);\n  /* Also overridable \u2014 a consumer that shrinks the host below 120px (e.g. to\n     fit a fixed viewport floor) needs this floor to shrink too, or the\n     trigger silently overflows its own host box and overlaps whatever sits\n     next to it. */\n  min-width: var(--bv-search-picker-trigger-min-width, 120px);\n  max-width: 220px;\n  box-sizing: border-box;\n  min-height: var(--bv-control-height-lg);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-md);\n  background: var(--bv-color-neutral-0);\n  padding: 5px var(--bv-spacing-sm);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([disabled]) .trigger {\n  background: var(--bv-color-neutral-100);\n  cursor: not-allowed;\n}\n\n.trigger-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  height: 26px;\n  /* Symmetric padding so the pill still looks balanced with the clear button\n     hidden (count === 0) \u2014 an asymmetric right pad only reads correctly when\n     the clear button is actually there to visually fill the extra space. */\n  padding: 0 var(--bv-spacing-sm-plus);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary-light);\n  color: var(--bv-color-primary-dark);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  white-space: nowrap;\n  /* Without this, this flex item's default min-width:auto refuses to shrink\n     below its content's natural width \u2014 the same reason .trigger needs its\n     own min-width overridden (see bv-search-picker.ts) \u2014 and the pill spills\n     out past a narrowed .trigger instead of truncating with it. */\n  min-width: 0;\n}\n\n.trigger-pill-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.trigger-pill.mode-exclude {\n  background: var(--bv-color-danger-light);\n  color: var(--bv-color-danger-dark);\n}\n\n.trigger-pill-clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n/* The `display` rule above wins over the UA's [hidden]{display:none} (author\n   origin beats user-agent origin regardless of specificity) \u2014 restate it. */\n.trigger-pill-clear[hidden] {\n  display: none;\n}\n\n.trigger-pill-clear:hover {\n  /* Overlay derived from the neutral-900 token (matches the pattern\n     bv-alert-banner uses for its close-btn hover \u2014 token + color-mix, no\n     hardcoded rgba). Works over both include (primary-light) and exclude\n     (danger-light) pill backgrounds. */\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\n}\n\n/*\n * The pill-clear is a `span[role=\"button\"]` (not a native <button>) so that\n * it can nest inside the trigger button without producing invalid HTML.\n * Native <button> would give us a visible focus ring for free; role=\"button\"\n * doesn't, so paint one explicitly for keyboard users.\n */\n.trigger-pill-clear:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.trigger-caret {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-caret {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 BTN-10322 \xB7 cascade cleared affordance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.cleared-affordance {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  margin-top: var(--bv-spacing-xs-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  background: var(--bv-color-warning-light);\n  color: var(--bv-color-warning-dark);\n  border-radius: var(--bv-radius-md);\n  font-size: var(--bv-font-size-xs);\n  line-height: 1.4;\n}\n\n.cleared-affordance[hidden] {\n  display: none;\n}\n\n.cleared-affordance-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--bv-color-warning);\n  flex-shrink: 0;\n}\n\n.cleared-affordance-msg {\n  flex: 1;\n}\n\n.cleared-affordance-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--bv-radius-full);\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.cleared-affordance-dismiss:hover {\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 680px;\n  max-width: calc(100vw - var(--bv-spacing-md) * 2);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n}\n\n:host([open]) .panel {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Smart positioning \u2014 flips to whichever side has room (see _positionPanel\n   in bv-search-picker.ts) instead of always overflowing past a screen edge. */\n:host([data-placement='top']) .panel {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n\n:host([data-align='right']) .panel {\n  left: auto;\n  right: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-100);\n}\n\n.panel-toolbar bv-toggle {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.panel-body {\n  display: flex;\n  min-height: 230px;\n}\n\n/* \u2500\u2500 Results pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.results-pane {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* bv-searchbox's :host is width:100%, so the inset has to be padding on this\n   wrapper \u2014 a margin on the searchbox itself would push it past the pane's\n   edge, since 100% resolves against the container regardless of the child's\n   own margin. */\n.results-search {\n  padding: var(--bv-spacing-sm);\n}\n\n.results-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n}\n\n.result-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n  cursor: pointer;\n}\n\n.result-row:hover {\n  background: var(--bv-color-primary-50);\n}\n\n/* BTN-10322 \xB7 a11y \u2014 keyboard-focused row (Arrow Up/Down) gets a visible\n   ring so a keyboard-only user can see where they are. `aria-selected`\n   mirrors the focus position so screen readers announce it. */\n.result-row:focus-visible,\n.result-row[aria-selected='true'] {\n  background: var(--bv-color-primary-50);\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.results-rows:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.result-name {\n  /* min-width:0 overrides the flex-item default of min-width:auto, which\n     would otherwise refuse to shrink below the text's natural width and\n     defeat the wrap/clamp below entirely. */\n  min-width: 0;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  font-weight: var(--bv-font-weight-semibold);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.result-inactive {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n}\n\n.result-add {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.results-empty {\n  padding: var(--bv-spacing-md-minus) var(--bv-spacing-md-minus);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n.results-empty:empty,\n.results-empty[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Loading skeleton (mirrors bv-filter-panel's pattern) \u2500\u2500\u2500 */\n\n.skeleton {\n  display: none;\n  flex-direction: column;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n:host([loading]) .results-rows,\n:host([loading]) .results-empty {\n  display: none;\n}\n\n.skeleton-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n}\n\n.skeleton-line {\n  height: 11px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* \u2500\u2500 Basket pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.basket-pane {\n  width: 210px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bv-color-neutral-100);\n}\n\n.basket-header {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n}\n\n.basket-header-label {\n  font-size: var(--bv-font-size-xs);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-500);\n}\n\n.basket-clear-all {\n  margin-left: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.basket-clear-all:hover {\n  color: var(--bv-color-primary-dark);\n  text-decoration: underline;\n}\n\n.basket-clear-all[hidden] {\n  display: none;\n}\n\n.basket-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n  padding: 0 var(--bv-spacing-sm) var(--bv-spacing-sm);\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n}\n\n.basket-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  padding: var(--bv-spacing-xs) var(--bv-spacing-sm);\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-primary-light);\n}\n\n.basket-row.mode-exclude {\n  background: var(--bv-color-danger-light);\n}\n\n.basket-row-name {\n  min-width: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.basket-row-remove {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.basket-empty {\n  padding: var(--bv-spacing-xs) var(--bv-spacing-2xs);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.panel-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-0);\n}\n\n.panel-footer bv-button {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.results-limit-note {\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-500);\n  line-height: 1.4;\n}\n\n/* These elements have an author `display`, which beats the user-agent\n   `[hidden] { display: none }` regardless of specificity. The component\n   toggles their `hidden`, so without this the property changes nothing on\n   screen (BTN-11521). */\n.cleared-affordance[hidden] {\n  display: none;\n}\n";
+var bv_search_picker_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* \u2500\u2500 Field label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 1.5;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: var(--bv-spacing-xs-plus);\n}\n\n.field-label:empty {\n  display: none;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  /* Shrink-to-fit its own label by default (a compact pill, not a full-width\n     dropdown) \u2014 consumers that need a uniform width across a row of mixed\n     field types (e.g. sitting alongside bv-input-dropdown) can override this\n     rather than the component silently always filling its host's box. */\n  width: var(--bv-search-picker-trigger-width, max-content);\n  /* Also overridable \u2014 a consumer that shrinks the host below 120px (e.g. to\n     fit a fixed viewport floor) needs this floor to shrink too, or the\n     trigger silently overflows its own host box and overlaps whatever sits\n     next to it. */\n  min-width: var(--bv-search-picker-trigger-min-width, 120px);\n  max-width: 220px;\n  box-sizing: border-box;\n  min-height: var(--bv-control-height-lg);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-md);\n  background: var(--bv-color-neutral-0);\n  padding: 5px var(--bv-spacing-sm);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([disabled]) .trigger {\n  background: var(--bv-color-neutral-100);\n  cursor: not-allowed;\n}\n\n.trigger-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  height: 26px;\n  /* Symmetric padding so the pill still looks balanced with the clear button\n     hidden (count === 0) \u2014 an asymmetric right pad only reads correctly when\n     the clear button is actually there to visually fill the extra space. */\n  padding: 0 var(--bv-spacing-sm-plus);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary-light);\n  color: var(--bv-color-primary-dark);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  white-space: nowrap;\n  /* Without this, this flex item's default min-width:auto refuses to shrink\n     below its content's natural width \u2014 the same reason .trigger needs its\n     own min-width overridden (see bv-search-picker.ts) \u2014 and the pill spills\n     out past a narrowed .trigger instead of truncating with it. */\n  min-width: 0;\n}\n\n.trigger-pill-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.trigger-pill.mode-exclude {\n  background: var(--bv-color-danger-light);\n  color: var(--bv-color-danger-dark);\n}\n\n.trigger-pill-clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n/* The `display` rule above wins over the UA's [hidden]{display:none} (author\n   origin beats user-agent origin regardless of specificity) \u2014 restate it. */\n.trigger-pill-clear[hidden] {\n  display: none;\n}\n\n.trigger-pill-clear:hover {\n  /* Overlay derived from the neutral-900 token (matches the pattern\n     bv-alert-banner uses for its close-btn hover \u2014 token + color-mix, no\n     hardcoded rgba). Works over both include (primary-light) and exclude\n     (danger-light) pill backgrounds. */\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\n}\n\n/*\n * The pill-clear is a `span[role=\"button\"]` (not a native <button>) so that\n * it can nest inside the trigger button without producing invalid HTML.\n * Native <button> would give us a visible focus ring for free; role=\"button\"\n * doesn't, so paint one explicitly for keyboard users.\n */\n.trigger-pill-clear:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.trigger-caret {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-caret {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 BTN-10322 \xB7 cascade cleared affordance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.cleared-affordance {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  margin-top: var(--bv-spacing-xs-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  background: var(--bv-color-warning-light);\n  color: var(--bv-color-warning-dark);\n  border-radius: var(--bv-radius-md);\n  font-size: var(--bv-font-size-xs);\n  line-height: 1.4;\n}\n\n.cleared-affordance[hidden] {\n  display: none;\n}\n\n.cleared-affordance-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--bv-color-warning);\n  flex-shrink: 0;\n}\n\n.cleared-affordance-msg {\n  flex: 1;\n}\n\n.cleared-affordance-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--bv-radius-full);\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.cleared-affordance-dismiss:hover {\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 680px;\n  max-width: calc(100vw - var(--bv-spacing-md) * 2);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n}\n\n:host([open]) .panel {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Smart positioning \u2014 flips to whichever side has room (see _positionPanel\n   in bv-search-picker.ts) instead of always overflowing past a screen edge. */\n:host([data-placement='top']) .panel {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n\n:host([data-align='right']) .panel {\n  left: auto;\n  right: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-100);\n}\n\n.panel-toolbar bv-toggle {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.panel-body {\n  display: flex;\n  min-height: 230px;\n}\n\n/* \u2500\u2500 Results pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.results-pane {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* bv-searchbox's :host is width:100%, so the inset has to be padding on this\n   wrapper \u2014 a margin on the searchbox itself would push it past the pane's\n   edge, since 100% resolves against the container regardless of the child's\n   own margin. */\n.results-search {\n  padding: var(--bv-spacing-sm);\n}\n\n.results-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n}\n\n.result-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n  cursor: pointer;\n}\n\n.result-row:hover {\n  background: var(--bv-color-primary-50);\n}\n\n/* BTN-10322 \xB7 a11y \u2014 keyboard-focused row (Arrow Up/Down) gets a visible\n   ring so a keyboard-only user can see where they are. `aria-selected`\n   mirrors the focus position so screen readers announce it. */\n.result-row:focus-visible,\n.result-row[aria-selected='true'] {\n  background: var(--bv-color-primary-50);\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.results-rows:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.result-name {\n  /* min-width:0 overrides the flex-item default of min-width:auto, which\n     would otherwise refuse to shrink below the text's natural width and\n     defeat the wrap/clamp below entirely. */\n  min-width: 0;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  font-weight: var(--bv-font-weight-semibold);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.result-inactive {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n}\n\n.result-add {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.results-empty {\n  padding: var(--bv-spacing-md-minus) var(--bv-spacing-md-minus);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n.results-empty:empty,\n.results-empty[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Loading skeleton (mirrors bv-filter-panel's pattern) \u2500\u2500\u2500 */\n\n.skeleton {\n  display: none;\n  flex-direction: column;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n:host([loading]) .results-rows,\n:host([loading]) .results-empty {\n  display: none;\n}\n\n.skeleton-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n}\n\n.skeleton-line {\n  height: 11px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* \u2500\u2500 Basket pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.basket-pane {\n  width: 210px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bv-color-neutral-100);\n}\n\n.basket-header {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n}\n\n.basket-header-label {\n  font-size: var(--bv-font-size-xs);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-500);\n}\n\n.basket-clear-all {\n  margin-left: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.basket-clear-all:hover {\n  color: var(--bv-color-primary-dark);\n  text-decoration: underline;\n}\n\n.basket-clear-all[hidden] {\n  display: none;\n}\n\n.basket-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n  padding: 0 var(--bv-spacing-sm) var(--bv-spacing-sm);\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n}\n\n.basket-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  padding: var(--bv-spacing-xs) var(--bv-spacing-sm);\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-primary-light);\n}\n\n.basket-row.mode-exclude {\n  background: var(--bv-color-danger-light);\n}\n\n.basket-row-name {\n  min-width: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.basket-row-remove {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* BTN-11916 \xB7 a11y \u2014 the basket is a roving-tabindex group, so Arrow Up/Down\n   moves focus between these buttons without any click. A keyboard user has to\n   be able to see which one they are on; matches the ring on .result-row. */\n.basket-row-remove:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 2px;\n  border-radius: var(--bv-radius-sm);\n}\n\n.basket-empty {\n  padding: var(--bv-spacing-xs) var(--bv-spacing-2xs);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.panel-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-0);\n}\n\n.panel-footer bv-button {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.results-limit-note {\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-500);\n  line-height: 1.4;\n}\n\n/* These elements have an author `display`, which beats the user-agent\n   `[hidden] { display: none }` regardless of specificity. The component\n   toggles their `hidden`, so without this the property changes nothing on\n   screen (BTN-11521). */\n.cleared-affordance[hidden] {\n  display: none;\n}\n";
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();
@@ -641,6 +641,14 @@ var BvSearchPicker = class extends HTMLElement {
    * cleared when the user next opens the panel or explicitly dismisses.
    */
   _clearedReason = null;
+  /**
+   * BTN-11916 — roving-tabindex position in the basket. The basket is a
+   * composite widget: one tab stop for the whole group, Arrow keys to move
+   * between the remove buttons inside it. Without this, a basket of 40 picked
+   * users costs 40 tab presses to step over — and the basket is the *unbounded*
+   * list here, since the results list is capped by the consumer.
+   */
+  _basketActiveIdx = 0;
   _labelEl = null;
   _triggerEl = null;
   _panelEl = null;
@@ -959,6 +967,7 @@ var BvSearchPicker = class extends HTMLElement {
     basketHeader.append(basketHeaderLabel, basketClearAll);
     const basketList = document.createElement("div");
     basketList.className = "basket-list";
+    basketList.addEventListener("keydown", (e) => this._onBasketKeyDown(e));
     this._basketListEl = basketList;
     const basketEmpty = document.createElement("div");
     basketEmpty.className = "basket-empty";
@@ -1206,7 +1215,11 @@ var BvSearchPicker = class extends HTMLElement {
       removeBtn.className = "basket-row-remove";
       removeBtn.setAttribute("aria-label", `Remove ${item.name}`);
       removeBtn.innerHTML = getIconSvg("x", 10);
-      removeBtn.addEventListener("click", () => this._removeBasket(item.id));
+      removeBtn.addEventListener("click", (e) => {
+        const idx = this._stagedBasket.findIndex((c) => c.id === item.id);
+        this._removeBasket(item.id);
+        if (e.detail === 0) this._setActiveBasketRow(idx, true);
+      });
       row.append(nameEl, removeBtn);
       this._basketListEl.appendChild(row);
     }
@@ -1216,6 +1229,7 @@ var BvSearchPicker = class extends HTMLElement {
       { count: basket.length }
     );
     this._basketEmptyEl.hidden = basket.length > 0;
+    this._setActiveBasketRow(this._basketActiveIdx, false);
     this._syncBasketRowColors();
     this._syncBasketHeaderLabel();
     this._syncBasketEmptyText();
@@ -1432,6 +1446,67 @@ var BvSearchPicker = class extends HTMLElement {
     this._resultsRowsEl.setAttribute("aria-activedescendant", active.id);
     if (moveFocus) active.focus();
   }
+  /**
+   * BTN-11916 — the basket's counterpart to `_setActiveRow`, and deliberately
+   * a different mechanism. The results list is a `role="listbox"`: one focus
+   * holder, `aria-activedescendant` pointing at the active option. The basket
+   * is not a listbox — nothing is being *chosen* there, each row carries its
+   * own action — so it uses a roving tabindex over the native buttons instead,
+   * which keeps their button semantics intact.
+   *
+   * Clamps, so callers may pass an index that has just gone out of range after
+   * a removal. When the basket empties there is no button left to hold focus:
+   * `moveFocus` then falls back to the search box rather than letting the
+   * document drop focus to <body>.
+   */
+  _setActiveBasketRow(idx, moveFocus) {
+    var _a, _b;
+    if (!this._basketListEl) return;
+    const btns = Array.from(
+      this._basketListEl.querySelectorAll(".basket-row-remove")
+    );
+    if (btns.length === 0) {
+      this._basketActiveIdx = 0;
+      if (moveFocus) (_a = this._searchEl) == null ? void 0 : _a.focus();
+      return;
+    }
+    const bounded = Math.max(0, Math.min(idx, btns.length - 1));
+    this._basketActiveIdx = bounded;
+    btns.forEach((btn, i) => {
+      btn.tabIndex = i === bounded ? 0 : -1;
+    });
+    if (moveFocus) (_b = btns[bounded]) == null ? void 0 : _b.focus();
+  }
+  /**
+   * BTN-11916 — Arrow Up/Down (plus Home/End) rove between the basket's remove
+   * buttons. Enter and Space are NOT handled here on purpose: these are native
+   * `<button>`s, so the browser already turns both into a click, and the click
+   * handler owns both the removal and the follow-up focus move. Intercepting
+   * them would mean re-implementing activation we get for free.
+   */
+  _onBasketKeyDown(e) {
+    if (!this._basketListEl) return;
+    const count = this._basketListEl.querySelectorAll(".basket-row-remove").length;
+    if (count === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this._setActiveBasketRow(this._basketActiveIdx + 1, true);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this._setActiveBasketRow(this._basketActiveIdx - 1, true);
+        break;
+      case "Home":
+        e.preventDefault();
+        this._setActiveBasketRow(0, true);
+        break;
+      case "End":
+        e.preventDefault();
+        this._setActiveBasketRow(count - 1, true);
+        break;
+    }
+  }
   /**
    * BTN-10322 — Arrow Up/Down navigation between result rows; Enter or Space
    * adds the currently-focused row to the staged basket. Home/End jump to
@@ -1443,7 +1518,7 @@ var BvSearchPicker = class extends HTMLElement {
    * which then removes the row from the results list.
    */
   _onResultsKeyDown(e) {
-    var _a;
+    var _a, _b, _c;
     if (!this._resultsRowsEl) return;
     const rows = Array.from(this._resultsRowsEl.querySelectorAll(".result-row"));
     if (rows.length === 0) return;
@@ -1473,7 +1548,13 @@ var BvSearchPicker = class extends HTMLElement {
         const focusedId = (_a = rows[currentIdx]) == null ? void 0 : _a.dataset["id"];
         if (!focusedId) return;
         const item = this.results.find((r) => r.id === focusedId);
-        if (item) this._addBasket(item);
+        if (!item) return;
+        this._addBasket(item);
+        if ((_b = this._resultsRowsEl) == null ? void 0 : _b.querySelector(".result-row")) {
+          this._setActiveRow(currentIdx, true);
+        } else {
+          (_c = this._searchEl) == null ? void 0 : _c.focus();
+        }
         break;
       }
     }

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

@@ -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;
@@ -53,6 +68,36 @@ export declare class BvTable extends HTMLElement {
     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 CHANGED Viewed

@@ -186,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");
   }
@@ -211,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;
@@ -626,34 +644,78 @@ var BvTable = class extends HTMLElement {
   // for <th>.
   _observeHeaderMutations() {
     this._headerObserver = new MutationObserver((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);
-        }
-      }
+      this._observeTheadCharacterData();
+      this._handleHeaderMutations(mutations);
     });
     this._headerObserver.observe(this, {
       attributes: true,
       childList: true,
-      characterData: 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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bluevolt-tech/lumen",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",