@bluevolt-tech/lumen 1.5.1 → 2.0.0

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

@@ -1,5 +1,147 @@
 // 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  overflow-x: auto;\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  font-family: var(--bv-font-family-base);\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-500);\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}\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 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 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";
+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";
+
+// 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";
+
+// components/bv-tooltip/bv-tooltip.ts
+var QUESTION_MARK_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_tooltip_default);
+  }
+  return _sheet;
+}
+var _uid = 0;
+var BvTooltip = class extends HTMLElement {
+  static observedAttributes = ["text", "position"];
+  _rendered = false;
+  _textEl = null;
+  _triggerEl = null;
+  _popupEl = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get text() {
+    return this.getAttribute("text") ?? "";
+  }
+  set text(v) {
+    this.setAttribute("text", v);
+  }
+  get position() {
+    return this.getAttribute("position") ?? "top";
+  }
+  set position(v) {
+    this.setAttribute("position", v);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "text" && this._textEl) {
+      this._textEl.textContent = this.text;
+    }
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_tooltip_default;
+      shadow.appendChild(s);
+    }
+    const wrap = document.createElement("span");
+    wrap.className = "wrap";
+    const popupId = `bv-tooltip-popup-${++_uid}`;
+    const trigger = document.createElement("span");
+    trigger.className = "trigger";
+    trigger.setAttribute("tabindex", "0");
+    trigger.setAttribute("role", "button");
+    trigger.setAttribute("aria-label", "More information");
+    trigger.setAttribute("aria-describedby", popupId);
+    trigger.innerHTML = QUESTION_MARK_SVG;
+    this._triggerEl = trigger;
+    const popup = document.createElement("span");
+    popup.id = popupId;
+    popup.className = "popup";
+    popup.setAttribute("role", "tooltip");
+    this._popupEl = popup;
+    const textEl = document.createElement("span");
+    textEl.className = "text-content";
+    textEl.textContent = this.text;
+    this._textEl = textEl;
+    const slot = document.createElement("slot");
+    popup.append(textEl, slot);
+    wrap.append(trigger, popup);
+    shadow.appendChild(wrap);
+    trigger.addEventListener("mouseenter", () => this._show());
+    trigger.addEventListener("mouseleave", () => this._hide());
+    trigger.addEventListener("focus", () => this._show());
+    trigger.addEventListener("blur", () => this._hide());
+  }
+  _show() {
+    const popup = this._popupEl;
+    const trigger = this._triggerEl;
+    if (!popup || !trigger) return;
+    popup.style.top = "0";
+    popup.style.bottom = "auto";
+    popup.style.left = "0";
+    popup.style.right = "auto";
+    popup.style.transform = "none";
+    popup.style.display = "block";
+    popup.style.visibility = "hidden";
+    const tRect = trigger.getBoundingClientRect();
+    const pRect = popup.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 8;
+    const spaceAbove = tRect.top - gap;
+    const spaceBelow = vh - tRect.bottom - gap;
+    const preferBottom = this.position === "bottom";
+    const goBelow = preferBottom ? spaceBelow >= pRect.height || spaceBelow >= spaceAbove : spaceAbove < pRect.height;
+    if (goBelow) {
+      popup.style.top = "calc(100% + 8px)";
+      popup.style.bottom = "auto";
+    } else {
+      popup.style.bottom = "calc(100% + 8px)";
+      popup.style.top = "auto";
+    }
+    const rawLeft = tRect.left;
+    const rawRight = tRect.left + pRect.width;
+    let transformX = 0;
+    if (rawRight > vw - gap) {
+      transformX = vw - gap - rawRight;
+    }
+    if (rawLeft + transformX < gap) {
+      transformX = gap - rawLeft;
+    }
+    popup.style.left = "0";
+    popup.style.transform = transformX !== 0 ? `translateX(${transformX}px)` : "none";
+    popup.style.visibility = "";
+  }
+  _hide() {
+    const popup = this._popupEl;
+    if (!popup) return;
+    popup.style.display = "";
+    popup.style.top = "";
+    popup.style.bottom = "";
+    popup.style.left = "";
+    popup.style.right = "";
+    popup.style.transform = "";
+    popup.style.visibility = "";
+  }
+};
+if (!customElements.get("bv-tooltip")) {
+  customElements.define("bv-tooltip", BvTooltip);
+}
 
 // components/bv-table/bv-table.ts
 var SORT_NONE = `<svg class="bv-sort-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -11,6 +153,9 @@ var SORT_ASC = `<svg class="bv-sort-icon" viewBox="0 0 16 16" fill="none" xmlns=
 var SORT_DESC = `<svg class="bv-sort-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M8 3v10M5 10l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function injectTableStyles() {
   if (document.getElementById("bv-table-styles")) return;
   const style = document.createElement("style");
@@ -20,47 +165,129 @@ function injectTableStyles() {
 }
 var BvTable = class extends HTMLElement {
   static observedAttributes = ["striped", "bordered"];
+  _isDragging = false;
+  _dragStartX = 0;
+  _dragScrollLeft = 0;
+  _boundMouseDown = (e) => this._onMouseDown(e);
+  _boundMouseMove = (e) => this._onMouseMove(e);
+  _boundMouseUp = () => this._onMouseUp();
   connectedCallback() {
     injectTableStyles();
     this._enhanceHeaders();
+    this._enhanceBodyCells();
+    this._setupDrag();
+  }
+  disconnectedCallback() {
+    this._teardownDrag();
+  }
+  _setupDrag() {
+    this.addEventListener("mousedown", this._boundMouseDown);
+    window.addEventListener("mousemove", this._boundMouseMove);
+    window.addEventListener("mouseup", this._boundMouseUp);
+  }
+  _teardownDrag() {
+    this.removeEventListener("mousedown", this._boundMouseDown);
+    window.removeEventListener("mousemove", this._boundMouseMove);
+    window.removeEventListener("mouseup", this._boundMouseUp);
+  }
+  // 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);
+    });
+  }
+  _onMouseDown(e) {
+    if (e.button !== 0) return;
+    if (this._isOverText(e.target)) return;
+    this._isDragging = true;
+    this._dragStartX = e.pageX;
+    this._dragScrollLeft = this.scrollLeft;
+    this.setAttribute("data-dragging", "");
+    e.preventDefault();
+  }
+  _onMouseMove(e) {
+    if (!this._isDragging) return;
+    this.scrollLeft = this._dragScrollLeft - (e.pageX - this._dragStartX);
+  }
+  _onMouseUp() {
+    if (!this._isDragging) return;
+    this._isDragging = false;
+    this.removeAttribute("data-dragging");
+  }
+  // Returns true when the mousedown target is rendered text the user may want
+  // to select: either a body cell's .bv-cell-text span (see _enhanceBodyCells)
+  // or a header cell with a direct text-node child (headers are left unwrapped).
+  _isOverText(target) {
+    var _a;
+    if (!(target instanceof Element)) return false;
+    if (target.closest(".bv-cell-text")) return true;
+    for (const node of target.childNodes) {
+      if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) == null ? void 0 : _a.trim())) return true;
+    }
+    return false;
   }
   _enhanceHeaders() {
-    this.querySelectorAll("thead th[data-sortable]").forEach((th) => {
+    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()) ?? "";
-      const sortDir = th.getAttribute("data-sort") ?? "none";
-      const icon = sortDir === "asc" ? SORT_ASC : sortDir === "desc" ? SORT_DESC : SORT_NONE;
-      th.innerHTML = `<span class="bv-th-content">${label}${icon}</span>`;
-      th.addEventListener("click", () => {
-        var _a2, _b, _c, _d;
-        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.firstChild) == null ? void 0 : _b2.textContent) ?? "";
-            other.innerHTML = `<span class="bv-th-content">${otherLabel}${SORT_NONE}</span>`;
+      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) {
+        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>`;
           }
+          this.dispatchEvent(
+            new CustomEvent("bv-sort", {
+              bubbles: true,
+              composed: true,
+              detail: { column: th.getAttribute("data-column"), direction: next }
+            })
+          );
         });
-        if (next === "none") {
-          th.removeAttribute("data-sort");
-          const l = ((_b = (_a2 = th.querySelector(".bv-th-content")) == null ? void 0 : _a2.firstChild) == null ? void 0 : _b.textContent) ?? label;
-          th.innerHTML = `<span class="bv-th-content">${l}${SORT_NONE}</span>`;
-        } else {
-          th.setAttribute("data-sort", next);
-          const newIcon = next === "asc" ? SORT_ASC : SORT_DESC;
-          const l = ((_d = (_c = th.querySelector(".bv-th-content")) == null ? void 0 : _c.firstChild) == null ? void 0 : _d.textContent) ?? label;
-          th.innerHTML = `<span class="bv-th-content">${l}${newIcon}</span>`;
-        }
-        this.dispatchEvent(
-          new CustomEvent("bv-sort", {
-            bubbles: true,
-            composed: true,
-            detail: { column: th.getAttribute("data-column"), direction: next }
-          })
-        );
-      });
+      }
     });
   }
 };

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

@@ -1,5 +1,6 @@
+export type ToggleSize = 'sm' | 'md';
 export declare class BvToggle extends HTMLElement {
-    static readonly observedAttributes: string[];
+    static readonly observedAttributes: readonly ["checked", "disabled", "label", "size"];
     private _rendered;
     private _labelEl;
     constructor();

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

@@ -1,9 +1,9 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-toggle/bv-toggle.css
-var bv_toggle_default = ":host {\n  --bv-toggle-width: 44px;\n  --bv-toggle-height: 24px;\n  --bv-toggle-track-off: var(--bv-color-neutral-300);\n  --bv-toggle-track-on: var(--bv-color-primary);\n  --bv-toggle-thumb: var(--bv-color-neutral-0);\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n.wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track {\n  position: relative;\n  width: var(--bv-toggle-width);\n  height: var(--bv-toggle-height);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-toggle-track-off);\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n:host([checked]) .track {\n  background: var(--bv-toggle-track-on);\n}\n\n.thumb {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc(var(--bv-toggle-height) - 6px);\n  height: calc(var(--bv-toggle-height) - 6px);\n  border-radius: 50%;\n  background: var(--bv-toggle-thumb);\n  box-shadow: var(--bv-shadow-sm);\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([checked]) .thumb {\n  transform: translateX(calc(var(--bv-toggle-width) - var(--bv-toggle-height)));\n}\n\n.label {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  line-height: 20px;\n}\n";
+var bv_toggle_default = ":host {\n  --bv-toggle-width: 44px;\n  --bv-toggle-height: 24px;\n  --bv-toggle-track-off: var(--bv-color-neutral-300);\n  --bv-toggle-track-on: var(--bv-color-primary);\n  --bv-toggle-thumb: var(--bv-color-neutral-0);\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  --bv-toggle-width: 32px;\n  --bv-toggle-height: 18px;\n}\n\n.wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track {\n  position: relative;\n  width: var(--bv-toggle-width);\n  height: var(--bv-toggle-height);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-toggle-track-off);\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n:host([checked]) .track {\n  background: var(--bv-toggle-track-on);\n}\n\n.thumb {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc(var(--bv-toggle-height) - 6px);\n  height: calc(var(--bv-toggle-height) - 6px);\n  border-radius: 50%;\n  background: var(--bv-toggle-thumb);\n  box-shadow: var(--bv-shadow-sm);\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([checked]) .thumb {\n  transform: translateX(calc(var(--bv-toggle-width) - var(--bv-toggle-height)));\n}\n\n.label {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  line-height: 20px;\n}\n\n:host([size='sm']) .label {\n  font-size: var(--bv-font-size-xs);\n  line-height: 18px;\n}\n";
 
 // components/bv-toggle/bv-toggle.ts
 var BvToggle = class extends HTMLElement {
-  static observedAttributes = ["checked", "disabled", "label"];
+  static observedAttributes = ["checked", "disabled", "label", "size"];
   _rendered = false;
   _labelEl = null;
   constructor() {

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

@@ -0,0 +1,18 @@
+export type TooltipPosition = 'top' | 'bottom';
+export declare class BvTooltip extends HTMLElement {
+    static readonly observedAttributes: readonly ["text", "position"];
+    private _rendered;
+    private _textEl;
+    private _triggerEl;
+    private _popupEl;
+    constructor();
+    get text(): string;
+    set text(v: string);
+    get position(): TooltipPosition;
+    set position(v: TooltipPosition);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private _render;
+    private _show;
+    private _hide;
+}

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

@@ -0,0 +1,144 @@
+// 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";
+
+// components/bv-tooltip/bv-tooltip.ts
+var QUESTION_MARK_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_tooltip_default);
+  }
+  return _sheet;
+}
+var _uid = 0;
+var BvTooltip = class extends HTMLElement {
+  static observedAttributes = ["text", "position"];
+  _rendered = false;
+  _textEl = null;
+  _triggerEl = null;
+  _popupEl = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get text() {
+    return this.getAttribute("text") ?? "";
+  }
+  set text(v) {
+    this.setAttribute("text", v);
+  }
+  get position() {
+    return this.getAttribute("position") ?? "top";
+  }
+  set position(v) {
+    this.setAttribute("position", v);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "text" && this._textEl) {
+      this._textEl.textContent = this.text;
+    }
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_tooltip_default;
+      shadow.appendChild(s);
+    }
+    const wrap = document.createElement("span");
+    wrap.className = "wrap";
+    const popupId = `bv-tooltip-popup-${++_uid}`;
+    const trigger = document.createElement("span");
+    trigger.className = "trigger";
+    trigger.setAttribute("tabindex", "0");
+    trigger.setAttribute("role", "button");
+    trigger.setAttribute("aria-label", "More information");
+    trigger.setAttribute("aria-describedby", popupId);
+    trigger.innerHTML = QUESTION_MARK_SVG;
+    this._triggerEl = trigger;
+    const popup = document.createElement("span");
+    popup.id = popupId;
+    popup.className = "popup";
+    popup.setAttribute("role", "tooltip");
+    this._popupEl = popup;
+    const textEl = document.createElement("span");
+    textEl.className = "text-content";
+    textEl.textContent = this.text;
+    this._textEl = textEl;
+    const slot = document.createElement("slot");
+    popup.append(textEl, slot);
+    wrap.append(trigger, popup);
+    shadow.appendChild(wrap);
+    trigger.addEventListener("mouseenter", () => this._show());
+    trigger.addEventListener("mouseleave", () => this._hide());
+    trigger.addEventListener("focus", () => this._show());
+    trigger.addEventListener("blur", () => this._hide());
+  }
+  _show() {
+    const popup = this._popupEl;
+    const trigger = this._triggerEl;
+    if (!popup || !trigger) return;
+    popup.style.top = "0";
+    popup.style.bottom = "auto";
+    popup.style.left = "0";
+    popup.style.right = "auto";
+    popup.style.transform = "none";
+    popup.style.display = "block";
+    popup.style.visibility = "hidden";
+    const tRect = trigger.getBoundingClientRect();
+    const pRect = popup.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 8;
+    const spaceAbove = tRect.top - gap;
+    const spaceBelow = vh - tRect.bottom - gap;
+    const preferBottom = this.position === "bottom";
+    const goBelow = preferBottom ? spaceBelow >= pRect.height || spaceBelow >= spaceAbove : spaceAbove < pRect.height;
+    if (goBelow) {
+      popup.style.top = "calc(100% + 8px)";
+      popup.style.bottom = "auto";
+    } else {
+      popup.style.bottom = "calc(100% + 8px)";
+      popup.style.top = "auto";
+    }
+    const rawLeft = tRect.left;
+    const rawRight = tRect.left + pRect.width;
+    let transformX = 0;
+    if (rawRight > vw - gap) {
+      transformX = vw - gap - rawRight;
+    }
+    if (rawLeft + transformX < gap) {
+      transformX = gap - rawLeft;
+    }
+    popup.style.left = "0";
+    popup.style.transform = transformX !== 0 ? `translateX(${transformX}px)` : "none";
+    popup.style.visibility = "";
+  }
+  _hide() {
+    const popup = this._popupEl;
+    if (!popup) return;
+    popup.style.display = "";
+    popup.style.top = "";
+    popup.style.bottom = "";
+    popup.style.left = "";
+    popup.style.right = "";
+    popup.style.transform = "";
+    popup.style.visibility = "";
+  }
+};
+if (!customElements.get("bv-tooltip")) {
+  customElements.define("bv-tooltip", BvTooltip);
+}
+export {
+  BvTooltip
+};

package/dist/components/bv-user-row/bv-user-row.d.ts

@@ -1,5 +1,6 @@
 import '../bv-avatar/bv-avatar.ts';
 import '../bv-button/bv-button.ts';
+import '../bv-icon/bv-icon.ts';
 export type UserRowEditProfileTarget = '_self' | '_blank' | '_parent' | '_top' | '';
 export declare class BvUserRow extends HTMLElement {
     static readonly observedAttributes: string[];