@bluevolt-tech/lumen 2.0.1 → 2.2.0

package/dist/components/bv-empty-state/bv-empty-state.js

@@ -1,6 +1,24 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-empty-state/bv-empty-state.css
 var bv_empty_state_default = ":host {\n  display: flex;\n  width: 100%;\n}\n\n.wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 48px 24px 56px;\n  width: 100%;\n  font-family: var(--bv-font-family-base);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  margin-bottom: 16px;\n  border-radius: var(--bv-radius-lg);\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-500);\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-bottom: 8px;\n  max-width: 360px;\n}\n\n.title {\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin: 0;\n  line-height: 24px;\n}\n\n.description {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  margin: 0;\n  line-height: 20px;\n}\n\n.contact-support-link {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  text-decoration: none;\n}\n\n.contact-support-link:hover {\n  text-decoration: underline;\n}\n\n.wrap.hero .contact-support-link {\n  font-size: var(--bv-font-size-md);\n}\n\n/* Hero layout \u2014 used automatically when a preset `illustration` is set */\n.wrap.hero {\n  padding: 64px 24px 72px;\n}\n\n.icon.hero {\n  width: auto;\n  height: auto;\n  margin-bottom: 24px;\n  background: none;\n  border-radius: 0;\n}\n\n.icon.hero ::slotted(svg),\n.icon.hero slot svg {\n  display: block;\n  width: 160px;\n  height: auto;\n}\n\n.wrap.hero .text {\n  gap: 8px;\n  margin-bottom: 12px;\n  max-width: 480px;\n}\n\n.wrap.hero .title {\n  font-size: var(--bv-font-size-2xl);\n  line-height: 32px;\n}\n\n.wrap.hero .description {\n  font-size: var(--bv-font-size-md);\n  line-height: 24px;\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-empty-state/illustrations.ts
 var illustrations = {
   empty: `<svg viewBox="-18.66 -18.67 248.82 248.82" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -161,14 +179,6 @@ var rawIcons = {
 };
 
 // components/bv-button/bv-button.ts
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_button_default);
-  }
-  return _sheet;
-}
 var BvButton = class extends HTMLElement {
   static observedAttributes = [
     "variant",
@@ -184,10 +194,7 @@ var BvButton = class extends HTMLElement {
   ];
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_button_default);
   }
   // ── Accessors ────────────────────────────────────────────────
   get variant() {
@@ -244,11 +251,6 @@ var BvButton = class extends HTMLElement {
     const shadow = this.shadowRoot;
     let btn = shadow.querySelector("button");
     if (!btn) {
-      if (!shadow.adoptedStyleSheets.length) {
-        const styleEl = document.createElement("style");
-        styleEl.textContent = bv_button_default;
-        shadow.appendChild(styleEl);
-      }
       btn = document.createElement("button");
       btn.setAttribute("part", "button");
       btn.appendChild(document.createElement("slot"));
@@ -327,12 +329,7 @@ var BvEmptyState = class extends HTMLElement {
   _wrapEl = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_empty_state_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_empty_state_default);
   }
   get iconSvg() {
     return this.getAttribute("icon-svg") ?? "";
@@ -393,11 +390,6 @@ var BvEmptyState = 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_empty_state_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("div");
     wrap.className = "wrap";
     this._wrapEl = wrap;

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.d.ts

@@ -15,7 +15,7 @@ export declare class BvFilterDropdown extends HTMLElement {
     private _selectedValues;
     private _showInactive;
     private _searchQuery;
-    private _offClick;
+    private _dropdown;
     constructor();
     get value(): string;
     get values(): string[];
@@ -27,9 +27,6 @@ export declare class BvFilterDropdown extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _parseValuesAttr;
     private _render;
-    private _toggle;
-    private _open;
-    private _close;
     private _syncLabel;
     private _rebuildPanel;
     private _buildSinglePanel;

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.js

@@ -1,18 +1,79 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-filter-dropdown/bv-filter-dropdown.css
-var bv_filter_dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\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: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 16px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 20px;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.trigger:hover {\n  background: var(--bv-color-secondary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  background: var(--bv-color-neutral-0);\n}\n\n:host([disabled]) .trigger {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n  background: var(--bv-color-neutral-100);\n}\n\n:host([disabled]) .trigger:hover {\n  background: var(--bv-color-neutral-100);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-secondary-foreground);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\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  width: max-content;\n  min-width: 100%;\n  max-width: 600px;\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: 4px 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Single-mode 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 */\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 9px 14px;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  white-space: nowrap;\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-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 Multi-mode search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.search-icon {\n  display: flex;\n  color: var(--bv-color-neutral-400);\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  background: transparent;\n  min-width: 0;\n}\n\n.search-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n/* \u2500\u2500 Multi-mode header (Select All + toggle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n}\n\n.select-all-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-700);\n  user-select: none;\n  flex: 1;\n  padding: 2px 0;\n}\n\n.select-all-row:hover {\n  color: var(--bv-color-neutral-900);\n}\n\n/* \u2500\u2500 Show Inactive toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.inactive-toggle-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.toggle-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n\n.toggle-track {\n  display: inline-flex;\n  align-items: center;\n  width: 28px;\n  height: 16px;\n  background: var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-full);\n  padding: 2px;\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track {\n  background: var(--bv-color-primary);\n}\n\n.toggle-thumb {\n  width: 12px;\n  height: 12px;\n  background: var(--bv-color-neutral-0);\n  border-radius: var(--bv-radius-full);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track .toggle-thumb {\n  transform: translateX(12px);\n}\n\n.toggle-text {\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Panel 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 */\n\n.panel-divider {\n  height: 1px;\n  background: var(--bv-color-neutral-200);\n  margin: 0;\n}\n\n/* \u2500\u2500 Multi-mode options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.options-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.option--multi {\n  justify-content: flex-start;\n  white-space: normal;\n  min-width: 200px;\n}\n\n/* Depth-based indentation */\n.option--multi[data-depth='1'] {\n  padding-left: 30px;\n}\n\n.option--multi[data-depth='2'] {\n  padding-left: 46px;\n}\n\n/* In multi mode, checkbox is always visible */\n.option--multi .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.option--multi .option-check.checked {\n  background: var(--bv-color-primary);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n\n.option--multi:hover .option-check:not(.checked) {\n  border-color: var(--bv-color-primary);\n}\n\n/* In multi mode, override the single-mode aria-selected styles */\n.option--multi[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-regular);\n  background: transparent;\n  color: var(--bv-color-neutral-700);\n}\n\n.option--multi:hover {\n  background: var(--bv-color-secondary);\n}\n\n/* Inactive options */\n.option--inactive .option-label {\n  color: var(--bv-color-neutral-400);\n}\n\n/* Italic labels (Uncategorized, Ungrouped) */\n.option-label--italic {\n  font-style: italic;\n  color: var(--bv-color-neutral-500);\n}\n\n.option-label {\n  line-height: 1.4;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Select All row checkbox */\n.select-all-row .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.select-all-row .option-check.checked {\n  background: var(--bv-color-primary);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n";
+var bv_filter_dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\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: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 16px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 20px;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.trigger:hover {\n  background: var(--bv-color-secondary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  background: var(--bv-color-neutral-0);\n}\n\n:host([disabled]) .trigger {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n  background: var(--bv-color-neutral-100);\n}\n\n:host([disabled]) .trigger:hover {\n  background: var(--bv-color-neutral-100);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-secondary-foreground);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\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  width: max-content;\n  min-width: 100%;\n  max-width: 600px;\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: 4px 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Single-mode 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 */\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 9px 14px;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  white-space: nowrap;\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-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 Multi-mode search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.search-icon {\n  display: flex;\n  color: var(--bv-color-neutral-400);\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  background: transparent;\n  min-width: 0;\n}\n\n.search-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n/* \u2500\u2500 Multi-mode header (Select All + toggle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n}\n\n.select-all-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-700);\n  user-select: none;\n  flex: 1;\n  padding: 2px 0;\n}\n\n.select-all-row:hover {\n  color: var(--bv-color-neutral-900);\n}\n\n/* \u2500\u2500 Show Inactive toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.inactive-toggle-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.toggle-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n\n.toggle-track {\n  display: inline-flex;\n  align-items: center;\n  width: 28px;\n  height: 16px;\n  background: var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-full);\n  padding: 2px;\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track {\n  background: var(--bv-color-primary);\n}\n\n.toggle-thumb {\n  width: 12px;\n  height: 12px;\n  background: var(--bv-color-neutral-0);\n  border-radius: var(--bv-radius-full);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track .toggle-thumb {\n  transform: translateX(12px);\n}\n\n.toggle-text {\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Panel 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 */\n\n.panel-divider {\n  height: 1px;\n  background: var(--bv-color-neutral-200);\n  margin: 0;\n}\n\n/* \u2500\u2500 Multi-mode options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.options-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.option--multi {\n  justify-content: flex-start;\n  white-space: normal;\n  min-width: 200px;\n}\n\n/* Depth-based indentation */\n.option--multi[data-depth='1'] {\n  padding-left: 30px;\n}\n\n.option--multi[data-depth='2'] {\n  padding-left: 46px;\n}\n\n/* In multi mode, checkbox is always visible. Visual mirrors bv-checkbox:\n   outlined by default, primary-50 tint + primary check when checked. */\n.option--multi .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.option--multi .option-check.checked {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-primary);\n}\n\n.option--multi:hover .option-check:not(.checked) {\n  border-color: var(--bv-color-primary);\n}\n\n/* In multi mode, override the single-mode aria-selected styles */\n.option--multi[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-regular);\n  background: transparent;\n  color: var(--bv-color-neutral-700);\n}\n\n.option--multi:hover {\n  background: var(--bv-color-secondary);\n}\n\n/* Inactive options */\n.option--inactive .option-label {\n  color: var(--bv-color-neutral-400);\n}\n\n/* Italic labels (Uncategorized, Ungrouped) */\n.option-label--italic {\n  font-style: italic;\n  color: var(--bv-color-neutral-500);\n}\n\n.option-label {\n  line-height: 1.4;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Select All row checkbox \u2014 same visual as bv-checkbox */\n.select-all-row .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.select-all-row .option-check.checked {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-primary);\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-filter-dropdown/bv-filter-dropdown.ts
 var CHEVRON_DOWN = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>`;
 var CHECK = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
 var SEARCH_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>`;
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_filter_dropdown_default);
-  }
-  return _sheet;
-}
 var BvFilterDropdown = class extends HTMLElement {
   static observedAttributes = [
     "options",
@@ -35,13 +96,10 @@ var BvFilterDropdown = class extends HTMLElement {
   _selectedValues = null;
   _showInactive = false;
   _searchQuery = "";
-  _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_filter_dropdown_default);
   }
   get value() {
     return this._value;
@@ -63,10 +121,10 @@ var BvFilterDropdown = 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) {
-    var _a;
     if (name === "options") {
       try {
         this._options = JSON.parse(val ?? "[]");
@@ -93,11 +151,6 @@ var BvFilterDropdown = class extends HTMLElement {
     if ((name === "multi" || name === "searchable" || name === "show-inactive-toggle") && this._rendered) {
       this._rebuildPanel();
     }
-    if (name === "open" && this._rendered) {
-      const trigger = this.shadowRoot.querySelector(".trigger");
-      if (trigger) trigger.setAttribute("aria-expanded", val !== null ? "true" : "false");
-      if (val === null) (_a = this._panelEl) == null ? void 0 : _a.style.removeProperty("display");
-    }
   }
   _parseValuesAttr(val) {
     if (!val) {
@@ -115,11 +168,6 @@ var BvFilterDropdown = 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_filter_dropdown_default;
-      shadow.appendChild(s);
-    }
     try {
       this._options = JSON.parse(this.getAttribute("options") ?? "[]");
     } catch {
@@ -140,8 +188,10 @@ var BvFilterDropdown = class extends HTMLElement {
     chevron.innerHTML = CHEVRON_DOWN;
     trigger.append(label, chevron);
     trigger.addEventListener("click", (e) => {
+      var _a;
       e.stopPropagation();
-      this._toggle();
+      if (this.disabled) return;
+      (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const panel = document.createElement("div");
     panel.className = "panel";
@@ -151,31 +201,7 @@ var BvFilterDropdown = class extends HTMLElement {
     shadow.append(trigger, panel);
     this._syncLabel();
     this._rebuildPanel();
-    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("disabled")) return;
-    if (this.hasAttribute("open")) this._close();
-    else this._open();
-  }
-  _open() {
-    var _a;
-    this.setAttribute("open", "");
-    (_a = this.shadowRoot.querySelector(".trigger")) == 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.shadowRoot.querySelector(".trigger")) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+    this._dropdown = bindDropdownController(this, { trigger });
   }
   _syncLabel() {
     if (!this._labelEl) return;
@@ -228,11 +254,12 @@ var BvFilterDropdown = class extends HTMLElement {
     this._syncLabel();
   }
   _selectSingle(opt) {
+    var _a;
     this._value = opt.value;
     this.setAttribute("value", opt.value);
     this._syncLabel();
     this._syncSingleSelected();
-    this._close();
+    (_a = this._dropdown) == null ? void 0 : _a.close();
     this.dispatchEvent(
       new CustomEvent("bv-change", {
         bubbles: true,

package/dist/components/bv-filter-panel/bv-filter-panel.js

@@ -1,6 +1,24 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-filter-panel/bv-filter-panel.css
 var bv_filter_panel_default = ":host {\n  display: block;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n}\n\n/* Self-hide when there are no groups to show. */\n:host([empty]) {\n  display: none;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.panel-title {\n  margin: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.clear-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.clear-btn:hover {\n  text-decoration: underline;\n}\n\n.groups {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n.group {\n}\n\n.group-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding-bottom: var(--bv-spacing-sm);\n}\n\n.group-label {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.group-chevron {\n  width: 20px;\n  height: 20px;\n  color: var(--bv-color-neutral-500);\n  transition: transform var(--bv-transition-fast);\n}\n\n.group-chevron.collapsed {\n  transform: rotate(180deg);\n}\n\n.group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.group-options.hidden {\n  display: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-xs);\n}\n\n.option bv-checkbox {\n  flex: 1;\n  min-width: 0;\n}\n\n.option-count {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bv-spacing-sm);\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-full);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Loading skeleton */\n.skeleton {\n  display: none;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n:host([loading]) .groups {\n  display: none;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n.skeleton-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-heading {\n  height: 20px;\n  width: 55%;\n  margin-bottom: 4px;\n}\n\n.skeleton-short-line {\n  width: 70%;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\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);
+}
+
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-checkbox/bv-checkbox.css
 var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Size tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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: inline-flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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\u2500\u2500\u2500\u2500 */\n\n.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n";
 
@@ -18,12 +36,7 @@ var BvCheckbox = class extends HTMLElement {
   _labelEl = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_checkbox_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_checkbox_default);
   }
   connectedCallback() {
     this._render();
@@ -47,11 +60,6 @@ var BvCheckbox = 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_checkbox_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("label");
     wrap.className = "wrap";
     const box = document.createElement("span");
@@ -107,12 +115,7 @@ var BvFilterPanel = class extends HTMLElement {
   _skeletonEl = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_filter_panel_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_filter_panel_default);
   }
   connectedCallback() {
     this._parseGroups();
@@ -138,11 +141,6 @@ var BvFilterPanel = 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_filter_panel_default;
-      shadow.appendChild(s);
-    }
     const header = document.createElement("div");
     header.className = "panel-header";
     const title = document.createElement("h2");

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

@@ -1,6 +1,24 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-icon/bv-icon.css
 var bv_icon_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon-wrap {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n}\n\n.icon-wrap svg {\n  display: block;\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-icon/icons.ts
 var icons = {
   // Navigation
@@ -81,12 +99,7 @@ var BvIcon = class extends HTMLElement {
   _wrap = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_icon_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_icon_default);
   }
   connectedCallback() {
     this._render();
@@ -98,11 +111,6 @@ var BvIcon = 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_icon_default;
-      shadow.appendChild(s);
-    }
     this._wrap = document.createElement("span");
     this._wrap.className = "icon-wrap";
     shadow.appendChild(this._wrap);

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

@@ -1,15 +1,25 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-input/bv-input.css
 var bv_input_default = ":host {\n  display: block;\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 Input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-input {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  height: 44px;\n  padding: 0 var(--bv-spacing-md);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  outline: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.field-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.field-input:focus {\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.field-input:disabled {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-400);\n  cursor: not-allowed;\n}\n\n:host([error]:not([error=''])) .field-input {\n  border-color: var(--bv-color-danger);\n}\n\n:host([error]:not([error=''])) .field-input:focus {\n  border-color: var(--bv-color-danger);\n  box-shadow:\n    0 0 0 3px var(--bv-color-danger-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\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/bv-input/bv-input.ts
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_input_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-input/bv-input.ts
 var BvInput = class extends HTMLElement {
   static observedAttributes = [
     "label",
@@ -27,10 +37,7 @@ var BvInput = class extends HTMLElement {
   _errorEl = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_input_default);
   }
   get value() {
     var _a;
@@ -73,11 +80,6 @@ var BvInput = 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_input_default;
-      shadow.appendChild(s);
-    }
     const label = document.createElement("label");
     label.className = "field-label";
     this._labelEl = label;

package/dist/components/bv-input-dropdown/bv-input-dropdown.d.ts

@@ -22,7 +22,7 @@ export declare class BvInputDropdown extends HTMLElement {
     private _selectAllEl;
     private _toggleEl;
     private _errorEl;
-    private _offClick;
+    private _dropdown;
     constructor();
     get value(): string;
     set value(v: string);
@@ -34,9 +34,6 @@ export declare class BvInputDropdown extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
     private _render;
-    private _toggle;
-    private _open;
-    private _close;
     private _syncLabel;
     private _syncTriggerLabel;
     private _syncError;