@bluevolt-tech/lumen 2.0.1 → 2.2.0

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

@@ -1,17 +1,78 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-select/bv-select.css
 var bv_select_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 44px;\n  padding: 0 var(--bv-spacing-md);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  text-align: left;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([error]:not([error=''])) .trigger {\n  border-color: var(--bv-color-danger);\n}\n\n.trigger:disabled {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-400);\n  cursor: not-allowed;\n}\n\n.trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trigger-label.is-placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  margin-left: var(--bv-spacing-sm);\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-chevron {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 Dropdown panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n  padding: var(--bv-spacing-xs) 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-sm);\n  padding: 10px var(--bv-spacing-md);\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  transition: background var(--bv-transition-fast);\n}\n\n.option:hover {\n  background: var(--bv-color-secondary);\n}\n\n.option[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  background: var(--bv-color-secondary-light);\n}\n\n.option-text {\n  flex: 1;\n}\n\n.option-check {\n  display: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n}\n\n.option[aria-selected='true'] .option-check {\n  display: flex;\n}\n\n/* \u2500\u2500 Error message \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-error {\n  display: block;\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-danger);\n  margin-top: var(--bv-spacing-xs);\n}\n";
 
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
+// components/_shared/dropdown-controller.ts
+function bindDropdownController(host, options = {}) {
+  if (!host.shadowRoot) {
+    throw new Error("bindDropdownController requires the host to have an open shadow root.");
+  }
+  const syncExpanded = () => {
+    var _a;
+    (_a = options.trigger) == null ? void 0 : _a.setAttribute("aria-expanded", host.hasAttribute("open") ? "true" : "false");
+  };
+  const open = () => {
+    var _a;
+    if (host.hasAttribute("open")) return;
+    (_a = options.onBeforeOpen) == null ? void 0 : _a.call(options);
+    host.setAttribute("open", "");
+    syncExpanded();
+    host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
+  };
+  const closeWithReason = (reason) => {
+    var _a;
+    if (!host.hasAttribute("open")) return;
+    if (options.canClose && !options.canClose(reason)) return;
+    host.removeAttribute("open");
+    syncExpanded();
+    (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
+  };
+  const close = () => closeWithReason("programmatic");
+  const toggle = () => {
+    if (host.hasAttribute("open")) closeWithReason("programmatic");
+    else open();
+  };
+  const offClick = (e) => {
+    if (!host.hasAttribute("open")) return;
+    if (e.composedPath().includes(host)) return;
+    closeWithReason("outside-click");
+  };
+  document.addEventListener("click", offClick);
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") closeWithReason("escape");
+  };
+  host.addEventListener("keydown", onKeyDown);
+  const observer = new MutationObserver(syncExpanded);
+  observer.observe(host, { attributes: true, attributeFilter: ["open"] });
+  const cleanup = () => {
+    observer.disconnect();
+    document.removeEventListener("click", offClick);
+    host.removeEventListener("keydown", onKeyDown);
+  };
+  syncExpanded();
+  return { open, close, toggle, cleanup };
+}
+
 // components/bv-select/bv-select.ts
 var CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>`;
 var CHECK = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`;
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_select_default);
-  }
-  return _sheet;
-}
 var BvSelect = class extends HTMLElement {
   static observedAttributes = [
     "label",
@@ -30,13 +91,10 @@ var BvSelect = class extends HTMLElement {
   _errorEl = null;
   _options = [];
   _value = "";
-  _offClick = null;
+  _dropdown = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_select_default);
   }
   get value() {
     return this._value;
@@ -62,7 +120,8 @@ var BvSelect = class extends HTMLElement {
     this._render();
   }
   disconnectedCallback() {
-    if (this._offClick) document.removeEventListener("click", this._offClick);
+    var _a;
+    (_a = this._dropdown) == null ? void 0 : _a.cleanup();
   }
   attributeChangedCallback(name, _old, val) {
     if (name === "options") {
@@ -96,11 +155,6 @@ var BvSelect = class extends HTMLElement {
     }
     this._value = this.getAttribute("value") ?? "";
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_select_default;
-      shadow.appendChild(s);
-    }
     const label = document.createElement("label");
     label.className = "field-label";
     this._labelEl = label;
@@ -119,8 +173,9 @@ var BvSelect = class extends HTMLElement {
     chevron.innerHTML = CHEVRON_DOWN;
     trigger.append(triggerLabel, chevron);
     trigger.addEventListener("click", (e) => {
+      var _a;
       e.stopPropagation();
-      if (!this.hasAttribute("disabled")) this._toggle();
+      if (!this.hasAttribute("disabled")) (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const panel = document.createElement("div");
     panel.className = "panel";
@@ -136,29 +191,7 @@ var BvSelect = class extends HTMLElement {
     this._renderOptions();
     this._syncError();
     this._syncDisabled();
-    this._offClick = (e) => {
-      if (!this.contains(e.target) && !shadow.contains(e.target)) {
-        this._close();
-      }
-    };
-    document.addEventListener("click", this._offClick);
-    this.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") this._close();
-    });
-  }
-  _toggle() {
-    if (this.hasAttribute("open")) this._close();
-    else this._open();
-  }
-  _open() {
-    var _a;
-    this.setAttribute("open", "");
-    (_a = this._triggerEl) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
-  }
-  _close() {
-    var _a;
-    this.removeAttribute("open");
-    (_a = this._triggerEl) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+    this._dropdown = bindDropdownController(this, { trigger });
   }
   _syncLabel() {
     if (!this._labelEl) return;
@@ -218,11 +251,12 @@ var BvSelect = class extends HTMLElement {
     this._triggerEl.disabled = this.hasAttribute("disabled");
   }
   _select(opt) {
+    var _a;
     this._value = opt.value;
     this.setAttribute("value", opt.value);
     this._syncTriggerLabel();
     this._syncSelected();
-    this._close();
+    (_a = this._dropdown) == null ? void 0 : _a.close();
     this.dispatchEvent(
       new CustomEvent("bv-change", {
         bubbles: true,

package/dist/components/bv-split-button/bv-split-button.d.ts

@@ -15,7 +15,7 @@ export declare class BvSplitButton extends HTMLElement {
     private _toggleBtn;
     private _labelEl;
     private _panelEl;
-    private _offClick;
+    private _dropdown;
     constructor();
     get label(): string;
     set label(v: string);
@@ -29,9 +29,6 @@ export declare class BvSplitButton extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
     private _render;
-    private _toggle;
-    private _open;
-    private _close;
     private _syncDisabled;
     private _syncPanel;
 }

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

@@ -1,6 +1,75 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-split-button/bv-split-button.css
 var bv_split_button_default = ":host {\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-color-primary) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n\n  display: inline-flex;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* \u2500\u2500 Variants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-color-secondary) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-secondary);\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n}\n\n:host([variant='outline-secondary']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-neutral-700);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n}\n\n/* \u2500\u2500 Wrap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.wrap {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n}\n\n/* \u2500\u2500 Main button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.main-btn {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--bv-spacing-md);\n  min-height: 44px;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  border: none;\n  border-radius: var(--bv-radius-lg) 0 0 var(--bv-radius-lg);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--bv-transition-fast);\n}\n\n.main-btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n}\n\n/* \u2500\u2500 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 */\n\n.divider {\n  width: 1px;\n  background: var(--bv-button-color);\n  opacity: 0.25;\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Toggle button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  flex-shrink: 0;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  border: none;\n  border-radius: 0 var(--bv-radius-lg) var(--bv-radius-lg) 0;\n  cursor: pointer;\n  transition: background var(--bv-transition-fast);\n}\n\n.toggle-btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n}\n\n.main-btn:disabled,\n.toggle-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 220px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  padding: var(--bv-spacing-xs) 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Option \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.option {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  width: 100%;\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md);\n  background: transparent;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--bv-transition-fast);\n}\n\n.option:hover {\n  background: var(--bv-color-neutral-100);\n}\n\n.option-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--bv-color-neutral-600);\n  flex-shrink: 0;\n}\n\n.option-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.option-label {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-700);\n  line-height: 1.4;\n}\n\n.option-desc {\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-500);\n  line-height: 1.4;\n}\n";
 
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
+// components/_shared/dropdown-controller.ts
+function bindDropdownController(host, options = {}) {
+  if (!host.shadowRoot) {
+    throw new Error("bindDropdownController requires the host to have an open shadow root.");
+  }
+  const syncExpanded = () => {
+    var _a;
+    (_a = options.trigger) == null ? void 0 : _a.setAttribute("aria-expanded", host.hasAttribute("open") ? "true" : "false");
+  };
+  const open = () => {
+    var _a;
+    if (host.hasAttribute("open")) return;
+    (_a = options.onBeforeOpen) == null ? void 0 : _a.call(options);
+    host.setAttribute("open", "");
+    syncExpanded();
+    host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
+  };
+  const closeWithReason = (reason) => {
+    var _a;
+    if (!host.hasAttribute("open")) return;
+    if (options.canClose && !options.canClose(reason)) return;
+    host.removeAttribute("open");
+    syncExpanded();
+    (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
+  };
+  const close = () => closeWithReason("programmatic");
+  const toggle = () => {
+    if (host.hasAttribute("open")) closeWithReason("programmatic");
+    else open();
+  };
+  const offClick = (e) => {
+    if (!host.hasAttribute("open")) return;
+    if (e.composedPath().includes(host)) return;
+    closeWithReason("outside-click");
+  };
+  document.addEventListener("click", offClick);
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") closeWithReason("escape");
+  };
+  host.addEventListener("keydown", onKeyDown);
+  const observer = new MutationObserver(syncExpanded);
+  observer.observe(host, { attributes: true, attributeFilter: ["open"] });
+  const cleanup = () => {
+    observer.disconnect();
+    document.removeEventListener("click", offClick);
+    host.removeEventListener("keydown", onKeyDown);
+  };
+  syncExpanded();
+  return { open, close, toggle, cleanup };
+}
+
 // components/bv-icon/icons.ts
 var icons = {
   // Navigation
@@ -76,14 +145,6 @@ var rawIcons = {
 
 // components/bv-split-button/bv-split-button.ts
 var CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>`;
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_split_button_default);
-  }
-  return _sheet;
-}
 var BvSplitButton = class extends HTMLElement {
   static observedAttributes = ["label", "variant", "disabled", "options", "open"];
   _rendered = false;
@@ -91,13 +152,10 @@ var BvSplitButton = class extends HTMLElement {
   _toggleBtn = null;
   _labelEl = null;
   _panelEl = null;
-  _offClick = null;
+  _dropdown = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_split_button_default);
   }
   get label() {
     return this.getAttribute("label") ?? "";
@@ -132,7 +190,8 @@ var BvSplitButton = class extends HTMLElement {
     this._render();
   }
   disconnectedCallback() {
-    if (this._offClick) document.removeEventListener("click", this._offClick);
+    var _a;
+    (_a = this._dropdown) == null ? void 0 : _a.cleanup();
   }
   attributeChangedCallback(name, _old, _val) {
     if (!this._rendered) return;
@@ -144,11 +203,6 @@ var BvSplitButton = class extends HTMLElement {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_split_button_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("div");
     wrap.className = "wrap";
     const mainBtn = document.createElement("button");
@@ -176,8 +230,9 @@ var BvSplitButton = class extends HTMLElement {
     toggleBtn.setAttribute("aria-label", "More options");
     toggleBtn.innerHTML = CHEVRON_DOWN;
     toggleBtn.addEventListener("click", (e) => {
+      var _a;
       e.stopPropagation();
-      if (!this.disabled) this._toggle();
+      if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     this._toggleBtn = toggleBtn;
     wrap.append(mainBtn, divider, toggleBtn);
@@ -188,27 +243,7 @@ var BvSplitButton = class extends HTMLElement {
     shadow.append(wrap, panel);
     this._syncDisabled();
     this._syncPanel();
-    this._offClick = (e) => {
-      if (!this.contains(e.target) && !shadow.contains(e.target)) {
-        this._close();
-      }
-    };
-    document.addEventListener("click", this._offClick);
-  }
-  _toggle() {
-    if (this.hasAttribute("open")) this._close();
-    else this._open();
-  }
-  _open() {
-    var _a;
-    this.setAttribute("open", "");
-    (_a = this._toggleBtn) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
-    this.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
-  }
-  _close() {
-    var _a;
-    this.removeAttribute("open");
-    (_a = this._toggleBtn) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+    this._dropdown = bindDropdownController(this, { trigger: toggleBtn });
   }
   _syncDisabled() {
     const d = this.disabled;
@@ -243,7 +278,8 @@ var BvSplitButton = class extends HTMLElement {
       }
       btn.appendChild(content);
       btn.addEventListener("click", () => {
-        this._close();
+        var _a;
+        (_a = this._dropdown) == null ? void 0 : _a.close();
         this.dispatchEvent(
           new CustomEvent("bv-option-select", {
             bubbles: true,

package/dist/components/bv-star-rating/bv-star-rating.js

@@ -1,6 +1,24 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-star-rating/bv-star-rating.css
 var bv_star_rating_default = ":host {\n  --bv-star-color: #f59e0b;\n  --bv-star-empty-color: var(--bv-color-neutral-200);\n  --bv-star-size: 20px;\n  display: inline-flex;\n}\n\n:host([size='sm']) {\n  --bv-star-size: 14px;\n}\n:host([size='lg']) {\n  --bv-star-size: 28px;\n}\n\n.stars {\n  display: inline-flex;\n  gap: 2px;\n  align-items: center;\n}\n\n.star {\n  width: var(--bv-star-size);\n  height: var(--bv-star-size);\n  color: var(--bv-star-empty-color);\n  flex-shrink: 0;\n  transition: color var(--bv-transition-fast);\n}\n\n.star.filled {\n  color: var(--bv-star-color);\n}\n";
 
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
 // components/bv-star-rating/bv-star-rating.ts
 var STAR_PATH = "M10 1.5L12.39 6.26L17.72 7.07L13.86 10.83L14.78 16.14L10 13.63L5.22 16.14L6.14 10.83L2.28 7.07L7.61 6.26L10 1.5Z";
 var BvStarRating = class extends HTMLElement {
@@ -8,12 +26,7 @@ var BvStarRating = class extends HTMLElement {
   _rendered = false;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_star_rating_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_star_rating_default);
   }
   connectedCallback() {
     this._render();
@@ -31,11 +44,6 @@ var BvStarRating = class extends HTMLElement {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_star_rating_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("div");
     wrap.className = "stars";
     wrap.setAttribute("role", "img");

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

@@ -7,8 +7,13 @@ export declare class BvTable extends HTMLElement {
     private _boundMouseDown;
     private _boundMouseMove;
     private _boundMouseUp;
+    get loading(): boolean;
+    set loading(v: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _renderSkeleton;
+    private _removeSkeleton;
     private _setupDrag;
     private _teardownDrag;
     private _enhanceBodyCells;

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

@@ -1,19 +1,29 @@
 // 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";
+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";
 
 // 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);
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
   }
-  return _sheet;
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
 }
+
+// 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 _uid = 0;
 var BvTooltip = class extends HTMLElement {
   static observedAttributes = ["text", "position"];
@@ -23,10 +33,7 @@ var BvTooltip = class extends HTMLElement {
   _popupEl = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_tooltip_default);
   }
   get text() {
     return this.getAttribute("text") ?? "";
@@ -53,11 +60,6 @@ var BvTooltip = class extends HTMLElement {
     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}`;
@@ -98,6 +100,7 @@ var BvTooltip = class extends HTMLElement {
     popup.style.transform = "none";
     popup.style.display = "block";
     popup.style.visibility = "hidden";
+    void popup.offsetHeight;
     const tRect = trigger.getBoundingClientRect();
     const pRect = popup.getBoundingClientRect();
     const vw = window.innerWidth;
@@ -164,22 +167,70 @@ function injectTableStyles() {
   document.head.appendChild(style);
 }
 var BvTable = class extends HTMLElement {
-  static observedAttributes = ["striped", "bordered"];
+  static observedAttributes = ["striped", "bordered", "loading", "loading-rows"];
   _isDragging = false;
   _dragStartX = 0;
   _dragScrollLeft = 0;
   _boundMouseDown = (e) => this._onMouseDown(e);
   _boundMouseMove = (e) => this._onMouseMove(e);
   _boundMouseUp = () => this._onMouseUp();
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(v) {
+    if (v) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
   connectedCallback() {
     injectTableStyles();
     this._enhanceHeaders();
     this._enhanceBodyCells();
     this._setupDrag();
+    if (this.hasAttribute("loading")) this._renderSkeleton();
   }
   disconnectedCallback() {
     this._teardownDrag();
   }
+  attributeChangedCallback(name, _old, val) {
+    if (!this.isConnected) return;
+    if (name === "loading") {
+      if (val === null) this._removeSkeleton();
+      else this._renderSkeleton();
+    }
+    if (name === "loading-rows" && this.hasAttribute("loading")) {
+      this._removeSkeleton();
+      this._renderSkeleton();
+    }
+  }
+  // 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
+  // "hide the real table" side of the swap.
+  _renderSkeleton() {
+    if (this.querySelector(":scope > .bv-table-skeleton")) return;
+    const rowsAttr = this.getAttribute("loading-rows");
+    const rows = Math.max(1, Number(rowsAttr) || 10);
+    const columns = Math.max(1, this.querySelectorAll("thead th").length || 4);
+    const skeleton = document.createElement("div");
+    skeleton.className = "bv-table-skeleton";
+    skeleton.setAttribute("role", "status");
+    skeleton.setAttribute("aria-live", "polite");
+    skeleton.setAttribute("aria-label", this.getAttribute("loading-label") ?? "Loading");
+    for (let r = 0; r < rows; r++) {
+      const row = document.createElement("div");
+      row.className = "bv-table-skeleton-row";
+      for (let c = 0; c < columns; c++) {
+        const bar = document.createElement("div");
+        bar.className = "bv-table-skeleton-bar";
+        row.appendChild(bar);
+      }
+      skeleton.appendChild(row);
+    }
+    this.appendChild(skeleton);
+  }
+  _removeSkeleton() {
+    var _a;
+    (_a = this.querySelector(":scope > .bv-table-skeleton")) == null ? void 0 : _a.remove();
+  }
   _setupDrag() {
     this.addEventListener("mousedown", this._boundMouseDown);
     window.addEventListener("mousemove", this._boundMouseMove);