@bluevolt-tech/lumen 1.5.2 → 2.0.0

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

@@ -0,0 +1,501 @@
+// 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";
+
+// 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";
+
+// components/bv-searchbox/bv-searchbox.ts
+var SEARCH_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+var BvSearchbox = class extends HTMLElement {
+  static observedAttributes = ["placeholder", "value", "size"];
+  _rendered = false;
+  _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];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered || !this._input) return;
+    if (name === "placeholder") this._input.placeholder = val ?? "";
+    if (name === "value") this._input.value = val ?? "";
+  }
+  get value() {
+    var _a;
+    return ((_a = this._input) == null ? void 0 : _a.value) ?? "";
+  }
+  _render() {
+    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;
+    this._input = document.createElement("input");
+    this._input.type = "search";
+    this._input.className = "search-input";
+    this._input.placeholder = this.getAttribute("placeholder") ?? "Search\u2026";
+    this._input.value = this.getAttribute("value") ?? "";
+    this._input.addEventListener("input", () => {
+      this.dispatchEvent(
+        new CustomEvent("bv-search", {
+          bubbles: true,
+          composed: true,
+          detail: { value: this._input.value }
+        })
+      );
+    });
+    shadow.append(icon, this._input);
+  }
+};
+if (!customElements.get("bv-searchbox")) {
+  customElements.define("bv-searchbox", BvSearchbox);
+}
+
+// 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";
+
+// components/bv-checkbox/bv-checkbox.ts
+var CHECK_ICON = `<svg viewBox="0 0 11.3333 8.41667" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.3333 1L3.91667 7.41667L1 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+var INDETERMINATE_ICON = `<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 6H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+var BvCheckbox = class extends HTMLElement {
+  static observedAttributes = ["checked", "indeterminate", "disabled", "label", "size"];
+  _rendered = false;
+  _checkEl = null;
+  _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];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "checked" || name === "indeterminate") this._syncIcon();
+    if (name === "label" && this._labelEl) this._labelEl.textContent = val ?? "";
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(v) {
+    if (v) this.setAttribute("checked", "");
+    else this.removeAttribute("checked");
+  }
+  get indeterminate() {
+    return this.hasAttribute("indeterminate");
+  }
+  _render() {
+    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");
+    box.className = "box";
+    this._checkEl = document.createElement("span");
+    this._checkEl.className = "check";
+    this._syncIcon();
+    box.appendChild(this._checkEl);
+    this._labelEl = document.createElement("span");
+    this._labelEl.className = "label";
+    this._labelEl.textContent = this.getAttribute("label") ?? "";
+    const slot = document.createElement("slot");
+    wrap.append(box, this._labelEl, slot);
+    shadow.appendChild(wrap);
+    wrap.addEventListener("click", () => {
+      if (this.hasAttribute("disabled")) return;
+      this.checked = !this.checked;
+      this.removeAttribute("indeterminate");
+      this.dispatchEvent(
+        new CustomEvent("bv-change", {
+          bubbles: true,
+          composed: true,
+          detail: { checked: this.checked }
+        })
+      );
+    });
+  }
+  _syncIcon() {
+    if (!this._checkEl) return;
+    this._checkEl.innerHTML = this.indeterminate ? INDETERMINATE_ICON : CHECK_ICON;
+  }
+};
+if (!customElements.get("bv-checkbox")) {
+  customElements.define("bv-checkbox", BvCheckbox);
+}
+
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-toggle/bv-toggle.css
+var bv_toggle_default = ":host {\n  --bv-toggle-width: 44px;\n  --bv-toggle-height: 24px;\n  --bv-toggle-track-off: var(--bv-color-neutral-300);\n  --bv-toggle-track-on: var(--bv-color-primary);\n  --bv-toggle-thumb: var(--bv-color-neutral-0);\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  --bv-toggle-width: 32px;\n  --bv-toggle-height: 18px;\n}\n\n.wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track {\n  position: relative;\n  width: var(--bv-toggle-width);\n  height: var(--bv-toggle-height);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-toggle-track-off);\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n:host([checked]) .track {\n  background: var(--bv-toggle-track-on);\n}\n\n.thumb {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc(var(--bv-toggle-height) - 6px);\n  height: calc(var(--bv-toggle-height) - 6px);\n  border-radius: 50%;\n  background: var(--bv-toggle-thumb);\n  box-shadow: var(--bv-shadow-sm);\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([checked]) .thumb {\n  transform: translateX(calc(var(--bv-toggle-width) - var(--bv-toggle-height)));\n}\n\n.label {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  line-height: 20px;\n}\n\n:host([size='sm']) .label {\n  font-size: var(--bv-font-size-xs);\n  line-height: 18px;\n}\n";
+
+// components/bv-toggle/bv-toggle.ts
+var BvToggle = class extends HTMLElement {
+  static observedAttributes = ["checked", "disabled", "label", "size"];
+  _rendered = false;
+  _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];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "label" && this._labelEl) this._labelEl.textContent = val ?? "";
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(v) {
+    if (v) this.setAttribute("checked", "");
+    else this.removeAttribute("checked");
+  }
+  _render() {
+    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");
+    track.className = "track";
+    const thumb = document.createElement("span");
+    thumb.className = "thumb";
+    track.appendChild(thumb);
+    this._labelEl = document.createElement("span");
+    this._labelEl.className = "label";
+    this._labelEl.textContent = this.getAttribute("label") ?? "";
+    const slot = document.createElement("slot");
+    wrap.append(track, this._labelEl, slot);
+    shadow.appendChild(wrap);
+    wrap.addEventListener("click", () => {
+      if (this.hasAttribute("disabled")) return;
+      this.checked = !this.checked;
+      this.dispatchEvent(
+        new CustomEvent("bv-change", {
+          bubbles: true,
+          composed: true,
+          detail: { checked: this.checked }
+        })
+      );
+    });
+  }
+};
+if (!customElements.get("bv-toggle")) {
+  customElements.define("bv-toggle", BvToggle);
+}
+
+// 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",
+    "value",
+    "placeholder",
+    "required",
+    "disabled",
+    "error",
+    "search",
+    "select-all",
+    "select-all-state",
+    "toggle-label",
+    "toggle-checked",
+    "open"
+  ];
+  _rendered = false;
+  _labelEl = null;
+  _triggerLabelEl = null;
+  _headerEl = null;
+  _searchEl = null;
+  _toolbarEl = null;
+  _selectAllEl = null;
+  _toggleEl = null;
+  _errorEl = null;
+  _offClick = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    if (v) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(v) {
+    if (v) this.setAttribute("required", "");
+    else this.removeAttribute("required");
+  }
+  connectedCallback() {
+    this._render();
+  }
+  disconnectedCallback() {
+    if (this._offClick) document.removeEventListener("click", this._offClick);
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "label" || name === "required") this._syncLabel();
+    if (name === "value" || name === "placeholder") this._syncTriggerLabel();
+    if (name === "error") this._syncError();
+    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;
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "trigger";
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("part", "trigger");
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (!this.disabled) this._toggle();
+    });
+    const triggerLabel = document.createElement("span");
+    triggerLabel.className = "trigger-label";
+    this._triggerLabelEl = triggerLabel;
+    const chevron = document.createElement("span");
+    chevron.className = "trigger-chevron";
+    chevron.innerHTML = CHEVRON_ICON;
+    trigger.append(triggerLabel, chevron);
+    const panel = document.createElement("div");
+    panel.className = "panel";
+    panel.setAttribute("role", "listbox");
+    const header = document.createElement("div");
+    header.className = "panel-header";
+    this._headerEl = header;
+    const searchEl = document.createElement("bv-searchbox");
+    searchEl.setAttribute("placeholder", "Search...");
+    searchEl.addEventListener("bv-search", (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent("bv-search", {
+          bubbles: true,
+          composed: true,
+          detail: e.detail
+        })
+      );
+    });
+    this._searchEl = searchEl;
+    const toolbar = document.createElement("div");
+    toolbar.className = "panel-toolbar";
+    this._toolbarEl = toolbar;
+    const selectAllEl = document.createElement("bv-checkbox");
+    selectAllEl.setAttribute("label", "Select All");
+    selectAllEl.addEventListener("bv-change", (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent("bv-select-all", {
+          bubbles: true,
+          composed: true,
+          detail: e.detail
+        })
+      );
+    });
+    this._selectAllEl = selectAllEl;
+    const toggleEl = document.createElement("bv-toggle");
+    toggleEl.setAttribute("size", "sm");
+    toggleEl.addEventListener("bv-change", (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent("bv-toggle-change", {
+          bubbles: true,
+          composed: true,
+          detail: e.detail
+        })
+      );
+    });
+    this._toggleEl = toggleEl;
+    toolbar.append(selectAllEl, toggleEl);
+    header.append(searchEl, toolbar);
+    const content = document.createElement("div");
+    content.className = "panel-content";
+    const slot = document.createElement("slot");
+    content.appendChild(slot);
+    panel.append(header, content);
+    const errorEl = document.createElement("span");
+    errorEl.className = "field-error";
+    this._errorEl = errorEl;
+    shadow.append(label, trigger, panel, errorEl);
+    this._syncLabel();
+    this._syncTriggerLabel();
+    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");
+  }
+  _syncLabel() {
+    if (!this._labelEl) return;
+    const text = this.getAttribute("label") ?? "";
+    this._labelEl.textContent = text;
+    if (this.hasAttribute("required")) {
+      const mark = document.createElement("span");
+      mark.className = "required-mark";
+      mark.setAttribute("aria-hidden", "true");
+      mark.textContent = "*";
+      this._labelEl.appendChild(mark);
+    }
+    this._labelEl.hidden = !text;
+  }
+  _syncTriggerLabel() {
+    if (!this._triggerLabelEl) return;
+    const val = this.getAttribute("value") ?? "";
+    const placeholder = this.getAttribute("placeholder") ?? "All";
+    if (val) {
+      this._triggerLabelEl.textContent = val;
+      this._triggerLabelEl.classList.remove("is-placeholder");
+    } else {
+      this._triggerLabelEl.textContent = placeholder;
+      this._triggerLabelEl.classList.add("is-placeholder");
+    }
+  }
+  _syncError() {
+    if (!this._errorEl) return;
+    const err = this.getAttribute("error") ?? "";
+    this._errorEl.textContent = err;
+    this._errorEl.hidden = !err;
+  }
+  _syncSearch() {
+    if (!this._searchEl) return;
+    this._searchEl.hidden = !this.hasAttribute("search");
+    this._updateHeaderVisibility();
+  }
+  _syncToolbar() {
+    if (!this._toolbarEl || !this._selectAllEl || !this._toggleEl) return;
+    const showSelectAll = this.hasAttribute("select-all");
+    const state = this.getAttribute("select-all-state") ?? "unchecked";
+    const toggleLabel = this.getAttribute("toggle-label") ?? "";
+    this._selectAllEl.hidden = !showSelectAll;
+    if (showSelectAll) {
+      if (state === "checked") {
+        this._selectAllEl.setAttribute("checked", "");
+        this._selectAllEl.removeAttribute("indeterminate");
+      } else if (state === "mixed") {
+        this._selectAllEl.removeAttribute("checked");
+        this._selectAllEl.setAttribute("indeterminate", "");
+      } else {
+        this._selectAllEl.removeAttribute("checked");
+        this._selectAllEl.removeAttribute("indeterminate");
+      }
+    }
+    this._toggleEl.hidden = !toggleLabel;
+    if (toggleLabel) {
+      this._toggleEl.setAttribute("label", toggleLabel);
+      if (this.hasAttribute("toggle-checked")) {
+        this._toggleEl.setAttribute("checked", "");
+      } else {
+        this._toggleEl.removeAttribute("checked");
+      }
+    }
+    this._toolbarEl.hidden = !showSelectAll && !toggleLabel;
+    this._updateHeaderVisibility();
+  }
+  _updateHeaderVisibility() {
+    if (!this._headerEl || !this._searchEl || !this._toolbarEl) return;
+    const hasSearch = !this._searchEl.hidden;
+    const hasToolbar = !this._toolbarEl.hidden;
+    this._headerEl.hidden = !hasSearch && !hasToolbar;
+  }
+};
+if (!customElements.get("bv-input-dropdown")) {
+  customElements.define("bv-input-dropdown", BvInputDropdown);
+}
+export {
+  BvInputDropdown
+};

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

@@ -1,10 +1,14 @@
 export declare class BvPagination extends HTMLElement {
-    static readonly observedAttributes: string[];
+    static readonly observedAttributes: readonly ["page", "total-pages", "total", "page-size", "siblings", "show-results", "show-page-size", "page-size-options", "compact"];
     private _rendered;
     private _pagesEl;
     private _prevBtn;
     private _nextBtn;
     private _rangeEl;
+    private _resultsEl;
+    private _pageSizeWrapEl;
+    private _pageSizeSelectEl;
+    private _pageLabelEl;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(): void;
@@ -13,8 +17,16 @@ export declare class BvPagination extends HTMLElement {
     get total(): number;
     get pageSize(): number;
     get siblings(): number;
+    get showResults(): boolean;
+    set showResults(v: boolean);
+    get showPageSize(): boolean;
+    set showPageSize(v: boolean);
+    get compact(): boolean;
+    set compact(v: boolean);
+    get pageSizeOptions(): number[];
     private _go;
     private _render;
     private _update;
+    private _syncPageSizeOptions;
     private _pageRange;
 }