@bluevolt-tech/lumen 2.2.0 → 2.3.1

package/dist/components/bv-segmented-control/bv-segmented-control.d.ts

@@ -2,12 +2,14 @@ export type SegmentedControlOption = {
     label: string;
     value: string;
 };
+export type SegmentedControlSize = 'sm' | 'md';
+export type SegmentedControlVariant = 'default' | 'primary';
 export interface SegmentedControlChangeDetail {
     value: string;
     label: string;
 }
 export declare class BvSegmentedControl extends HTMLElement {
-    static readonly observedAttributes: readonly ["options", "value", "label", "required"];
+    static readonly observedAttributes: readonly ["options", "value", "label", "required", "size", "variant"];
     private _rendered;
     private _labelEl;
     private _containerEl;
@@ -17,6 +19,10 @@ export declare class BvSegmentedControl extends HTMLElement {
     set value(v: string);
     get required(): boolean;
     set required(v: boolean);
+    get size(): SegmentedControlSize;
+    set size(v: SegmentedControlSize);
+    get variant(): SegmentedControlVariant;
+    set variant(v: SegmentedControlVariant);
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
     private _render;

package/dist/components/bv-segmented-control/bv-segmented-control.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-segmented-control/bv-segmented-control.css
-var bv_segmented_control_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.field-label[hidden] {\n  display: none;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  height: 44px;\n  box-sizing: border-box;\n  background: var(--bv-color-neutral-100);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 var(--bv-spacing-md);\n  border: none;\n  border-radius: calc(var(--bv-radius-lg) - 3px);\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    color var(--bv-transition-fast),\n    background var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.pill:hover:not(.selected) {\n  color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-neutral-900);\n  box-shadow: var(--bv-shadow-sm);\n}\n";
+var bv_segmented_control_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.field-label[hidden] {\n  display: none;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  height: 44px;\n  box-sizing: border-box;\n  background: var(--bv-color-neutral-100);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  padding: 3px;\n  gap: 2px;\n}\n\n:host([size='sm']) .container {\n  height: var(--bv-control-height-md);\n  border-radius: var(--bv-radius-md);\n  padding: 3px;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 var(--bv-spacing-md);\n  border: none;\n  border-radius: calc(var(--bv-radius-lg) - 3px);\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    color var(--bv-transition-fast),\n    background var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n:host([size='sm']) .pill {\n  padding: 0 var(--bv-spacing-md-minus);\n  font-size: var(--bv-font-size-sm);\n}\n\n.pill:hover:not(.selected) {\n  color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-neutral-900);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n/* Filled variant \u2014 selected pill uses the primary color instead of white */\n:host([variant='primary']) .pill.selected {\n  background: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();
@@ -21,7 +21,14 @@ function adoptStyles(shadow, css) {
 
 // components/bv-segmented-control/bv-segmented-control.ts
 var BvSegmentedControl = class extends HTMLElement {
-  static observedAttributes = ["options", "value", "label", "required"];
+  static observedAttributes = [
+    "options",
+    "value",
+    "label",
+    "required",
+    "size",
+    "variant"
+  ];
   _rendered = false;
   _labelEl = null;
   _containerEl = null;
@@ -43,6 +50,18 @@ var BvSegmentedControl = class extends HTMLElement {
     if (v) this.setAttribute("required", "");
     else this.removeAttribute("required");
   }
+  get size() {
+    return this.getAttribute("size") ?? "md";
+  }
+  set size(v) {
+    this.setAttribute("size", v);
+  }
+  get variant() {
+    return this.getAttribute("variant") ?? "default";
+  }
+  set variant(v) {
+    this.setAttribute("variant", v);
+  }
   connectedCallback() {
     this._render();
   }

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

@@ -42,6 +42,13 @@ function bindDropdownController(host, options = {}) {
     if (options.canClose && !options.canClose(reason)) return;
     host.removeAttribute("open");
     syncExpanded();
+    host.dispatchEvent(
+      new CustomEvent("bv-dropdown-close", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
     (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
   };
   const close = () => closeWithReason("programmatic");
@@ -172,9 +179,8 @@ var BvSelect = class extends HTMLElement {
     chevron.className = "trigger-chevron";
     chevron.innerHTML = CHEVRON_DOWN;
     trigger.append(triggerLabel, chevron);
-    trigger.addEventListener("click", (e) => {
+    trigger.addEventListener("click", () => {
       var _a;
-      e.stopPropagation();
       if (!this.hasAttribute("disabled")) (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const panel = document.createElement("div");

package/dist/components/bv-split-button/bv-split-button.js

@@ -42,6 +42,13 @@ function bindDropdownController(host, options = {}) {
     if (options.canClose && !options.canClose(reason)) return;
     host.removeAttribute("open");
     syncExpanded();
+    host.dispatchEvent(
+      new CustomEvent("bv-dropdown-close", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
     (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
   };
   const close = () => closeWithReason("programmatic");
@@ -229,9 +236,8 @@ var BvSplitButton = class extends HTMLElement {
     toggleBtn.setAttribute("aria-expanded", "false");
     toggleBtn.setAttribute("aria-label", "More options");
     toggleBtn.innerHTML = CHEVRON_DOWN;
-    toggleBtn.addEventListener("click", (e) => {
+    toggleBtn.addEventListener("click", () => {
       var _a;
-      e.stopPropagation();
       if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     this._toggleBtn = toggleBtn;

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';