@bluevolt-tech/lumen 1.5.1 → 2.0.0

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

@@ -1,16 +1,205 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-pagination/bv-pagination.css
-var bv_pagination_default = ":host {\n  display: block;\n}\n\n.wrap {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  font-family: var(--bv-font-family-base);\n}\n\n/* Shared button base */\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/* Page number buttons */\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/* Right section */\n.right-section {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n}\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}\n";
+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 */
+
+.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/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>`;
 var NEXT_ICON = `<svg class="nav-icon" viewBox="0 0 20 20" fill="none"><path d="M7.5 5l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 var BvPagination = class extends HTMLElement {
-  static observedAttributes = ["page", "total-pages", "total", "page-size", "siblings"];
+  static observedAttributes = [
+    "page",
+    "total-pages",
+    "total",
+    "page-size",
+    "siblings",
+    "show-results",
+    "show-page-size",
+    "page-size-options",
+    "compact"
+  ];
   _rendered = false;
   _pagesEl = null;
   _prevBtn = null;
   _nextBtn = null;
   _rangeEl = null;
+  _resultsEl = null;
+  _pageSizeWrapEl = null;
+  _pageSizeSelectEl = null;
+  _pageLabelEl = null;
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
@@ -41,6 +230,31 @@ var BvPagination = class extends HTMLElement {
   get siblings() {
     return parseInt(this.getAttribute("siblings") ?? "1", 10);
   }
+  get showResults() {
+    return this.hasAttribute("show-results");
+  }
+  set showResults(v) {
+    if (v) this.setAttribute("show-results", "");
+    else this.removeAttribute("show-results");
+  }
+  get showPageSize() {
+    return this.hasAttribute("show-page-size");
+  }
+  set showPageSize(v) {
+    if (v) this.setAttribute("show-page-size", "");
+    else this.removeAttribute("show-page-size");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(v) {
+    if (v) this.setAttribute("compact", "");
+    else this.removeAttribute("compact");
+  }
+  get pageSizeOptions() {
+    const raw = this.getAttribute("page-size-options") ?? "10,25,50,100";
+    return raw.split(",").map((v) => parseInt(v.trim(), 10)).filter((v) => !isNaN(v));
+  }
   _go(p) {
     const { page, totalPages } = this;
     if (p < 1 || p > totalPages || p === page) return;
@@ -64,17 +278,48 @@ var BvPagination = class extends HTMLElement {
     }
     const wrap = document.createElement("div");
     wrap.className = "wrap";
+    const metaEl = document.createElement("div");
+    metaEl.className = "meta";
+    const resultsEl = document.createElement("span");
+    resultsEl.className = "results-count";
+    this._resultsEl = resultsEl;
+    const pageSizeWrap = document.createElement("span");
+    pageSizeWrap.className = "page-size-wrap";
+    const pageSizeSelect = document.createElement("select");
+    pageSizeSelect.className = "page-size-select";
+    pageSizeSelect.setAttribute("aria-label", "Per page");
+    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,
+          composed: true,
+          detail: { pageSize: newSize }
+        })
+      );
+    });
+    const perPageLabel = document.createElement("span");
+    perPageLabel.className = "per-page-label";
+    perPageLabel.textContent = "per page";
+    pageSizeWrap.append(pageSizeSelect, perPageLabel);
+    this._pageSizeWrapEl = pageSizeWrap;
+    metaEl.append(resultsEl, pageSizeWrap);
+    const navEl = document.createElement("div");
+    navEl.className = "nav";
     const prevBtn = document.createElement("button");
     prevBtn.className = "btn nav-btn";
     prevBtn.setAttribute("aria-label", "Previous");
     prevBtn.innerHTML = `${PREV_ICON}<span class="nav-label">Previous</span>`;
     prevBtn.addEventListener("click", () => this._go(this.page - 1));
     this._prevBtn = prevBtn;
+    const pageLabelEl = document.createElement("span");
+    pageLabelEl.className = "page-label";
+    this._pageLabelEl = pageLabelEl;
     const pagesEl = document.createElement("div");
     pagesEl.className = "pages";
     this._pagesEl = pagesEl;
-    const rightSection = document.createElement("div");
-    rightSection.className = "right-section";
     const rangeEl = document.createElement("span");
     rangeEl.className = "range-label";
     this._rangeEl = rangeEl;
@@ -84,17 +329,26 @@ var BvPagination = class extends HTMLElement {
     nextBtn.innerHTML = `<span class="nav-label">Next</span>${NEXT_ICON}`;
     nextBtn.addEventListener("click", () => this._go(this.page + 1));
     this._nextBtn = nextBtn;
-    rightSection.append(rangeEl, nextBtn);
-    wrap.append(prevBtn, pagesEl, rightSection);
+    navEl.append(prevBtn, pageLabelEl, pagesEl, rangeEl, nextBtn);
+    wrap.append(metaEl, navEl);
     shadow.appendChild(wrap);
     this._update();
   }
   _update() {
-    const { page, totalPages, total, pageSize, siblings } = this;
+    const { page, totalPages, total, pageSize, siblings, compact } = this;
     if (this._prevBtn) this._prevBtn.disabled = page <= 1;
     if (this._nextBtn) this._nextBtn.disabled = page >= totalPages;
+    if (this._pageLabelEl) {
+      this._pageLabelEl.hidden = !compact;
+      if (compact) this._pageLabelEl.textContent = `Page ${page} of ${totalPages}`;
+    }
+    if (this._pagesEl) {
+      this._pagesEl.hidden = compact;
+    }
     if (this._rangeEl) {
-      if (total > 0) {
+      if (compact) {
+        this._rangeEl.hidden = true;
+      } else if (total > 0) {
         const start = (page - 1) * pageSize + 1;
         const end = Math.min(page * pageSize, total);
         this._rangeEl.textContent = `${start} - ${end} of ${total}`;
@@ -103,7 +357,17 @@ var BvPagination = class extends HTMLElement {
         this._rangeEl.hidden = true;
       }
     }
-    if (!this._pagesEl) return;
+    if (this._resultsEl) {
+      this._resultsEl.textContent = `${total} results`;
+      this._resultsEl.hidden = !this.showResults;
+    }
+    if (this._pageSizeWrapEl) {
+      this._pageSizeWrapEl.hidden = !this.showPageSize;
+    }
+    if (this._pageSizeSelectEl) {
+      this._syncPageSizeOptions(pageSize);
+    }
+    if (!this._pagesEl || compact) return;
     this._pagesEl.innerHTML = "";
     const pages = this._pageRange(page, totalPages, siblings);
     let lastPage = 0;
@@ -122,6 +386,23 @@ var BvPagination = class extends HTMLElement {
       lastPage = p;
     }
   }
+  _syncPageSizeOptions(currentSize) {
+    if (!this._pageSizeSelectEl) return;
+    const options = this.pageSizeOptions;
+    const select = this._pageSizeSelectEl;
+    const existing = Array.from(select.options).map((o) => parseInt(o.value, 10));
+    const needsRebuild = existing.length !== options.length || existing.some((v, i) => v !== options[i]);
+    if (needsRebuild) {
+      select.innerHTML = "";
+      for (const size of options) {
+        const opt = document.createElement("option");
+        opt.value = String(size);
+        opt.textContent = String(size);
+        select.appendChild(opt);
+      }
+    }
+    select.value = String(currentSize);
+  }
   _pageRange(current, total, siblings) {
     const left = Math.max(2, current - siblings);
     const right = Math.min(total - 1, current + siblings);

package/dist/components/bv-portal-header/bv-portal-header.js

@@ -84,7 +84,7 @@ if (!customElements.get("bv-avatar")) {
 }
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
-var bv_button_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 these three properties per-instance:\n\n   HTML:       <bv-button style=\"--bv-button-bg: #e53e3e;\">\n   Angular:    <bv-button [style.--bv-button-bg]=\"brandColor\">\n   JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n   Hover is auto-computed from the base colors via color-mix().\n   Override --bv-button-bg-hover / --bv-button-border-color-hover\n   if you need explicit control over the hovered state.\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  /* Default values \u2014 map to global tokens (primary variant) */\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n  --bv-button-font-family: var(--bv-font-family-base);\n  --bv-button-font-size: var(--bv-font-size-sm);\n\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n  display: none !important;\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* \u2500\u2500 Variant 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\n   Each variant re-points the component tokens to different global\n   tokens. Apps can still override with inline styles \u2014 inline style\n   always wins due to higher specificity.\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\n:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-border-color: var(--bv-color-secondary);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n  --bv-button-bg: var(--bv-color-tertiary);\n  --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n  --bv-button-bg: var(--bv-color-danger);\n  --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: transparent;\n  --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   All visual properties read from the component-level tokens above.\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\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--bv-spacing-xs);\n  padding: 10px var(--bv-spacing-md);\n  min-height: 40px;\n  width: auto;\n  font-family: var(--bv-button-font-family);\n  font-size: var(--bv-button-font-size);\n  font-style: normal;\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  border: 1px solid var(--bv-button-border-color);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast),\n    opacity var(--bv-transition-fast);\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  outline: none;\n  box-sizing: border-box;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n  border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--bv-button-border-color);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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([size='sm']) .btn {\n  padding: 6px 12px;\n  min-height: 32px;\n  font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n  padding: 12px var(--bv-spacing-lg);\n  min-height: 48px;\n  font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-count {\n  opacity: 0.8;\n  font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var bv_button_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 these three properties per-instance:\n\n   HTML:       <bv-button style=\"--bv-button-bg: #e53e3e;\">\n   Angular:    <bv-button [style.--bv-button-bg]=\"brandColor\">\n   JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n   Hover is auto-computed from the base colors via color-mix().\n   Override --bv-button-bg-hover / --bv-button-border-color-hover\n   if you need explicit control over the hovered state.\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  /* Default values \u2014 map to global tokens (primary variant) */\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n  --bv-button-font-family: var(--bv-font-family-base);\n  --bv-button-font-size: var(--bv-font-size-sm);\n\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n  display: none !important;\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* \u2500\u2500 Variant 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\n   Each variant re-points the component tokens to different global\n   tokens. Apps can still override with inline styles \u2014 inline style\n   always wins due to higher specificity.\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\n:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-border-color: var(--bv-color-secondary);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n  --bv-button-bg: var(--bv-color-tertiary);\n  --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n  --bv-button-bg: var(--bv-color-danger);\n  --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: transparent;\n  --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n:host([variant='outline-secondary']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-neutral-700);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-300);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   All visual properties read from the component-level tokens above.\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\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--bv-spacing-xs);\n  padding: 10px var(--bv-spacing-md);\n  min-height: 40px;\n  width: auto;\n  font-family: var(--bv-button-font-family);\n  font-size: var(--bv-button-font-size);\n  font-style: normal;\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  border: 1px solid var(--bv-button-border-color);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast),\n    opacity var(--bv-transition-fast);\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  outline: none;\n  box-sizing: border-box;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n  border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--bv-button-border-color);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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([size='sm']) .btn {\n  padding: 6px 12px;\n  min-height: 32px;\n  font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n  padding: 12px var(--bv-spacing-lg);\n  min-height: 48px;\n  font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-count {\n  opacity: 0.8;\n  font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 
 // components/bv-icon/icons.ts
 var icons = {
@@ -115,6 +115,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -177,7 +178,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -254,6 +256,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {
@@ -296,6 +301,54 @@ if (!customElements.get("bv-button")) {
   customElements.define("bv-button", BvButton);
 }
 
+// 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/bv-icon/bv-icon.ts
+var BvIcon = class extends HTMLElement {
+  static observedAttributes = ["name", "size"];
+  _rendered = false;
+  _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];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._update();
+  }
+  _render() {
+    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);
+    this._update();
+  }
+  _update() {
+    if (!this._wrap) return;
+    const name = this.getAttribute("name") ?? "";
+    const size = parseInt(this.getAttribute("size") ?? "16", 10);
+    this._wrap.innerHTML = getIconSvg(name, size);
+  }
+};
+if (!customElements.get("bv-icon")) {
+  customElements.define("bv-icon", BvIcon);
+}
+
 // components/bv-user-row/bv-user-row.ts
 var BvUserRow = class extends HTMLElement {
   static observedAttributes = [
@@ -418,7 +471,12 @@ var BvUserRow = class extends HTMLElement {
       link.href = href;
       link.rel = "noopener noreferrer";
       if (target) link.setAttribute("target", target);
-      link.textContent = "Edit Profile";
+      const icon = document.createElement("bv-icon");
+      icon.setAttribute("name", "user-pen");
+      icon.setAttribute("aria-hidden", "true");
+      const label = document.createElement("span");
+      label.textContent = "Edit Profile";
+      link.append(icon, label);
       link.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
       });
@@ -426,7 +484,7 @@ var BvUserRow = class extends HTMLElement {
     } else {
       const btn = document.createElement("bv-button");
       btn.className = "edit-btn";
-      btn.setAttribute("icon", "edit");
+      btn.setAttribute("icon", "user-pen");
       btn.textContent = "Edit Profile";
       btn.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
@@ -532,7 +590,7 @@ if (!customElements.get("bv-promo-banner")) {
 }
 
 // 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.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";
+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">

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

@@ -1,5 +1,5 @@
 // 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.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";
+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">

package/dist/components/bv-segmented-control/bv-segmented-control.d.ts

@@ -0,0 +1,26 @@
+export type SegmentedControlOption = {
+    label: string;
+    value: string;
+};
+export interface SegmentedControlChangeDetail {
+    value: string;
+    label: string;
+}
+export declare class BvSegmentedControl extends HTMLElement {
+    static readonly observedAttributes: readonly ["options", "value", "label", "required"];
+    private _rendered;
+    private _labelEl;
+    private _containerEl;
+    private _options;
+    constructor();
+    get value(): string;
+    set value(v: string);
+    get required(): boolean;
+    set required(v: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private _render;
+    private _syncLabel;
+    private _syncOptions;
+    private _syncSelected;
+}