@bluevolt-tech/lumen 2.3.0 → 2.3.1

package/dist/components/bv-date-range-input/bv-date-range-input.js

@@ -556,12 +556,43 @@ var BvDateRangePicker = class extends HTMLElement {
     if (name === "preset") this._preset = val ?? "";
     if (!this._rendered) return;
     if (name === "start" || name === "end" || name === "preset") {
+      this._maybeRepositionView();
       this._syncCalendars();
       this._syncInputs();
       this._syncPresets();
     }
     this._syncValidity();
   }
+  // Hoist the left panel to the anchor's month, but ONLY when *neither*
+  // endpoint of the current start/end pair is already in the visible pair.
+  // Checking both endpoints matters after manual navigation: if the user
+  // scrolled far from `_start` and the consumer only touches `_end`, the
+  // change may land inside the visible pair even though `_start` is well
+  // out of view — the guard must keep the user's navigation intact in
+  // that case. The anchor for the actual reposition still prefers
+  // `_start` (fallback to `_end`) so common consumer updates that write
+  // both fields converge to the start's month. See BTN-10755 in
+  // `attributeChangedCallback` for the flow context. Returns silently on
+  // empty / malformed values — the sync pass afterwards can still render
+  // the cleared selection over the current view without a jump.
+  _maybeRepositionView() {
+    const anchor = this._start || this._end;
+    if (!anchor) return;
+    const parseYearMonth = (s2) => {
+      const dt = parseIso(s2);
+      if (!dt) return null;
+      return { y: dt.getFullYear(), m: dt.getMonth() };
+    };
+    const right = this._getRightMonth();
+    const isVisible = (y, m) => y === this._leftYear && m === this._leftMonth || y === right.year && m === right.month;
+    const s = this._start ? parseYearMonth(this._start) : null;
+    const e = this._end ? parseYearMonth(this._end) : null;
+    if (s && isVisible(s.y, s.m) || e && isVisible(e.y, e.m)) return;
+    const target = parseYearMonth(anchor);
+    if (!target) return;
+    this._leftYear = target.y;
+    this._leftMonth = target.m;
+  }
   /**
    * BTN-10312 — public reset of the picker's internal draft state to the
    * currently committed `start` / `end` / `preset` attributes. Called by

package/dist/components/bv-date-range-picker/bv-date-range-picker.d.ts

@@ -51,6 +51,7 @@ export declare class BvDateRangePicker extends HTMLElement {
     set preset(v: string);
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _maybeRepositionView;
     /**
      * BTN-10312 — public reset of the picker's internal draft state to the
      * currently committed `start` / `end` / `preset` attributes. Called by

package/dist/components/bv-date-range-picker/bv-date-range-picker.js

@@ -495,12 +495,43 @@ var BvDateRangePicker = class extends HTMLElement {
     if (name === "preset") this._preset = val ?? "";
     if (!this._rendered) return;
     if (name === "start" || name === "end" || name === "preset") {
+      this._maybeRepositionView();
       this._syncCalendars();
       this._syncInputs();
       this._syncPresets();
     }
     this._syncValidity();
   }
+  // Hoist the left panel to the anchor's month, but ONLY when *neither*
+  // endpoint of the current start/end pair is already in the visible pair.
+  // Checking both endpoints matters after manual navigation: if the user
+  // scrolled far from `_start` and the consumer only touches `_end`, the
+  // change may land inside the visible pair even though `_start` is well
+  // out of view — the guard must keep the user's navigation intact in
+  // that case. The anchor for the actual reposition still prefers
+  // `_start` (fallback to `_end`) so common consumer updates that write
+  // both fields converge to the start's month. See BTN-10755 in
+  // `attributeChangedCallback` for the flow context. Returns silently on
+  // empty / malformed values — the sync pass afterwards can still render
+  // the cleared selection over the current view without a jump.
+  _maybeRepositionView() {
+    const anchor = this._start || this._end;
+    if (!anchor) return;
+    const parseYearMonth = (s2) => {
+      const dt = parseIso(s2);
+      if (!dt) return null;
+      return { y: dt.getFullYear(), m: dt.getMonth() };
+    };
+    const right = this._getRightMonth();
+    const isVisible = (y, m) => y === this._leftYear && m === this._leftMonth || y === right.year && m === right.month;
+    const s = this._start ? parseYearMonth(this._start) : null;
+    const e = this._end ? parseYearMonth(this._end) : null;
+    if (s && isVisible(s.y, s.m) || e && isVisible(e.y, e.m)) return;
+    const target = parseYearMonth(anchor);
+    if (!target) return;
+    this._leftYear = target.y;
+    this._leftMonth = target.m;
+  }
   /**
    * BTN-10312 — public reset of the picker's internal draft state to the
    * currently committed `start` / `end` / `preset` attributes. Called by

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

@@ -1,5 +1,5 @@
 export declare class BvPagination extends HTMLElement {
-    static readonly observedAttributes: readonly ["page", "total-pages", "total", "page-size", "siblings", "show-results", "show-page-size", "page-size-options", "compact"];
+    static readonly observedAttributes: readonly ["page", "total-pages", "total", "page-size", "siblings", "show-results", "show-page-size", "page-size-options", "compact", "hide-range"];
     private _rendered;
     private _metaEl;
     private _pagesEl;
@@ -24,6 +24,8 @@ export declare class BvPagination extends HTMLElement {
     set showPageSize(v: boolean);
     get compact(): boolean;
     set compact(v: boolean);
+    get hideRange(): boolean;
+    set hideRange(v: boolean);
     get pageSizeOptions(): number[];
     private _go;
     private _render;

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

@@ -32,7 +32,8 @@ var BvPagination = class extends HTMLElement {
     "show-results",
     "show-page-size",
     "page-size-options",
-    "compact"
+    "compact",
+    "hide-range"
   ];
   _rendered = false;
   _metaEl = null;
@@ -90,6 +91,13 @@ var BvPagination = class extends HTMLElement {
     if (v) this.setAttribute("compact", "");
     else this.removeAttribute("compact");
   }
+  get hideRange() {
+    return this.hasAttribute("hide-range");
+  }
+  set hideRange(v) {
+    if (v) this.setAttribute("hide-range", "");
+    else this.removeAttribute("hide-range");
+  }
   get pageSizeOptions() {
     const raw = this.getAttribute("page-size-options") ?? "10,25,50,100";
     return raw.split(",").map((v) => parseInt(v.trim(), 10)).filter((v) => !isNaN(v));
@@ -169,7 +177,7 @@ var BvPagination = class extends HTMLElement {
     this._update();
   }
   _update() {
-    const { page, totalPages, total, pageSize, siblings, compact } = this;
+    const { page, totalPages, total, pageSize, siblings, compact, hideRange } = this;
     if (this._prevBtn) this._prevBtn.disabled = page <= 1;
     if (this._nextBtn) this._nextBtn.disabled = page >= totalPages;
     if (this._pageLabelEl) {
@@ -180,7 +188,7 @@ var BvPagination = class extends HTMLElement {
       this._pagesEl.hidden = compact;
     }
     if (this._rangeEl) {
-      if (compact) {
+      if (compact || hideRange) {
         this._rangeEl.hidden = true;
       } else if (total > 0) {
         const start = (page - 1) * pageSize + 1;

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

@@ -66,6 +66,14 @@ export declare class BvSearchPicker extends HTMLElement {
     private _searchRequestId;
     /** BTN-10322 — timer handle for the internal debounce on `bv-search`. */
     private _searchDebounceHandle;
+    /**
+     * BTN-10755 — set synchronously the moment a keystroke enters over-threshold
+     * territory and the debounce is armed; cleared when the debounce fires (or
+     * on any reset / clear path). `_syncResultsEmptyText` treats it the same as
+     * `loading`, so the "No X found." copy can't flash in the ~300ms gap
+     * between the keystroke and the dispatched `bv-search`.
+     */
+    private _searchPending;
     /**
      * BTN-10322 — the reason to display in the cascade cleared affordance,
      * or `null` when the banner is hidden. Set by `reset({ reason })`,
@@ -145,6 +153,7 @@ export declare class BvSearchPicker extends HTMLElement {
     private _syncDisabled;
     private _syncShowInactive;
     private _syncResults;
+    private _effectiveQueryLength;
     private _syncResultsEmptyText;
     private _syncResultsLimitNote;
     private _syncBasket;

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

@@ -587,6 +587,14 @@ var BvSearchPicker = class extends HTMLElement {
   _searchRequestId = 0;
   /** BTN-10322 — timer handle for the internal debounce on `bv-search`. */
   _searchDebounceHandle = null;
+  /**
+   * BTN-10755 — set synchronously the moment a keystroke enters over-threshold
+   * territory and the debounce is armed; cleared when the debounce fires (or
+   * on any reset / clear path). `_syncResultsEmptyText` treats it the same as
+   * `loading`, so the "No X found." copy can't flash in the ~300ms gap
+   * between the keystroke and the dispatched `bv-search`.
+   */
+  _searchPending = false;
   /**
    * BTN-10322 — the reason to display in the cascade cleared affordance,
    * or `null` when the banner is hidden. Set by `reset({ reason })`,
@@ -713,6 +721,7 @@ var BvSearchPicker = class extends HTMLElement {
       clearTimeout(this._searchDebounceHandle);
       this._searchDebounceHandle = null;
     }
+    this._searchPending = false;
   }
   attributeChangedCallback(name, _old, _val) {
     if (!this._rendered) return;
@@ -850,8 +859,8 @@ var BvSearchPicker = class extends HTMLElement {
     searchEl.addEventListener("bv-search", (e) => {
       e.stopPropagation();
       this._query = e.detail.value.trim();
-      this._syncResultsEmptyText();
       this._scheduleSearchDispatch();
+      this._syncResultsEmptyText();
     });
     searchEl.addEventListener("keydown", (e) => {
       const key = e.key;
@@ -1049,6 +1058,7 @@ var BvSearchPicker = class extends HTMLElement {
   }
   _syncResults() {
     if (!this._resultsRowsEl || !this._resultsEmptyEl) return;
+    this._searchPending = false;
     if (this._resultsListEl) {
       this._resultsListEl.setAttribute("aria-busy", this.loading ? "true" : "false");
     }
@@ -1085,12 +1095,20 @@ var BvSearchPicker = class extends HTMLElement {
     this._syncResultsEmptyText();
     this._syncResultsLimitNote();
   }
+  // BTN-10729 — the min-query-length gate counts non-whitespace characters,
+  // not raw length. Otherwise `"a b"` (2 letters + 1 space) passes a 3-char
+  // gate and hits the backend with an effective 2-letter search. Both the
+  // empty-state copy and _dispatchSearch consult the same helper so their
+  // decisions can never disagree.
+  _effectiveQueryLength() {
+    return this._query.replace(/\s+/g, "").length;
+  }
   _syncResultsEmptyText() {
     if (!this._resultsEmptyEl || !this._resultsRowsEl) return;
-    const isEmpty = !this.loading && this._resultsRowsEl.children.length === 0;
+    const isEmpty = !this.loading && !this._searchPending && this._resultsRowsEl.children.length === 0;
     this._resultsEmptyEl.hidden = !isEmpty;
     if (!isEmpty) return;
-    if (this._query.length < this.minQueryLength) {
+    if (this._effectiveQueryLength() < this.minQueryLength) {
       this._resultsEmptyEl.textContent = this._interp(
         this.getAttribute("label-min-chars") ?? "Type at least {n} characters to search.",
         { n: this.minQueryLength }
@@ -1245,6 +1263,11 @@ var BvSearchPicker = class extends HTMLElement {
     var _a;
     this._query = "";
     (_a = this._searchEl) == null ? void 0 : _a.setAttribute("value", "");
+    if (this._searchDebounceHandle !== null) {
+      clearTimeout(this._searchDebounceHandle);
+      this._searchDebounceHandle = null;
+    }
+    this._searchPending = false;
     this.basket = [];
     this._dispatchApply();
   }
@@ -1307,7 +1330,7 @@ var BvSearchPicker = class extends HTMLElement {
     );
   }
   _dispatchSearch() {
-    if (this._query.length < this.minQueryLength) return;
+    if (this._effectiveQueryLength() < this.minQueryLength) return;
     this._searchRequestId += 1;
     const requestId = this._searchRequestId;
     this.dispatchEvent(
@@ -1325,9 +1348,12 @@ var BvSearchPicker = class extends HTMLElement {
     if (this._searchDebounceHandle !== null) {
       clearTimeout(this._searchDebounceHandle);
     }
+    this._searchPending = this._effectiveQueryLength() >= this.minQueryLength;
     this._searchDebounceHandle = setTimeout(() => {
       this._searchDebounceHandle = null;
+      this._searchPending = false;
       this._dispatchSearch();
+      this._syncResultsEmptyText();
     }, this.debounceMs);
   }
   /**
@@ -1420,6 +1446,11 @@ var BvSearchPicker = class extends HTMLElement {
     this._stagedBasket = [];
     this._query = "";
     (_a = this._searchEl) == null ? void 0 : _a.setAttribute("value", "");
+    if (this._searchDebounceHandle !== null) {
+      clearTimeout(this._searchDebounceHandle);
+      this._searchDebounceHandle = null;
+    }
+    this._searchPending = false;
     this.results = [];
     this.resultsTotal = null;
     this._clearedReason = reason;

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

@@ -1,4 +1,14 @@
 import '../bv-tooltip/bv-tooltip.ts';
+/**
+ * BTN-10755 followup — public event detail for `bv-sort`. `column` is
+ * guaranteed to be a string (not null): the header enhancer refuses to
+ * wire a sortable th without `data-column`, so this dispatch site can
+ * never emit a null column.
+ */
+export interface BvSortEventDetail {
+    column: string;
+    direction: 'asc' | 'desc' | 'none';
+}
 export declare class BvTable extends HTMLElement {
     static readonly observedAttributes: string[];
     private _isDragging;
@@ -7,8 +17,15 @@ export declare class BvTable extends HTMLElement {
     private _boundMouseDown;
     private _boundMouseMove;
     private _boundMouseUp;
+    private _boundScroll;
+    private _resizeObserver;
+    private _mutationObserver;
+    private _bodyObserver;
+    private _headerObserver;
     get loading(): boolean;
     set loading(v: boolean);
+    get fitViewport(): boolean;
+    set fitViewport(v: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
@@ -16,10 +33,21 @@ export declare class BvTable extends HTMLElement {
     private _removeSkeleton;
     private _setupDrag;
     private _teardownDrag;
+    private _setupStickyColumns;
+    private _teardownStickyColumns;
+    private _onScroll;
+    private _updateStickyColumnOffsets;
     private _enhanceBodyCells;
+    private _enhanceOneCell;
+    private _observeBodyMutations;
     private _onMouseDown;
     private _onMouseMove;
     private _onMouseUp;
     private _isOverText;
     private _enhanceHeaders;
+    private _enhanceOneHeader;
+    private _extractHeaderLabel;
+    private _syncSortableTh;
+    private _cycleSort;
+    private _observeHeaderMutations;
 }

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/* 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 tr {\n  background: var(--bv-color-neutral-100);\n}\n\nbv-table thead th {\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 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";
 
 // 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";
@@ -167,13 +167,24 @@ function injectTableStyles() {
   document.head.appendChild(style);
 }
 var BvTable = class extends HTMLElement {
-  static observedAttributes = ["striped", "bordered", "loading", "loading-rows"];
+  static observedAttributes = [
+    "striped",
+    "bordered",
+    "loading",
+    "loading-rows",
+    "fit-viewport"
+  ];
   _isDragging = false;
   _dragStartX = 0;
   _dragScrollLeft = 0;
   _boundMouseDown = (e) => this._onMouseDown(e);
   _boundMouseMove = (e) => this._onMouseMove(e);
   _boundMouseUp = () => this._onMouseUp();
+  _boundScroll = () => this._onScroll();
+  _resizeObserver = null;
+  _mutationObserver = null;
+  _bodyObserver = null;
+  _headerObserver = null;
   get loading() {
     return this.hasAttribute("loading");
   }
@@ -181,15 +192,31 @@ var BvTable = class extends HTMLElement {
     if (v) this.setAttribute("loading", "");
     else this.removeAttribute("loading");
   }
+  get fitViewport() {
+    return this.hasAttribute("fit-viewport");
+  }
+  set fitViewport(v) {
+    if (v) this.setAttribute("fit-viewport", "");
+    else this.removeAttribute("fit-viewport");
+  }
   connectedCallback() {
     injectTableStyles();
     this._enhanceHeaders();
     this._enhanceBodyCells();
     this._setupDrag();
+    this._setupStickyColumns();
+    this._observeBodyMutations();
+    this._observeHeaderMutations();
     if (this.hasAttribute("loading")) this._renderSkeleton();
   }
   disconnectedCallback() {
+    var _a, _b;
     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;
   }
   attributeChangedCallback(name, _old, val) {
     if (!this.isConnected) return;
@@ -201,6 +228,10 @@ var BvTable = class extends HTMLElement {
       this._removeSkeleton();
       this._renderSkeleton();
     }
+    if (name === "fit-viewport") {
+      this._teardownStickyColumns();
+      this._setupStickyColumns();
+    }
   }
   // Renders skeleton rows as a light-DOM sibling to the user's <table>.
   // The `loading` attribute on the host + CSS in bv-table.css handles the
@@ -241,20 +272,126 @@ var BvTable = class extends HTMLElement {
     window.removeEventListener("mousemove", this._boundMouseMove);
     window.removeEventListener("mouseup", this._boundMouseUp);
   }
+  // ── Sticky columns (BTN-10755) ───────────────────────────────────────
+  //
+  // Consumers opt in per-cell via `data-sticky` on the th/td they want to
+  // freeze. Cumulative `left` offsets are computed from the natural widths
+  // of the sticky <th>s in the first thead row and set as inline styles on
+  // every sticky cell (th + td, across every body row). The final sticky
+  // <th>/<td> in each row is marked with `data-sticky-last` so CSS can hang
+  // the scroll-shadow gradient on its trailing edge when the host has
+  // scrolled off the initial x-position.
+  _setupStickyColumns() {
+    if (!this.querySelector("[data-sticky]") && !this.hasAttribute("fit-viewport")) return;
+    this.addEventListener("scroll", this._boundScroll, { passive: true });
+    requestAnimationFrame(() => {
+      if (!this.isConnected) return;
+      this._updateStickyColumnOffsets();
+      this._onScroll();
+    });
+    if (typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => this._updateStickyColumnOffsets());
+      this._resizeObserver.observe(this);
+    }
+    this._mutationObserver = new MutationObserver(() => this._updateStickyColumnOffsets());
+    this._mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+  _teardownStickyColumns() {
+    var _a, _b;
+    this.removeEventListener("scroll", this._boundScroll);
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    this._resizeObserver = null;
+    (_b = this._mutationObserver) == null ? void 0 : _b.disconnect();
+    this._mutationObserver = null;
+  }
+  _onScroll() {
+    if (this.scrollLeft > 0) this.setAttribute("data-scrolled-x", "");
+    else this.removeAttribute("data-scrolled-x");
+  }
+  _updateStickyColumnOffsets() {
+    const firstHeadRow = this.querySelector("thead tr");
+    if (!firstHeadRow) return;
+    const firstRowHeight = firstHeadRow.offsetHeight;
+    if (firstRowHeight > 0) {
+      this.style.setProperty("--bv-sticky-head-row1-height", `${firstRowHeight}px`);
+    }
+    const headerCells = Array.from(firstHeadRow.children);
+    const widths = /* @__PURE__ */ new Map();
+    let cumulative = 0;
+    let lastStickyColIndex = -1;
+    let stickyCount = 0;
+    let col = 0;
+    for (const cell of headerCells) {
+      const colspan = Number(cell.getAttribute("colspan") ?? "1") || 1;
+      if (cell.hasAttribute("data-sticky")) {
+        const overlap = stickyCount === 0 ? 0 : 1;
+        widths.set(col, cumulative - overlap);
+        cumulative += cell.offsetWidth;
+        lastStickyColIndex = col;
+        stickyCount++;
+      }
+      col += colspan;
+    }
+    if (lastStickyColIndex < 0) return;
+    const applyToRow = (row) => {
+      const cells = Array.from(row.children);
+      let col2 = 0;
+      for (const cell of cells) {
+        const colspan = Number(cell.getAttribute("colspan") ?? "1") || 1;
+        if (cell.hasAttribute("data-sticky")) {
+          const left = widths.get(col2);
+          if (left !== void 0) cell.style.setProperty("--bv-sticky-left", `${left}px`);
+          if (col2 === lastStickyColIndex) cell.setAttribute("data-sticky-last", "");
+          else cell.removeAttribute("data-sticky-last");
+        }
+        col2 += colspan;
+      }
+    };
+    this.querySelectorAll("thead tr, tbody tr").forEach(applyToRow);
+  }
   // Wraps each plain-text body cell's content in an inline span. Unlike the
   // <td> itself, an inline span only occupies the rendered width of its text —
   // so hovering the cell's padding (short values, blank space) stays grab-able,
   // and only the glyphs themselves resolve to a text-selectable target.
   _enhanceBodyCells() {
-    this.querySelectorAll("tbody td").forEach((td) => {
-      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);
+    this.querySelectorAll("tbody td").forEach((td) => this._enhanceOneCell(td));
+  }
+  // Single-cell wrapper. Idempotent: already-wrapped cells (any child element)
+  // are skipped, so re-running against a re-emitted row does not double-wrap.
+  // Bails on TDs that live outside a <tbody> (e.g. accidentally-placed th/td
+  // in the header) — those go through the separate `_enhanceHeaders` path.
+  // Called from `_enhanceBodyCells` (initial pass) AND from `_observeBodyMutations`
+  // (dynamic rows added by consumer frameworks after connectedCallback).
+  _enhanceOneCell(td) {
+    if (!td.closest("tbody")) return;
+    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);
+  }
+  // Watches the host for TDs materialized after the initial `_enhanceBodyCells`
+  // pass — Angular *ngFor, React lists, or any consumer that mounts <bv-table>
+  // with an empty tbody and appends rows in a subsequent render tick. Without
+  // this observer, those new TDs keep their direct text-node children, which
+  // makes `_isOverText` return true on the fallback childNodes branch — every
+  // cell then blocks drag-to-scroll even on padding hits, while CSS still
+  // shows `cursor: grab`. The observer runs unconditionally (not gated on
+  // sticky / fit-viewport like `_mutationObserver`) because plain tables also
+  // rely on drag-to-scroll.
+  _observeBodyMutations() {
+    this._bodyObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        m.addedNodes.forEach((node) => {
+          if (!(node instanceof HTMLElement)) return;
+          if (node.matches("td")) this._enhanceOneCell(node);
+          node.querySelectorAll("td").forEach((td) => this._enhanceOneCell(td));
+        });
+      }
     });
+    this._bodyObserver.observe(this, { childList: true, subtree: true });
   }
   _onMouseDown(e) {
     if (e.button !== 0) return;
@@ -287,58 +424,137 @@ var BvTable = class extends HTMLElement {
     return false;
   }
   _enhanceHeaders() {
-    this.querySelectorAll("thead th").forEach((th) => {
-      var _a;
-      const hasSortable = th.hasAttribute("data-sortable");
-      const hasTooltip = th.hasAttribute("data-tooltip");
-      if (!hasSortable && !hasTooltip) return;
-      const label = ((_a = th.textContent) == null ? void 0 : _a.trim()) ?? "";
-      let inner = label;
-      if (hasTooltip) {
-        const tip = escapeAttr(th.getAttribute("data-tooltip") ?? "");
-        inner += `<bv-tooltip text="${tip}" position="bottom"></bv-tooltip>`;
-      }
-      if (hasSortable) {
-        const sortDir = th.getAttribute("data-sort") ?? "none";
-        const icon = sortDir === "asc" ? SORT_ASC : sortDir === "desc" ? SORT_DESC : SORT_NONE;
-        inner = `<span class="bv-th-content">${inner}${icon}</span>`;
-      } else {
-        inner = `<span class="bv-th-content">${inner}</span>`;
-      }
-      th.innerHTML = inner;
-      if (hasSortable) {
+    this.querySelectorAll("thead th").forEach((th) => this._enhanceOneHeader(th));
+  }
+  // BTN-10755 — per-th enhancer. Handles sortable + tooltip (and their
+  // intersection). Idempotent: safe to re-run when the header observer
+  // sees data-sortable added at runtime. Non-sortable, non-tooltip ths
+  // are left untouched (drag / text-selection ergonomics rely on th
+  // childNodes being the original text nodes).
+  _enhanceOneHeader(th) {
+    const hasSortable = th.hasAttribute("data-sortable");
+    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 (!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>`;
+      return;
+    }
+    if (hasSortable) {
+      if (!th.dataset["bvSortableWired"]) {
+        th.dataset["bvSortableWired"] = "true";
         th.addEventListener("click", () => {
-          var _a2, _b;
-          const current = th.getAttribute("data-sort") ?? "none";
-          const next = current === "none" ? "asc" : current === "asc" ? "desc" : "none";
-          this.querySelectorAll("thead th[data-sortable]").forEach((other) => {
-            var _a3, _b2;
-            if (other !== th) {
-              other.removeAttribute("data-sort");
-              const otherLabel = ((_b2 = (_a3 = other.querySelector(".bv-th-content")) == null ? void 0 : _a3.childNodes[0]) == null ? void 0 : _b2.textContent) ?? "";
-              const otherTooltip = other.hasAttribute("data-tooltip") ? `<bv-tooltip text="${escapeAttr(other.getAttribute("data-tooltip") ?? "")}" position="bottom"></bv-tooltip>` : "";
-              other.innerHTML = `<span class="bv-th-content">${otherLabel}${otherTooltip}${SORT_NONE}</span>`;
-            }
-          });
-          const currentLabel = ((_b = (_a2 = th.querySelector(".bv-th-content")) == null ? void 0 : _a2.childNodes[0]) == null ? void 0 : _b.textContent) ?? label;
-          const currentTooltip = hasTooltip ? `<bv-tooltip text="${escapeAttr(th.getAttribute("data-tooltip") ?? "")}" position="bottom"></bv-tooltip>` : "";
-          if (next === "none") {
-            th.removeAttribute("data-sort");
-            th.innerHTML = `<span class="bv-th-content">${currentLabel}${currentTooltip}${SORT_NONE}</span>`;
-          } else {
-            th.setAttribute("data-sort", next);
-            const newIcon = next === "asc" ? SORT_ASC : SORT_DESC;
-            th.innerHTML = `<span class="bv-th-content">${currentLabel}${currentTooltip}${newIcon}</span>`;
+          if (!th.hasAttribute("data-sortable")) return;
+          this._cycleSort(th);
+        });
+        th.addEventListener("keydown", (e) => {
+          if (!th.hasAttribute("data-sortable")) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this._cycleSort(th);
           }
-          this.dispatchEvent(
-            new CustomEvent("bv-sort", {
-              bubbles: true,
-              composed: true,
-              detail: { column: th.getAttribute("data-column"), direction: next }
-            })
-          );
         });
       }
+      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>`;
+    }
+  }
+  // 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`
+  // (re-enhance from an observer callback). textContent skips SVG icons and
+  // slotless bv-tooltips, so what comes back is the visible column name.
+  _extractHeaderLabel(th) {
+    var _a, _b;
+    const content = th.querySelector(".bv-th-content");
+    if (content) {
+      const firstText = content.childNodes[0];
+      if ((firstText == null ? void 0 : firstText.nodeType) === Node.TEXT_NODE) return ((_a = firstText.textContent) == null ? void 0 : _a.trim()) ?? "";
+    }
+    return ((_b = th.textContent) == null ? void 0 : _b.trim()) ?? "";
+  }
+  // BTN-10755 — idempotent visual sync for a single sortable th. Reads
+  // `data-sort`, renders the matching icon into `.bv-th-content`, and
+  // mirrors the sort direction into `aria-sort` for screen readers. Also
+  // used by `_cycleSort` (to reflect the just-computed state) and by the
+  // `_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"
+    );
+  }
+  // BTN-10755 — click and Enter/Space both route through here. Cycles the
+  // tri-state, clears sibling sortable ths (UX for user interaction — the
+  // observer path deliberately does NOT clear siblings, since external
+  // writes are the consumer speaking and they own sibling state), and
+  // dispatches `bv-sort` with the resolved column + direction.
+  _cycleSort(th) {
+    const current = th.getAttribute("data-sort") ?? "none";
+    const next = current === "none" ? "asc" : current === "asc" ? "desc" : "none";
+    this.querySelectorAll("thead th[data-sortable]").forEach((other) => {
+      if (other !== th && other.hasAttribute("data-sort")) {
+        other.removeAttribute("data-sort");
+        this._syncSortableTh(other);
+      }
+    });
+    if (next === "none") th.removeAttribute("data-sort");
+    else th.setAttribute("data-sort", next);
+    this._syncSortableTh(th);
+    this.dispatchEvent(
+      new CustomEvent("bv-sort", {
+        bubbles: true,
+        composed: true,
+        // `!` is safe: `_enhanceOneHeader` guards on `data-column`
+        // presence before wiring the listeners that reach this dispatch.
+        detail: { column: th.getAttribute("data-column"), direction: next }
+      })
+    );
+  }
+  // BTN-10755 — mirrors the body-cells observer pattern but scoped to header
+  // attribute mutations (data-sort, data-sortable) inside <thead>. Two use
+  // cases:
+  //   1. Consumers that set a default sort at mount, or rewrite data-sort
+  //      when a filter changes, or revert it after an API error. The observer
+  //      re-renders the icon + aria-sort without echoing bv-sort (that would
+  //      loop back into the same consumer).
+  //   2. Consumers that flip a plain th into a sortable one at runtime
+  //      (e.g. a feature-flagged "sortable everything" toggle). The observer
+  //      runs the initial enhance for that th.
+  // The observer never clears siblings — sibling sanitation is UX for the
+  // user-driven click / keydown paths.
+  _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._headerObserver.observe(this, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["data-sort", "data-sortable"]
     });
   }
 };

package/dist/storybook/stories/screens/cet-report.data.d.ts

@@ -1,7 +1,6 @@
 import type { FilterDropdownOption } from '../../../components/bv-filter-dropdown/bv-filter-dropdown';
 export declare const CATEGORY_OPTIONS: FilterDropdownOption[];
 export declare const COURSE_OPTIONS: FilterDropdownOption[];
-export declare const COURSE_SEAT_TIMES: Record<string, number>;
 export declare const GROUP_OPTIONS: FilterDropdownOption[];
 export declare const USER_OPTIONS: FilterDropdownOption[];
 export type EnrollmentProgress = 'complete' | 'on-schedule' | 'behind-schedule' | 'pending-approval' | 'ready-to-pay' | 'enrolled';

package/dist/storybook/stories/screens/cet-report.data.js

@@ -166,47 +166,6 @@ var COURSE_OPTIONS = [
     depth: 0
   }
 ];
-var COURSE_SEAT_TIMES = {
-  "35697": 45,
-  "43588": 60,
-  "111430": 30,
-  "118402": 45,
-  "163061": 25,
-  "223929": 90,
-  "230765": 50,
-  "230818": 60,
-  "309214": 40,
-  "331980": 75,
-  "341235": 60,
-  "392536": 55,
-  "412765": 35,
-  "428390": 65,
-  "467233": 70,
-  "142859": 120,
-  "501234": 90,
-  "502567": 120,
-  "503891": 75,
-  "701001": 20,
-  "701002": 45,
-  "701003": 90,
-  "701004": 60,
-  "701005": 75,
-  "701006": 90,
-  "701007": 60,
-  "701008": 45,
-  "701009": 105,
-  "701010": 60,
-  "701011": 75,
-  "701012": 60,
-  "701013": 90,
-  "701014": 60,
-  "701015": 45,
-  "701016": 180,
-  "701017": 90,
-  "701018": 75,
-  "701019": 45,
-  "701020": 60
-};
 var GROUP_OPTIONS = [
   { label: "Ungrouped", value: "ungrouped", depth: 0, italic: true },
   { label: "Legrand University", value: "legrand-university", depth: 0 },
@@ -4485,7 +4444,6 @@ export {
   CATEGORY_COURSES,
   CATEGORY_OPTIONS,
   COURSE_OPTIONS,
-  COURSE_SEAT_TIMES,
   ENROLLMENTS,
   ENROLLMENT_TYPE_BADGE,
   GROUP_OPTIONS,

package/dist/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Aug 2026 02:04:47 GMT
+ * Generated on Wed, 19 Aug 2026 01:38:34 GMT
  */
 
 :root {

package/package.json

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

package/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Aug 2026 02:04:47 GMT
+ * Generated on Wed, 19 Aug 2026 01:38:34 GMT
  */
 
 :root {