@bluevolt-tech/lumen 2.0.1 → 2.2.0

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

@@ -1,6 +1,75 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-input-dropdown/bv-input-dropdown.css
 var bv_input_dropdown_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Field 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 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.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  box-sizing: border-box;\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([disabled]) .trigger {\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=''])) .trigger {\n  border-color: var(--bv-color-danger);\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 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\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 100%;\n  width: max-content;\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}\n\n:host([toggle-label]) .panel {\n  min-width: 260px;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Panel header (search + toolbar) \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-header {\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  padding: var(--bv-spacing-sm);\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-xs) 0;\n}\n\n/* \u2500\u2500 Panel content (scrollable slot area) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-content {\n  overflow-y: auto;\n  max-height: var(--bv-input-dropdown-content-height, 280px);\n  padding: var(--bv-spacing-xs) 0;\n}\n\n/* Stack all slotted content vertically */\n::slotted(*) {\n  display: block;\n}\n\n/* Row padding \u2014 left aligns with the panel-header padding */\n::slotted(bv-checkbox) {\n  padding: 6px var(--bv-spacing-sm);\n  box-sizing: border-box;\n  white-space: nowrap;\n  max-width: 100%;\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\n.field-error:empty {\n  display: none;\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 };
+}
+
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-searchbox/bv-searchbox.css
 var bv_searchbox_default = ":host {\n  display: block;\n  width: 100%;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.search-icon {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--bv-color-neutral-400);\n  display: flex;\n  pointer-events: none;\n}\n\n.search-input {\n  width: 100%;\n  box-sizing: border-box;\n  height: 40px;\n  padding: 0 12px 0 38px;\n  font-size: var(--bv-font-size-sm);\n  font-family: inherit;\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  outline: none;\n  color: var(--bv-color-neutral-800);\n  background: var(--bv-color-neutral-0);\n  transition: border-color var(--bv-transition-fast);\n}\n\n:host([size='sm']) .search-input {\n  height: 36px;\n}\n:host([size='lg']) .search-input {\n  height: 46px;\n}\n\n.search-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.search-input:focus {\n  border-color: #6fb0d8;\n  box-shadow:\n    0px 0px 0px 4px #dbe8ff,\n    0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n}\n";
 
@@ -15,12 +84,7 @@ var BvSearchbox = class extends HTMLElement {
   _input = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_searchbox_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_searchbox_default);
   }
   connectedCallback() {
     this._render();
@@ -38,11 +102,6 @@ var BvSearchbox = 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_searchbox_default;
-      shadow.appendChild(s);
-    }
     const icon = document.createElement("span");
     icon.className = "search-icon";
     icon.innerHTML = SEARCH_ICON;
@@ -84,12 +143,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();
@@ -113,11 +167,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");
@@ -164,12 +213,7 @@ var BvToggle = class extends HTMLElement {
   _labelEl = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_toggle_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_toggle_default);
   }
   connectedCallback() {
     this._render();
@@ -189,11 +233,6 @@ var BvToggle = 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_toggle_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("label");
     wrap.className = "wrap";
     const track = document.createElement("span");
@@ -226,14 +265,6 @@ if (!customElements.get("bv-toggle")) {
 
 // components/bv-input-dropdown/bv-input-dropdown.ts
 var CHEVRON_ICON = `<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_input_dropdown_default);
-  }
-  return _sheet;
-}
 var BvInputDropdown = class extends HTMLElement {
   static observedAttributes = [
     "label",
@@ -258,13 +289,10 @@ var BvInputDropdown = class extends HTMLElement {
   _selectAllEl = null;
   _toggleEl = null;
   _errorEl = 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_input_dropdown_default);
   }
   get value() {
     return this.getAttribute("value") ?? "";
@@ -290,7 +318,8 @@ var BvInputDropdown = 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;
@@ -300,20 +329,11 @@ var BvInputDropdown = class extends HTMLElement {
     if (name === "search") this._syncSearch();
     if (name === "select-all" || name === "select-all-state" || name === "toggle-label" || name === "toggle-checked")
       this._syncToolbar();
-    if (name === "open") {
-      const trigger = this.shadowRoot.querySelector(".trigger");
-      if (trigger) trigger.setAttribute("aria-expanded", _val !== null ? "true" : "false");
-    }
   }
   _render() {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_input_dropdown_default;
-      shadow.appendChild(s);
-    }
     const label = document.createElement("label");
     label.className = "field-label";
     this._labelEl = label;
@@ -324,8 +344,9 @@ var BvInputDropdown = class extends HTMLElement {
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("part", "trigger");
     trigger.addEventListener("click", (e) => {
+      var _a;
       e.stopPropagation();
-      if (!this.disabled) this._toggle();
+      if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const triggerLabel = document.createElement("span");
     triggerLabel.className = "trigger-label";
@@ -398,27 +419,7 @@ var BvInputDropdown = class extends HTMLElement {
     this._syncError();
     this._syncSearch();
     this._syncToolbar();
-    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.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;

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

@@ -1,6 +1,24 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-modal/bv-modal.css
 var bv_modal_default = '/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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   Apps can override per-instance:\n\n   HTML:    <bv-modal style="--bv-modal-width: 600px;">\n   Angular: <bv-modal [style.--bv-modal-bg]="bgColor">\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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:host {\n  --bv-modal-width: 800px;\n  --bv-modal-bg: var(--bv-color-neutral-0);\n  --bv-modal-radius: var(--bv-radius-xl);\n  --bv-modal-title-color: #101828;\n  --bv-modal-backdrop: rgba(16, 24, 40, 0.6);\n  --bv-modal-body-max-height: none;\n}\n\ndialog {\n  padding: 0;\n  border: none;\n  border-radius: var(--bv-modal-radius);\n  background: transparent;\n  width: var(--bv-modal-width);\n  max-width: min(var(--bv-modal-width), calc(100vw - 32px));\n  outline: none;\n}\n\ndialog::backdrop {\n  background: var(--bv-modal-backdrop);\n}\n\n.panel {\n  display: flex;\n  width: 100%;\n  padding: 20px 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 20px;\n  border-radius: var(--bv-modal-radius);\n  background: var(--bv-modal-bg);\n  box-sizing: border-box;\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\n.header {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.title {\n  margin: 0;\n  color: var(--bv-modal-title-color);\n  font-family: var(--bv-font-family-base);\n  font-size: 24px;\n  font-style: normal;\n  font-weight: var(--bv-font-weight-medium);\n  line-height: 32px;\n}\n\n.close-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-md);\n  cursor: pointer;\n  color: var(--bv-color-neutral-500);\n  font-size: 18px;\n  line-height: 1;\n  flex-shrink: 0;\n  transition:\n    color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.close-btn:hover {\n  color: var(--bv-color-neutral-800);\n  background: var(--bv-color-neutral-100);\n}\n\n/* \u2500\u2500 Separator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.separator {\n  width: 100%;\n  border: none;\n  border-top: 1px solid var(--bv-color-neutral-200);\n  margin: 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\n.body {\n  width: 100%;\n  max-height: var(--bv-modal-body-max-height);\n  overflow-y: auto;\n  color: var(--bv-color-neutral-600);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.footer {\n  width: 100%;\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-modal/bv-modal.ts
 var BvModal = class extends HTMLElement {
   static observedAttributes = ["title", "open"];
@@ -9,12 +27,7 @@ var BvModal = class extends HTMLElement {
   _rendered = false;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_modal_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_modal_default);
   }
   connectedCallback() {
     this._render();
@@ -48,11 +61,6 @@ var BvModal = class extends HTMLElement {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const style = document.createElement("style");
-      style.textContent = bv_modal_default;
-      shadow.appendChild(style);
-    }
     const dialog = document.createElement("dialog");
     this._dialog = dialog;
     dialog.addEventListener("click", (e) => {

package/dist/components/bv-page-title/bv-page-title.js

@@ -1,16 +1,29 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-page-title/bv-page-title.css
 var bv_page_title_default = ":host {\n  display: block;\n}\n\nh1 {\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  line-height: 1.2;\n  color: var(--bv-color-neutral-900);\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-page-title/bv-page-title.ts
 var BvPageTitle = class extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_page_title_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_page_title_default);
   }
   connectedCallback() {
     if (this.shadowRoot.childElementCount > (this.shadowRoot.adoptedStyleSheets.length ? 0 : 1))

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

@@ -1,6 +1,7 @@
 export declare class BvPagination extends HTMLElement {
     static readonly observedAttributes: readonly ["page", "total-pages", "total", "page-size", "siblings", "show-results", "show-page-size", "page-size-options", "compact"];
     private _rendered;
+    private _metaEl;
     private _pagesEl;
     private _prevBtn;
     private _nextBtn;

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

@@ -1,180 +1,23 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-pagination/bv-pagination.css
-var bv_pagination_default = `:host {
-  display: block;
-}
-
-.wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--bv-spacing-xl);
-  width: 100%;
-  font-family: var(--bv-font-family-base);
-}
-
-/* \u2500\u2500 Meta section (results count + page-size) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+var bv_pagination_default = ":host {\n  display: block;\n}\n\n/*\n * Any element inside the shadow tree that carries author-declared display\n * still respects the `hidden` attribute. Without this, `[hidden] { display: none }`\n * (UA rule) loses to author `display: <value>` and the element stays visible.\n */\n[hidden] {\n  display: none !important;\n}\n\n.wrap {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-xl);\n  width: 100%;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Meta section (results count + page-size) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.meta {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n}\n\n.results-count {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-700);\n  white-space: nowrap;\n  margin-right: var(--bv-spacing-sm);\n}\n\n.page-size-wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.page-size-select {\n  height: 36px;\n  box-sizing: border-box;\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  background-color: var(--bv-color-neutral-0);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  appearance: none;\n  -webkit-appearance: none;\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-neutral-700);\n  padding: 0 28px 0 var(--bv-spacing-sm);\n  cursor: pointer;\n  box-shadow: var(--bv-shadow-sm);\n  outline: none;\n}\n\n.page-size-select: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.per-page-label {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Nav section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.nav {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n}\n\n/*\n * When .meta collapses (opt-out consumers: no show-results, no show-page-size),\n * .wrap's `space-between` has only one visible child and packs .nav to the\n * left. Give .nav the full width and use auto-margins to reproduce the\n * pre-v2.0.0 3-column layout: Prev on far left, pages in the middle,\n * (range + Next) grouped on the far right.\n */\n.meta[hidden] ~ .nav {\n  flex: 1;\n}\n/*\n * Non-compact: two auto-margins split the extra space into equal gaps so the\n * layout reads `[Prev]___[pages]___[range][Next]`. Prev sits on the far left,\n * pages centered in the middle, range + Next grouped on the far right.\n */\n.meta[hidden] ~ .nav .pages {\n  margin-left: auto;\n}\n.meta[hidden] ~ .nav .range-label {\n  margin-left: auto;\n}\n/* Compact: page label centers between Prev and Next. */\n.meta[hidden] ~ .nav .page-label {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* \u2500\u2500 Shared button base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid transparent;\n  border-radius: var(--bv-radius-lg);\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n/* Prev / Next buttons */\n.nav-btn {\n  gap: var(--bv-spacing-xs);\n  height: 36px;\n  padding: 0 var(--bv-spacing-sm);\n  border-color: var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-neutral-700);\n  font-weight: var(--bv-font-weight-semibold);\n  box-shadow: var(--bv-shadow-sm);\n  white-space: nowrap;\n}\n\n.nav-btn:hover:not(:disabled) {\n  background: var(--bv-color-neutral-100);\n}\n\n.nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.nav-icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n/* Compact page label \u2014 plain text between Prev / Next */\n.page-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  white-space: nowrap;\n  padding: 0 var(--bv-spacing-md);\n}\n\n/* \u2500\u2500 Page number buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pages {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.page-btn {\n  width: 40px;\n  height: 40px;\n  color: var(--bv-color-neutral-600);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n.page-btn:hover:not(.active) {\n  background: var(--bv-color-neutral-100);\n}\n\n.page-btn.active {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-900);\n  cursor: default;\n}\n\n.ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-400);\n}\n\n/* \u2500\u2500 Range 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 */\n\n.range-label {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n  margin-left: var(--bv-spacing-xs);\n}\n";
 
-.meta {
-  display: flex;
-  align-items: center;
-  gap: var(--bv-spacing-sm);
-}
-
-.results-count {
-  font-size: var(--bv-font-size-sm);
-  font-weight: var(--bv-font-weight-semibold);
-  color: var(--bv-color-neutral-700);
-  white-space: nowrap;
-  margin-right: var(--bv-spacing-sm);
-}
-
-.page-size-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.page-size-select {
-  height: 36px;
-  box-sizing: border-box;
-  border: 1px solid var(--bv-color-neutral-300);
-  border-radius: var(--bv-radius-lg);
-  background-color: var(--bv-color-neutral-0);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  appearance: none;
-  -webkit-appearance: none;
-  font-family: inherit;
-  font-size: var(--bv-font-size-sm);
-  font-weight: var(--bv-font-weight-semibold);
-  color: var(--bv-color-neutral-700);
-  padding: 0 28px 0 var(--bv-spacing-sm);
-  cursor: pointer;
-  box-shadow: var(--bv-shadow-sm);
-  outline: none;
-}
-
-.page-size-select:focus {
-  border-color: var(--bv-color-primary);
-  box-shadow:
-    0 0 0 3px var(--bv-color-primary-light),
-    0 1px 2px 0 rgba(16, 24, 40, 0.05);
-}
-
-.per-page-label {
-  font-size: var(--bv-font-size-sm);
-  color: var(--bv-color-neutral-500);
-  white-space: nowrap;
-}
-
-/* \u2500\u2500 Nav section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.nav {
-  display: flex;
-  align-items: center;
-  gap: var(--bv-spacing-xs);
-}
-
-/* \u2500\u2500 Shared button base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: var(--bv-radius-lg);
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--bv-font-size-sm);
-  cursor: pointer;
-  transition:
-    background var(--bv-transition-fast),
-    color var(--bv-transition-fast);
-}
-
-/* Prev / Next buttons */
-.nav-btn {
-  gap: var(--bv-spacing-xs);
-  height: 36px;
-  padding: 0 var(--bv-spacing-sm);
-  border-color: var(--bv-color-neutral-300);
-  background: var(--bv-color-neutral-0);
-  color: var(--bv-color-neutral-700);
-  font-weight: var(--bv-font-weight-semibold);
-  box-shadow: var(--bv-shadow-sm);
-  white-space: nowrap;
-}
-
-.nav-btn:hover:not(:disabled) {
-  background: var(--bv-color-neutral-100);
-}
-
-.nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.nav-icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-/* Compact page label \u2014 plain text between Prev / Next */
-.page-label {
-  font-size: var(--bv-font-size-sm);
-  font-weight: var(--bv-font-weight-semibold);
-  color: var(--bv-color-neutral-700);
-  white-space: nowrap;
-  padding: 0 var(--bv-spacing-md);
-}
-
-/* \u2500\u2500 Page number buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.pages {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.page-btn {
-  width: 40px;
-  height: 40px;
-  color: var(--bv-color-neutral-600);
-  font-weight: var(--bv-font-weight-medium);
-}
-
-.page-btn:hover:not(.active) {
-  background: var(--bv-color-neutral-100);
-}
-
-.page-btn.active {
-  background: var(--bv-color-neutral-100);
-  color: var(--bv-color-neutral-900);
-  cursor: default;
-}
-
-.ellipsis {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  font-size: var(--bv-font-size-sm);
-  color: var(--bv-color-neutral-400);
-}
-
-/* \u2500\u2500 Range 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 */
-
-.range-label {
-  font-size: var(--bv-font-size-sm);
-  font-weight: var(--bv-font-weight-medium);
-  color: var(--bv-color-neutral-600);
-  white-space: nowrap;
-  margin-left: var(--bv-spacing-xs);
+// 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-pagination/bv-pagination.ts
 var PREV_ICON = `<svg class="nav-icon" viewBox="0 0 20 20" fill="none"><path d="M12.5 15l-5-5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -192,6 +35,7 @@ var BvPagination = class extends HTMLElement {
     "compact"
   ];
   _rendered = false;
+  _metaEl = null;
   _pagesEl = null;
   _prevBtn = null;
   _nextBtn = null;
@@ -202,12 +46,7 @@ var BvPagination = class extends HTMLElement {
   _pageLabelEl = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_pagination_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_pagination_default);
   }
   connectedCallback() {
     this._render();
@@ -271,15 +110,11 @@ var BvPagination = 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_pagination_default;
-      shadow.appendChild(s);
-    }
     const wrap = document.createElement("div");
     wrap.className = "wrap";
     const metaEl = document.createElement("div");
     metaEl.className = "meta";
+    this._metaEl = metaEl;
     const resultsEl = document.createElement("span");
     resultsEl.className = "results-count";
     this._resultsEl = resultsEl;
@@ -291,7 +126,6 @@ var BvPagination = class extends HTMLElement {
     this._pageSizeSelectEl = pageSizeSelect;
     pageSizeSelect.addEventListener("change", () => {
       const newSize = parseInt(pageSizeSelect.value, 10);
-      this.setAttribute("page-size", String(newSize));
       this.dispatchEvent(
         new CustomEvent("bv-page-size-change", {
           bubbles: true,
@@ -367,6 +201,9 @@ var BvPagination = class extends HTMLElement {
     if (this._pageSizeSelectEl) {
       this._syncPageSizeOptions(pageSize);
     }
+    if (this._metaEl) {
+      this._metaEl.hidden = !this.showResults && !this.showPageSize;
+    }
     if (!this._pagesEl || compact) return;
     this._pagesEl.innerHTML = "";
     const pages = this._pageRange(page, totalPages, siblings);