@bluevolt-tech/lumen 1.5.2 → 2.0.1

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 = {
@@ -590,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;
+}

package/dist/components/bv-segmented-control/bv-segmented-control.js

@@ -0,0 +1,128 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-segmented-control/bv-segmented-control.css
+var bv_segmented_control_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\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.field-label[hidden] {\n  display: none;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  height: 44px;\n  box-sizing: border-box;\n  background: var(--bv-color-neutral-100);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 var(--bv-spacing-md);\n  border: none;\n  border-radius: calc(var(--bv-radius-lg) - 3px);\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    color var(--bv-transition-fast),\n    background var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.pill:hover:not(.selected) {\n  color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-neutral-900);\n  box-shadow: var(--bv-shadow-sm);\n}\n";
+
+// components/bv-segmented-control/bv-segmented-control.ts
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_segmented_control_default);
+  }
+  return _sheet;
+}
+var BvSegmentedControl = class extends HTMLElement {
+  static observedAttributes = ["options", "value", "label", "required"];
+  _rendered = false;
+  _labelEl = null;
+  _containerEl = null;
+  _options = [];
+  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 required() {
+    return this.hasAttribute("required");
+  }
+  set required(v) {
+    if (v) this.setAttribute("required", "");
+    else this.removeAttribute("required");
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "options") this._syncOptions();
+    if (name === "value") this._syncSelected();
+    if (name === "label" || name === "required") this._syncLabel();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_segmented_control_default;
+      shadow.appendChild(s);
+    }
+    const labelEl = document.createElement("span");
+    labelEl.className = "field-label";
+    this._labelEl = labelEl;
+    const container = document.createElement("div");
+    container.className = "container";
+    container.setAttribute("role", "group");
+    this._containerEl = container;
+    shadow.append(labelEl, container);
+    this._syncLabel();
+    this._syncOptions();
+  }
+  _syncLabel() {
+    if (!this._labelEl || !this._containerEl) 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;
+    if (text) this._containerEl.setAttribute("aria-label", text);
+    else this._containerEl.removeAttribute("aria-label");
+  }
+  _syncOptions() {
+    if (!this._containerEl) return;
+    try {
+      this._options = JSON.parse(this.getAttribute("options") ?? "[]");
+    } catch {
+      this._options = [];
+    }
+    this._containerEl.innerHTML = "";
+    for (const opt of this._options) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "pill";
+      btn.dataset["value"] = opt.value;
+      btn.textContent = opt.label;
+      btn.setAttribute("aria-pressed", "false");
+      btn.addEventListener("click", () => {
+        if (this.value === opt.value) return;
+        this.value = opt.value;
+        this.dispatchEvent(
+          new CustomEvent("bv-change", {
+            bubbles: true,
+            composed: true,
+            detail: { value: opt.value, label: opt.label }
+          })
+        );
+      });
+      this._containerEl.appendChild(btn);
+    }
+    this._syncSelected();
+  }
+  _syncSelected() {
+    if (!this._containerEl) return;
+    const current = this.value;
+    for (const btn of this._containerEl.querySelectorAll(".pill")) {
+      const isSelected = btn.dataset["value"] === current;
+      btn.classList.toggle("selected", isSelected);
+      btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
+    }
+  }
+};
+if (!customElements.get("bv-segmented-control")) {
+  customElements.define("bv-segmented-control", BvSegmentedControl);
+}
+export {
+  BvSegmentedControl
+};

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

@@ -0,0 +1,41 @@
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectChangeDetail {
+    value: string;
+    label: string;
+}
+export declare class BvSelect extends HTMLElement {
+    static readonly observedAttributes: readonly ["label", "options", "value", "placeholder", "error", "required", "disabled"];
+    private _rendered;
+    private _labelEl;
+    private _triggerEl;
+    private _triggerLabelEl;
+    private _panelEl;
+    private _errorEl;
+    private _options;
+    private _value;
+    private _offClick;
+    constructor();
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+    private _toggle;
+    private _open;
+    private _close;
+    private _syncLabel;
+    private _syncTriggerLabel;
+    private _renderOptions;
+    private _syncSelected;
+    private _syncError;
+    private _syncDisabled;
+    private _select;
+}