@bluevolt-tech/lumen 2.1.0 → 2.3.0

package/dist/components/bv-search-picker/bv-search-picker.js

@@ -0,0 +1,1458 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-search-picker/bv-search-picker.css
+var bv_search_picker_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: 1.5;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: var(--bv-spacing-xs-plus);\n}\n\n.field-label:empty {\n  display: none;\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  gap: var(--bv-spacing-xs);\n  width: max-content;\n  min-width: 120px;\n  max-width: 220px;\n  box-sizing: border-box;\n  min-height: var(--bv-control-height-lg);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-md);\n  background: var(--bv-color-neutral-0);\n  padding: 5px var(--bv-spacing-sm);\n  cursor: pointer;\n  font-family: inherit;\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: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n:host([disabled]) .trigger {\n  background: var(--bv-color-neutral-100);\n  cursor: not-allowed;\n}\n\n.trigger-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  height: 26px;\n  /* Symmetric padding so the pill still looks balanced with the clear button\n     hidden (count === 0) \u2014 an asymmetric right pad only reads correctly when\n     the clear button is actually there to visually fill the extra space. */\n  padding: 0 var(--bv-spacing-sm-plus);\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary-light);\n  color: var(--bv-color-primary-dark);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  white-space: nowrap;\n}\n\n.trigger-pill.mode-exclude {\n  background: var(--bv-color-danger-light);\n  color: var(--bv-color-danger-dark);\n}\n\n.trigger-pill-clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n/* The `display` rule above wins over the UA's [hidden]{display:none} (author\n   origin beats user-agent origin regardless of specificity) \u2014 restate it. */\n.trigger-pill-clear[hidden] {\n  display: none;\n}\n\n.trigger-pill-clear:hover {\n  /* Overlay derived from the neutral-900 token (matches the pattern\n     bv-alert-banner uses for its close-btn hover \u2014 token + color-mix, no\n     hardcoded rgba). Works over both include (primary-light) and exclude\n     (danger-light) pill backgrounds. */\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\n}\n\n/*\n * The pill-clear is a `span[role=\"button\"]` (not a native <button>) so that\n * it can nest inside the trigger button without producing invalid HTML.\n * Native <button> would give us a visible focus ring for free; role=\"button\"\n * doesn't, so paint one explicitly for keyboard users.\n */\n.trigger-pill-clear:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.trigger-caret {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-caret {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 BTN-10322 \xB7 cascade cleared affordance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.cleared-affordance {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  margin-top: var(--bv-spacing-xs-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  background: var(--bv-color-warning-light);\n  color: var(--bv-color-warning-dark);\n  border-radius: var(--bv-radius-md);\n  font-size: var(--bv-font-size-xs);\n  line-height: 1.4;\n}\n\n.cleared-affordance[hidden] {\n  display: none;\n}\n\n.cleared-affordance-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--bv-color-warning);\n  flex-shrink: 0;\n}\n\n.cleared-affordance-msg {\n  flex: 1;\n}\n\n.cleared-affordance-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--bv-radius-full);\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.cleared-affordance-dismiss:hover {\n  background: color-mix(in srgb, var(--bv-color-neutral-900) 12%, transparent);\n  opacity: 1;\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  width: 680px;\n  max-width: calc(100vw - var(--bv-spacing-md) * 2);\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([open]) .panel {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Smart positioning \u2014 flips to whichever side has room (see _positionPanel\n   in bv-search-picker.ts) instead of always overflowing past a screen edge. */\n:host([data-placement='top']) .panel {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n\n:host([data-align='right']) .panel {\n  left: auto;\n  right: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-100);\n}\n\n.panel-toolbar bv-toggle {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.panel-body {\n  display: flex;\n  min-height: 230px;\n}\n\n/* \u2500\u2500 Results pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.results-pane {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* bv-searchbox's :host is width:100%, so the inset has to be padding on this\n   wrapper \u2014 a margin on the searchbox itself would push it past the pane's\n   edge, since 100% resolves against the container regardless of the child's\n   own margin. */\n.results-search {\n  padding: var(--bv-spacing-sm);\n}\n\n.results-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n}\n\n.result-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n  cursor: pointer;\n}\n\n.result-row:hover {\n  background: var(--bv-color-primary-50);\n}\n\n/* BTN-10322 \xB7 a11y \u2014 keyboard-focused row (Arrow Up/Down) gets a visible\n   ring so a keyboard-only user can see where they are. `aria-selected`\n   mirrors the focus position so screen readers announce it. */\n.result-row:focus-visible,\n.result-row[aria-selected='true'] {\n  background: var(--bv-color-primary-50);\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.results-rows:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n}\n\n.result-name {\n  /* min-width:0 overrides the flex-item default of min-width:auto, which\n     would otherwise refuse to shrink below the text's natural width and\n     defeat the wrap/clamp below entirely. */\n  min-width: 0;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  font-weight: var(--bv-font-weight-semibold);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.result-inactive {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n}\n\n.result-add {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.results-empty {\n  padding: var(--bv-spacing-md-minus) var(--bv-spacing-md-minus);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n.results-empty:empty,\n.results-empty[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Loading skeleton (mirrors bv-filter-panel's pattern) \u2500\u2500\u2500 */\n\n.skeleton {\n  display: none;\n  flex-direction: column;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n:host([loading]) .results-rows,\n:host([loading]) .results-empty {\n  display: none;\n}\n\n.skeleton-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm-plus);\n  padding: var(--bv-spacing-sm) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-100);\n}\n\n.skeleton-line {\n  height: 11px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* \u2500\u2500 Basket pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.basket-pane {\n  width: 210px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bv-color-neutral-100);\n}\n\n.basket-header {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n}\n\n.basket-header-label {\n  font-size: var(--bv-font-size-xs);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-500);\n}\n\n.basket-clear-all {\n  margin-left: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.basket-clear-all:hover {\n  color: var(--bv-color-primary-dark);\n  text-decoration: underline;\n}\n\n.basket-clear-all[hidden] {\n  display: none;\n}\n\n.basket-list {\n  flex: 1;\n  max-height: 190px;\n  overflow-y: auto;\n  padding: 0 var(--bv-spacing-sm) var(--bv-spacing-sm);\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n}\n\n.basket-row {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-xs);\n  padding: var(--bv-spacing-xs) var(--bv-spacing-sm);\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-primary-light);\n}\n\n.basket-row.mode-exclude {\n  background: var(--bv-color-danger-light);\n}\n\n.basket-row-name {\n  min-width: 0;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.basket-row-remove {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.basket-empty {\n  padding: var(--bv-spacing-xs) var(--bv-spacing-2xs);\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-400);\n  line-height: 1.5;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-sm-plus) var(--bv-spacing-md-minus);\n  border-top: 1px solid var(--bv-color-neutral-200);\n  background: var(--bv-color-neutral-0);\n}\n\n.panel-footer bv-button {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.results-limit-note {\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-neutral-500);\n  line-height: 1.4;\n}\n";
+
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
+// components/_shared/dropdown-controller.ts
+function bindDropdownController(host, options = {}) {
+  if (!host.shadowRoot) {
+    throw new Error("bindDropdownController requires the host to have an open shadow root.");
+  }
+  const syncExpanded = () => {
+    var _a;
+    (_a = options.trigger) == null ? void 0 : _a.setAttribute("aria-expanded", host.hasAttribute("open") ? "true" : "false");
+  };
+  const open = () => {
+    var _a;
+    if (host.hasAttribute("open")) return;
+    (_a = options.onBeforeOpen) == null ? void 0 : _a.call(options);
+    host.setAttribute("open", "");
+    syncExpanded();
+    host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
+  };
+  const closeWithReason = (reason) => {
+    var _a;
+    if (!host.hasAttribute("open")) return;
+    if (options.canClose && !options.canClose(reason)) return;
+    host.removeAttribute("open");
+    syncExpanded();
+    host.dispatchEvent(
+      new CustomEvent("bv-dropdown-close", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
+    (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
+  };
+  const close = () => closeWithReason("programmatic");
+  const toggle = () => {
+    if (host.hasAttribute("open")) closeWithReason("programmatic");
+    else open();
+  };
+  const offClick = (e) => {
+    if (!host.hasAttribute("open")) return;
+    if (e.composedPath().includes(host)) return;
+    closeWithReason("outside-click");
+  };
+  document.addEventListener("click", offClick);
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") closeWithReason("escape");
+  };
+  host.addEventListener("keydown", onKeyDown);
+  const observer = new MutationObserver(syncExpanded);
+  observer.observe(host, { attributes: true, attributeFilter: ["open"] });
+  const cleanup = () => {
+    observer.disconnect();
+    document.removeEventListener("click", offClick);
+    host.removeEventListener("keydown", onKeyDown);
+  };
+  syncExpanded();
+  return { open, close, toggle, cleanup };
+}
+
+// components/bv-icon/icons.ts
+var icons = {
+  // Navigation
+  "chevron-up": `<path d="M18 15l-6-6-6 6"/>`,
+  "chevron-down": `<path d="M6 9l6 6 6-6"/>`,
+  "chevron-left": `<path d="M15 18l-6-6 6-6"/>`,
+  "chevron-right": `<path d="M9 18l6-6-6-6"/>`,
+  "arrow-left": `<path d="M19 12H5M12 19l-7-7 7-7"/>`,
+  "arrow-right": `<path d="M5 12h14M12 5l7 7-7 7"/>`,
+  "external-link": `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/>`,
+  // Actions
+  search: `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
+  edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+  download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/>`,
+  upload: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/>`,
+  plus: `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
+  minus: `<line x1="5" y1="12" x2="19" y2="12"/>`,
+  x: `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
+  check: `<polyline points="20,6 9,17 4,12"/>`,
+  trash: `<polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
+  copy: `<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>`,
+  refresh: `<polyline points="23,4 23,10 17,10"/><polyline points="1,20 1,14 7,14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>`,
+  filter: `<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46 22,3"/>`,
+  // Layout
+  list: `<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>`,
+  grid: `<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>`,
+  // 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"/>`,
+  "eye-off": `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>`,
+  bookmark: `<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
+  tag: `<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>`,
+  // Status / feedback
+  info: `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`,
+  "alert-triangle": `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+  "check-circle": `<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/>`,
+  "x-circle": `<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>`,
+  // Files / media
+  file: `<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13,2 13,9 20,9"/>`,
+  image: `<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/>`,
+  video: `<polygon points="23,7 16,12 23,17 23,7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`,
+  // Settings
+  settings: `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
+  lock: `<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+  unlock: `<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>`,
+  bell: `<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,
+  mail: `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>`,
+  link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`
+};
+function getIconSvg(name, size = 16) {
+  const raw = rawIcons[name];
+  if (raw)
+    return raw.replace(/width="[^"]*"/, `width="${size}"`).replace(/height="[^"]*"/, `height="${size}"`);
+  const paths = icons[name];
+  if (!paths) return "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+var rawIcons = {
+  // Module type (small, ~18px)
+  "module-scorm": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 15.03 16.28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.9014 4.60034L7.51368 8.14201M7.51368 8.14201L1.126 4.60034M7.51368 8.14201L7.5137 15.267M14.2771 11.1859V5.09812C14.2771 4.84113 14.2771 4.71264 14.2392 4.59804C14.2056 4.49666 14.1508 4.4036 14.0783 4.32508C13.9963 4.23633 13.8838 4.17393 13.6587 4.04913L8.09763 0.965793C7.88451 0.847624 7.77794 0.78854 7.66509 0.765376C7.56521 0.744875 7.46219 0.744875 7.36231 0.765376C7.24946 0.78854 7.1429 0.847624 6.92977 0.965793L1.36873 4.04913C1.14364 4.17393 1.0311 4.23633 0.949147 4.32508C0.876647 4.4036 0.82178 4.49666 0.788217 4.59804C0.750278 4.71264 0.750278 4.84113 0.750278 5.09812V11.1859C0.750278 11.4429 0.750278 11.5714 0.788217 11.686C0.82178 11.7874 0.876647 11.8805 0.949147 11.959C1.0311 12.0477 1.14364 12.1101 1.36873 12.2349L6.92977 15.3183C7.1429 15.4364 7.24946 15.4955 7.36231 15.5187C7.46219 15.5392 7.56521 15.5392 7.66509 15.5187C7.77794 15.4955 7.88451 15.4364 8.09763 15.3183L13.6587 12.2349C13.8838 12.1101 13.9963 12.0477 14.0783 11.959C14.1508 11.8805 14.2056 11.7874 14.2392 11.686C14.2771 11.5714 14.2771 11.4429 14.2771 11.1859Z"/></svg>`,
+  "module-assessment": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 13.72 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.507 6.1875V4.1625C12.507 2.90238 12.507 2.27232 12.2629 1.79102C12.0482 1.36766 11.7056 1.02345 11.2841 0.807736C10.8051 0.5625 10.1779 0.5625 8.92364 0.5625H4.14585C2.89156 0.5625 2.26441 0.5625 1.78534 0.807736C1.36393 1.02345 1.02132 1.36766 0.806601 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.806601 14.334C1.02132 14.7573 1.36393 15.1015 1.78534 15.3173C2.26441 15.5625 2.89156 15.5625 4.14585 15.5625H8.0278M8.0278 7.3125H3.54862M5.04168 10.3125H3.54862M9.52086 4.3125H3.54862M9.89413 10.3142C10.0257 9.93852 10.2853 9.62175 10.627 9.41998C10.9688 9.21821 11.3705 9.14445 11.7612 9.21178C12.1519 9.2791 12.5062 9.48315 12.7615 9.7878C13.0168 10.0925 13.1565 10.478 13.1559 10.8763C13.1559 12.0004 11.4775 12.5625 11.4775 12.5625M11.4991 14.8125H11.5066"/></svg>`,
+  "module-survey": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 14.56 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5.8125L5.04168 5.8125M14 1.3125L5.04168 1.3125M14 10.3125L5.04168 10.3125M2.05556 5.8125C2.05556 6.22671 1.72133 6.5625 1.30903 6.5625C0.896733 6.5625 0.5625 6.22671 0.5625 5.8125C0.5625 5.39829 0.896733 5.0625 1.30903 5.0625C1.72133 5.0625 2.05556 5.39829 2.05556 5.8125ZM2.05556 1.3125C2.05556 1.72671 1.72133 2.0625 1.30903 2.0625C0.896733 2.0625 0.5625 1.72671 0.5625 1.3125C0.5625 0.898286 0.896733 0.5625 1.30903 0.5625C1.72133 0.5625 2.05556 0.898286 2.05556 1.3125ZM2.05556 10.3125C2.05556 10.7267 1.72133 11.0625 1.30903 11.0625C0.896733 11.0625 0.5625 10.7267 0.5625 10.3125C0.5625 9.89829 0.896733 9.5625 1.30903 9.5625C1.72133 9.5625 2.05556 9.89829 2.05556 10.3125Z"/></svg>`,
+  "module-download": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 14.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.77433 3.56259L7.94155 1.88928C7.70187 1.40769 7.58202 1.16689 7.40323 0.990961C7.24512 0.835387 7.05457 0.717069 6.84535 0.644571C6.60877 0.562589 6.3408 0.562589 5.80485 0.562589H2.9514C2.1152 0.562589 1.69711 0.562589 1.37773 0.726079C1.09679 0.869889 0.868379 1.09936 0.725234 1.3816C0.562501 1.70247 0.562501 2.12251 0.562501 2.96259V3.56259M0.562501 3.56259H11.9098C13.164 3.56259 13.7912 3.56259 14.2703 3.80782C14.6917 4.02354 15.0343 4.36775 15.249 4.79111C15.4931 5.27241 15.4931 5.90247 15.4931 7.16259V10.4626C15.4931 11.7227 15.4931 12.3528 15.249 12.8341C15.0343 13.2574 14.6917 13.6016 14.2703 13.8174C13.7912 14.0626 13.164 14.0626 11.9098 14.0626H4.14585C2.89156 14.0626 2.26441 14.0626 1.78534 13.8174C1.36393 13.6016 1.02132 13.2574 0.806601 12.8341C0.562501 12.3528 0.562501 11.7227 0.562501 10.4626V3.56259ZM10.2674 8.81259L8.0278 11.0626L5.78821 8.81259M8.0278 11.0626V6.56259"/></svg>`,
+  "module-link": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 15.97 16.03" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.49261 8.76267C6.81321 9.19327 7.22223 9.54956 7.69194 9.80737C8.16166 10.0652 8.68106 10.2185 9.21494 10.2569C9.74882 10.2953 10.2847 10.2179 10.7862 10.03C11.2876 9.84207 11.743 9.54797 12.1214 9.16767L14.361 6.91767C15.041 6.21041 15.4172 5.26315 15.4087 4.27991C15.4002 3.29668 15.0076 2.35613 14.3156 1.66085C13.6235 0.965569 12.6873 0.571186 11.7086 0.562642C10.7299 0.554098 9.78705 0.932077 9.08307 1.61517L7.79903 2.89767M9.47873 7.26267C9.15813 6.83207 8.7491 6.47578 8.27939 6.21796C7.80968 5.96015 7.29027 5.80683 6.75639 5.76842C6.22252 5.73001 5.68666 5.80739 5.18517 5.99533C4.68369 6.18327 4.2283 6.47737 3.84989 6.85767L1.6103 9.10767C0.930367 9.81493 0.554137 10.7622 0.562641 11.7454C0.571146 12.7287 0.963705 13.6692 1.65577 14.3645C2.34783 15.0598 3.28403 15.4542 4.26272 15.4627C5.24141 15.4712 6.18428 15.0933 6.88827 14.4102L8.16483 13.1277"/></svg>`,
+  "module-adobe-connect": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 14.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.7605 0.56252L8.0278 3.56252L4.29515 0.56252M4.14585 14.0625H11.9098C13.164 14.0625 13.7912 14.0625 14.2703 13.8173C14.6917 13.6016 15.0343 13.2574 15.249 12.834C15.4931 12.3527 15.4931 11.7226 15.4931 10.4625V7.16252C15.4931 5.9024 15.4931 5.27234 15.249 4.79104C15.0343 4.36768 14.6917 4.02347 14.2703 3.80776C13.7912 3.56252 13.164 3.56252 11.9098 3.56252H4.14585C2.89156 3.56252 2.26441 3.56252 1.78534 3.80776C1.36393 4.02347 1.02132 4.36768 0.806601 4.79104C0.5625 5.27234 0.5625 5.9024 0.5625 7.16252V10.4625C0.5625 11.7226 0.5625 12.3527 0.806601 12.834C1.02132 13.2574 1.36393 13.6016 1.78534 13.8173C2.26441 14.0625 2.89156 14.0625 4.14585 14.0625Z"/></svg>`,
+  "module-video": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.4931 3.51103C15.4931 3.05667 15.4931 2.82949 15.4037 2.72429C15.3261 2.63301 15.2097 2.58457 15.0906 2.59399C14.9533 2.60484 14.7934 2.76548 14.4736 3.08676L11.7605 5.8125L14.4736 8.53824C14.7934 8.85952 14.9533 9.02016 15.0906 9.03101C15.2097 9.04043 15.3261 8.99199 15.4037 8.90071C15.4931 8.79552 15.4931 8.56833 15.4931 8.11397V3.51103ZM0.5625 4.1625C0.5625 2.90238 0.5625 2.27232 0.806601 1.79102C1.02132 1.36766 1.36393 1.02345 1.78534 0.807736C2.26441 0.5625 2.89156 0.5625 4.14585 0.5625H8.17711C9.4314 0.5625 10.0585 0.5625 10.5376 0.807736C10.959 1.02345 11.3016 1.36766 11.5164 1.79102C11.7605 2.27232 11.7605 2.90238 11.7605 4.1625V7.4625C11.7605 8.72262 11.7605 9.35268 11.5164 9.83398C11.3016 10.2573 10.959 10.6015 10.5376 10.8173C10.0585 11.0625 9.4314 11.0625 8.17711 11.0625H4.14584C2.89156 11.0625 2.26441 11.0625 1.78534 10.8173C1.36393 10.6015 1.02132 10.2573 0.806601 9.83398C0.5625 9.35268 0.5625 8.72262 0.5625 7.4625V4.1625Z"/></svg>`,
+  "module-upload": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 14.75 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.39 4.3125V4.1625C13.39 2.90238 13.39 2.27232 13.1278 1.79102C12.8972 1.36766 12.5293 1.02345 12.0767 0.807736C11.5622 0.5625 10.8887 0.5625 9.54172 0.5625H4.41074C3.06373 0.5625 2.39022 0.5625 1.87573 0.807736C1.42318 1.02345 1.05524 1.36766 0.824646 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.824646 14.334C1.05524 14.7573 1.42318 15.1015 1.87573 15.3173C2.39022 15.5625 3.06373 15.5625 4.41074 15.5625H7.37709M7.37709 7.3125H3.76936M6.57537 10.3125H3.76936M10.1831 4.3125H3.76936M11.7865 12.5625V8.4375C11.7865 7.81618 12.3249 7.3125 12.9891 7.3125C13.6533 7.3125 14.1917 7.81618 14.1917 8.4375V12.5625C14.1917 13.8051 13.1149 14.8125 11.7865 14.8125C10.4582 14.8125 9.38138 13.8051 9.38138 12.5625V9.5625"/></svg>`
+};
+
+// 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();
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_searchbox_default);
+  }
+  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;
+    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-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:host([size='sm']) .container {\n  height: var(--bv-control-height-md);\n  border-radius: var(--bv-radius-md);\n  padding: 3px;\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:host([size='sm']) .pill {\n  padding: 0 var(--bv-spacing-md-minus);\n  font-size: var(--bv-font-size-sm);\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\n/* Filled variant \u2014 selected pill uses the primary color instead of white */\n:host([variant='primary']) .pill.selected {\n  background: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n";
+
+// components/bv-segmented-control/bv-segmented-control.ts
+var BvSegmentedControl = class extends HTMLElement {
+  static observedAttributes = [
+    "options",
+    "value",
+    "label",
+    "required",
+    "size",
+    "variant"
+  ];
+  _rendered = false;
+  _labelEl = null;
+  _containerEl = null;
+  _options = [];
+  constructor() {
+    super();
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_segmented_control_default);
+  }
+  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");
+  }
+  get size() {
+    return this.getAttribute("size") ?? "md";
+  }
+  set size(v) {
+    this.setAttribute("size", v);
+  }
+  get variant() {
+    return this.getAttribute("variant") ?? "default";
+  }
+  set variant(v) {
+    this.setAttribute("variant", v);
+  }
+  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;
+    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);
+}
+
+// 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();
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_toggle_default);
+  }
+  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;
+    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);
+}
+
+// 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: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-button/bv-button.ts
+var BvButton = class extends HTMLElement {
+  static observedAttributes = [
+    "variant",
+    "size",
+    "disabled",
+    "loading",
+    "type",
+    "full-width",
+    "icon",
+    "icon-position",
+    "count",
+    "aria-label"
+  ];
+  constructor() {
+    super();
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_button_default);
+  }
+  // ── Accessors ────────────────────────────────────────────────
+  get variant() {
+    return this.getAttribute("variant") ?? "primary";
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get size() {
+    return this.getAttribute("size") ?? "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(value) {
+    if (value) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(value) {
+    if (value) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
+  get type() {
+    const t = this.getAttribute("type");
+    return t === "submit" || t === "reset" ? t : "button";
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  get fullWidth() {
+    return this.hasAttribute("full-width");
+  }
+  set fullWidth(value) {
+    if (value) this.setAttribute("full-width", "");
+    else this.removeAttribute("full-width");
+  }
+  // ── Lifecycle ────────────────────────────────────────────────
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(_name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this._render();
+  }
+  // ── Rendering ────────────────────────────────────────────────
+  _render() {
+    var _a;
+    const shadow = this.shadowRoot;
+    let btn = shadow.querySelector("button");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.setAttribute("part", "button");
+      btn.appendChild(document.createElement("slot"));
+      shadow.appendChild(btn);
+    }
+    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")) {
+        const spinner = document.createElement("span");
+        spinner.className = "spinner";
+        spinner.setAttribute("aria-hidden", "true");
+        btn.insertBefore(spinner, btn.querySelector("slot"));
+      }
+    } else {
+      btn.removeAttribute("aria-busy");
+      (_a = btn.querySelector(".spinner")) == null ? void 0 : _a.remove();
+    }
+    btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
+    const iconName = this.getAttribute("icon");
+    if (iconName && !this.loading) {
+      const svg = getIconSvg(iconName, 16);
+      if (svg) {
+        const iconEl = document.createElement("span");
+        iconEl.className = "btn-icon";
+        iconEl.innerHTML = svg;
+        const slot = btn.querySelector("slot");
+        if (this.getAttribute("icon-position") === "right") {
+          btn.appendChild(iconEl);
+        } else {
+          btn.insertBefore(iconEl, slot);
+        }
+      }
+    }
+    btn.querySelectorAll(".btn-count").forEach((el) => el.remove());
+    const countVal = this.getAttribute("count");
+    if (countVal && Number(countVal) > 0) {
+      const countEl = document.createElement("span");
+      countEl.className = "btn-count";
+      countEl.textContent = `(${countVal})`;
+      btn.appendChild(countEl);
+    }
+  }
+};
+if (!customElements.get("bv-button")) {
+  customElements.define("bv-button", BvButton);
+}
+
+// components/bv-search-picker/bv-search-picker.ts
+var SKELETON_ROW_COUNT = 5;
+var DEFAULT_DEBOUNCE_MS = 300;
+function parseItems(raw) {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+var BvSearchPicker = class extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "entity-label",
+    "search-placeholder",
+    "inactive-toggle-label",
+    "mode",
+    "min-query-length",
+    "debounce-ms",
+    "disabled",
+    "loading",
+    "show-inactive",
+    "open",
+    "results",
+    "results-total",
+    "results-request-id",
+    "basket",
+    // BTN-10322 — configurable label templates. All support `{count}` (basket
+    // size) and `{n}` (max results / current shown, per template) plus
+    // `{entity}` interpolation so consumers can translate without forking.
+    "label-all",
+    "label-count",
+    "label-except",
+    "label-only-these",
+    "label-all-except",
+    "label-empty-basket",
+    "label-clear-all",
+    "label-min-chars",
+    "label-no-results",
+    "label-results-cap",
+    "label-cleared"
+  ];
+  _rendered = false;
+  _query = "";
+  /**
+   * BTN-10322 — staged basket edited inside the panel. Kept separate from the
+   * committed `basket` attribute so the trigger pill doesn't flicker mid-edit
+   * (add/remove doesn't touch it) and so a cascade reset (`reset()`) has a
+   * clean staged copy to reseed from. Committed on Apply, AND automatically
+   * whenever the panel closes any other way (Escape / outside-click / trigger
+   * toggle) — see `onAfterClose` in `_render()`. Closing is what "confirms"
+   * the edit; Apply is just the explicit, no-need-to-move-your-mouse way to
+   * do the same thing.
+   */
+  _stagedBasket = [];
+  /** BTN-10322 — staged mode edited inside the panel. Committed on close, same as `_stagedBasket`. */
+  _stagedMode = "include";
+  /** BTN-10322 — monotonic id emitted with `bv-search`. The consumer echoes it via `results-request-id`; stale responses drop silently. */
+  _searchRequestId = 0;
+  /** BTN-10322 — timer handle for the internal debounce on `bv-search`. */
+  _searchDebounceHandle = null;
+  /**
+   * BTN-10322 — the reason to display in the cascade cleared affordance,
+   * or `null` when the banner is hidden. Set by `reset({ reason })`,
+   * cleared when the user next opens the panel or explicitly dismisses.
+   */
+  _clearedReason = null;
+  _labelEl = null;
+  _triggerEl = null;
+  _panelEl = null;
+  _pillEl = null;
+  _pillTextEl = null;
+  _pillClearEl = null;
+  _modeControlEl = null;
+  _inactiveToggleEl = null;
+  _searchEl = null;
+  _resultsRowsEl = null;
+  _resultsEmptyEl = null;
+  _resultsLimitNoteEl = null;
+  _basketHeaderLabelEl = null;
+  _basketClearAllEl = null;
+  _basketListEl = null;
+  _basketEmptyEl = null;
+  _resultsListEl = null;
+  _clearedAffordanceEl = null;
+  _clearedAffordanceMsgEl = null;
+  _dropdown = null;
+  constructor() {
+    super();
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_search_picker_default);
+  }
+  // ── Accessors ────────────────────────────────────────────
+  get mode() {
+    return this.getAttribute("mode") ?? "include";
+  }
+  /**
+   * Setting `mode` from outside is treated as a commit — it aligns the staged
+   * mode inside the panel with the new committed value. Useful for initialising
+   * from URL params or reverting from a saved report configuration. If the panel
+   * is currently open, the segmented control snaps to the new mode immediately;
+   * the user is expected to see this as an intentional external change, not an
+   * accidental override of their in-flight edit.
+   */
+  set mode(v) {
+    this.setAttribute("mode", v);
+  }
+  get entityLabel() {
+    return this.getAttribute("entity-label") ?? "items";
+  }
+  set entityLabel(v) {
+    this.setAttribute("entity-label", v);
+  }
+  get minQueryLength() {
+    const raw = Number(this.getAttribute("min-query-length"));
+    return Number.isFinite(raw) && raw > 0 ? raw : 3;
+  }
+  set minQueryLength(v) {
+    this.setAttribute("min-query-length", String(v));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    if (v) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(v) {
+    if (v) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
+  get showInactive() {
+    return this.hasAttribute("show-inactive");
+  }
+  set showInactive(v) {
+    if (v) this.setAttribute("show-inactive", "");
+    else this.removeAttribute("show-inactive");
+  }
+  get results() {
+    return parseItems(this.getAttribute("results"));
+  }
+  set results(v) {
+    this.setAttribute("results", JSON.stringify(v));
+  }
+  // The server's true match count, when it's more than `results.length` — the
+  // consumer sets this whenever their search caps what it returns (e.g. "top
+  // 200 of 1,000"). Omit it (or leave it <= results.length) when the search
+  // isn't capped; the results-limit note only ever appears when it's higher.
+  get resultsTotal() {
+    const raw = this.getAttribute("results-total");
+    if (raw === null) return null;
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : null;
+  }
+  set resultsTotal(v) {
+    if (v === null) this.removeAttribute("results-total");
+    else this.setAttribute("results-total", String(v));
+  }
+  // BTN-10322 — internal debounce for `bv-search`. Default 300ms. Consumers
+  // should NOT re-debounce upstream — this keeps them from accidentally
+  // hammering the backend on every keystroke.
+  get debounceMs() {
+    const raw = Number(this.getAttribute("debounce-ms"));
+    return Number.isFinite(raw) && raw >= 0 ? raw : DEFAULT_DEBOUNCE_MS;
+  }
+  set debounceMs(v) {
+    this.setAttribute("debounce-ms", String(v));
+  }
+  get basket() {
+    return parseItems(this.getAttribute("basket"));
+  }
+  set basket(v) {
+    this.setAttribute("basket", JSON.stringify(v));
+  }
+  // ── Lifecycle ────────────────────────────────────────────
+  connectedCallback() {
+    this._render();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._dropdown) == null ? void 0 : _a.cleanup();
+    if (this._searchDebounceHandle !== null) {
+      clearTimeout(this._searchDebounceHandle);
+      this._searchDebounceHandle = null;
+    }
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "label") this._syncLabel();
+    if (name === "entity-label") {
+      this._syncModeOptions();
+      this._syncTriggerSummary();
+      this._syncBasketEmptyText();
+      this._syncClearedAffordance();
+    }
+    if (name === "search-placeholder") this._syncSearchPlaceholder();
+    if (name === "inactive-toggle-label") this._syncInactiveToggleLabel();
+    if (name === "mode") {
+      this._stagedMode = this.mode;
+      this._syncMode();
+      this._syncTriggerSummary();
+    }
+    if (name === "disabled") this._syncDisabled();
+    if (name === "show-inactive") this._syncShowInactive();
+    if (name === "results" || name === "results-total" || name === "results-request-id" || name === "loading" || name === "min-query-length") {
+      this._syncResultsWithGuard(name);
+    }
+    if (name === "basket") {
+      this._stagedBasket = [...this.basket];
+      this._syncBasket();
+      this._syncTriggerSummary();
+    }
+    if (name === "label-all" || name === "label-count" || name === "label-except" || name === "label-clear-all" || name === "label-empty-basket") {
+      this._syncBasket();
+      this._syncTriggerSummary();
+    }
+    if (name === "label-only-these" || name === "label-all-except") this._syncModeOptions();
+    if (name === "label-min-chars" || name === "label-no-results") this._syncResultsEmptyText();
+    if (name === "label-results-cap") this._syncResultsLimitNote();
+    if (name === "label-cleared") this._syncClearedAffordance();
+  }
+  /**
+   * BTN-10322 — request-id guard. When `results` (or friends) are set from
+   * the consumer's async search, `results-request-id` must match the most
+   * recent id emitted by our own `bv-search`. Any mismatch means the
+   * response arrived out of order (user typed faster than the network) and
+   * we drop it silently to avoid rendering stale rows.
+   *
+   * `results-request-id` unset entirely is fine — consumers that don't
+   * bother with the guard behave as before (no correlation).
+   */
+  _syncResultsWithGuard(_triggeringAttr) {
+    const echoed = this.getAttribute("results-request-id");
+    if (echoed !== null && echoed !== "") {
+      const echoedN = Number(echoed);
+      if (Number.isFinite(echoedN) && echoedN !== this._searchRequestId) {
+        return;
+      }
+    }
+    this._syncResults();
+  }
+  // ── Render ───────────────────────────────────────────────
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    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", () => {
+      var _a;
+      if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
+    });
+    this._triggerEl = trigger;
+    const pill = document.createElement("span");
+    pill.className = "trigger-pill";
+    this._pillEl = pill;
+    const pillText = document.createElement("span");
+    this._pillTextEl = pillText;
+    const pillClear = document.createElement("span");
+    pillClear.className = "trigger-pill-clear";
+    pillClear.setAttribute("role", "button");
+    pillClear.setAttribute("aria-label", `Reset to all ${this.entityLabel}`);
+    pillClear.tabIndex = 0;
+    pillClear.innerHTML = getIconSvg("x", 10);
+    const activatePillClear = (e) => {
+      e.stopPropagation();
+      this._clearCommitted();
+    };
+    pillClear.addEventListener("click", activatePillClear);
+    pillClear.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      activatePillClear(e);
+    });
+    this._pillClearEl = pillClear;
+    pill.append(pillText, pillClear);
+    const caret = document.createElement("span");
+    caret.className = "trigger-caret";
+    caret.innerHTML = getIconSvg("chevron-down", 12);
+    trigger.append(pill, caret);
+    const panel = document.createElement("div");
+    panel.className = "panel";
+    panel.setAttribute("part", "panel");
+    this._panelEl = panel;
+    const toolbar = document.createElement("div");
+    toolbar.className = "panel-toolbar";
+    const modeControl = document.createElement("bv-segmented-control");
+    modeControl.setAttribute("size", "sm");
+    modeControl.setAttribute("variant", "primary");
+    modeControl.addEventListener("bv-change", (e) => {
+      e.stopPropagation();
+      this._stagedMode = e.detail.value;
+      this._syncBasketHeaderLabel();
+      this._syncBasketRowColors();
+      this._dispatchModeChange();
+    });
+    this._modeControlEl = modeControl;
+    const inactiveToggle = document.createElement("bv-toggle");
+    inactiveToggle.setAttribute("size", "sm");
+    inactiveToggle.addEventListener("bv-change", (e) => {
+      e.stopPropagation();
+      this.showInactive = e.detail.checked;
+      this._dispatchShowInactiveChange();
+      this._scheduleSearchDispatch();
+    });
+    this._inactiveToggleEl = inactiveToggle;
+    toolbar.append(modeControl, inactiveToggle);
+    const body = document.createElement("div");
+    body.className = "panel-body";
+    const resultsPane = document.createElement("div");
+    resultsPane.className = "results-pane";
+    const searchEl = document.createElement("bv-searchbox");
+    searchEl.addEventListener("bv-search", (e) => {
+      e.stopPropagation();
+      this._query = e.detail.value.trim();
+      this._syncResultsEmptyText();
+      this._scheduleSearchDispatch();
+    });
+    searchEl.addEventListener("keydown", (e) => {
+      const key = e.key;
+      if (key !== "ArrowDown") return;
+      if (!this._resultsRowsEl) return;
+      const firstRow = this._resultsRowsEl.querySelector(".result-row");
+      if (!firstRow) return;
+      e.preventDefault();
+      this._resultsRowsEl.querySelectorAll(".result-row").forEach((row, i) => row.setAttribute("aria-selected", i === 0 ? "true" : "false"));
+      firstRow.focus();
+    });
+    this._searchEl = searchEl;
+    const searchWrap = document.createElement("div");
+    searchWrap.className = "results-search";
+    searchWrap.appendChild(searchEl);
+    const resultsList = document.createElement("div");
+    resultsList.className = "results-list";
+    resultsList.setAttribute("aria-busy", "false");
+    this._resultsListEl = resultsList;
+    const skeleton = document.createElement("div");
+    skeleton.className = "skeleton";
+    skeleton.setAttribute("aria-hidden", "true");
+    skeleton.innerHTML = Array.from({ length: SKELETON_ROW_COUNT }).map(
+      (_, i) => `<div class="skeleton-row"><span class="skeleton-line" style="width:52px"></span><span class="skeleton-line" style="width:${96 + i * 17 % 60}px"></span></div>`
+    ).join("");
+    const resultsRows = document.createElement("div");
+    resultsRows.className = "results-rows";
+    resultsRows.setAttribute("role", "listbox");
+    resultsRows.setAttribute("aria-label", `${this.entityLabel} matching your search`);
+    resultsRows.tabIndex = 0;
+    resultsRows.addEventListener("keydown", (e) => this._onResultsKeyDown(e));
+    this._resultsRowsEl = resultsRows;
+    const resultsEmpty = document.createElement("div");
+    resultsEmpty.className = "results-empty";
+    this._resultsEmptyEl = resultsEmpty;
+    resultsList.append(skeleton, resultsRows, resultsEmpty);
+    resultsPane.append(searchWrap, resultsList);
+    const basketPane = document.createElement("div");
+    basketPane.className = "basket-pane";
+    const basketHeader = document.createElement("div");
+    basketHeader.className = "basket-header";
+    const basketHeaderLabel = document.createElement("span");
+    basketHeaderLabel.className = "basket-header-label";
+    this._basketHeaderLabelEl = basketHeaderLabel;
+    const basketClearAll = document.createElement("button");
+    basketClearAll.type = "button";
+    basketClearAll.className = "basket-clear-all";
+    basketClearAll.addEventListener("click", () => this._clearAllStaged());
+    this._basketClearAllEl = basketClearAll;
+    basketHeader.append(basketHeaderLabel, basketClearAll);
+    const basketList = document.createElement("div");
+    basketList.className = "basket-list";
+    this._basketListEl = basketList;
+    const basketEmpty = document.createElement("div");
+    basketEmpty.className = "basket-empty";
+    this._basketEmptyEl = basketEmpty;
+    basketList.appendChild(basketEmpty);
+    basketPane.append(basketHeader, basketList);
+    body.append(resultsPane, basketPane);
+    const footer = document.createElement("div");
+    footer.className = "panel-footer";
+    const limitNote = document.createElement("span");
+    limitNote.className = "results-limit-note";
+    this._resultsLimitNoteEl = limitNote;
+    const applyBtn = document.createElement("bv-button");
+    applyBtn.setAttribute("variant", "primary");
+    applyBtn.textContent = "Apply";
+    applyBtn.addEventListener("click", () => this._apply());
+    footer.append(limitNote, applyBtn);
+    panel.append(toolbar, body, footer);
+    const clearedAffordance = document.createElement("div");
+    clearedAffordance.className = "cleared-affordance";
+    clearedAffordance.setAttribute("role", "status");
+    clearedAffordance.setAttribute("aria-live", "polite");
+    clearedAffordance.hidden = true;
+    this._clearedAffordanceEl = clearedAffordance;
+    const clearedIcon = document.createElement("span");
+    clearedIcon.className = "cleared-affordance-icon";
+    clearedIcon.setAttribute("aria-hidden", "true");
+    clearedIcon.innerHTML = getIconSvg("info", 14);
+    const clearedMsg = document.createElement("span");
+    clearedMsg.className = "cleared-affordance-msg";
+    this._clearedAffordanceMsgEl = clearedMsg;
+    const clearedDismiss = document.createElement("button");
+    clearedDismiss.type = "button";
+    clearedDismiss.className = "cleared-affordance-dismiss";
+    clearedDismiss.setAttribute("aria-label", "Dismiss");
+    clearedDismiss.innerHTML = getIconSvg("x", 10);
+    clearedDismiss.addEventListener("click", () => this._dismissClearedAffordance());
+    clearedAffordance.append(clearedIcon, clearedMsg, clearedDismiss);
+    shadow.append(label, trigger, clearedAffordance, panel);
+    this._syncLabel();
+    this._syncModeOptions();
+    this._syncSearchPlaceholder();
+    this._syncInactiveToggleLabel();
+    this._stagedMode = this.mode;
+    this._stagedBasket = [...this.basket];
+    this._syncMode();
+    this._syncDisabled();
+    this._syncShowInactive();
+    this._syncResults();
+    this._syncBasket();
+    this._syncTriggerSummary();
+    this._dropdown = bindDropdownController(this, {
+      trigger,
+      onBeforeOpen: () => {
+        this._stagedMode = this.mode;
+        this._stagedBasket = [...this.basket];
+        if (this._clearedReason !== null) this._dismissClearedAffordance();
+        this._syncMode();
+        this._syncBasket();
+        this._syncResults();
+      },
+      onAfterClose: () => {
+        if (this._stagedDiffersFromCommitted()) this._commitStaged();
+      }
+    });
+    this.addEventListener("bv-open", () => {
+      var _a;
+      this._positionPanel();
+      (_a = this._searchEl) == null ? void 0 : _a.focus();
+    });
+  }
+  // Flips the panel to whichever side of the trigger actually has room, so it
+  // never renders off-screen near a viewport edge. Binary flip (not a
+  // continuous clamp) is enough here since the panel has a fixed max width/height.
+  _positionPanel() {
+    if (!this._triggerEl || !this._panelEl) return;
+    this.removeAttribute("data-placement");
+    this.removeAttribute("data-align");
+    const triggerRect = this._triggerEl.getBoundingClientRect();
+    const panelRect = this._panelEl.getBoundingClientRect();
+    const gap = 4;
+    const fitsBelow = triggerRect.bottom + gap + panelRect.height <= window.innerHeight;
+    const fitsAbove = triggerRect.top - gap - panelRect.height >= 0;
+    if (!fitsBelow && fitsAbove) this.setAttribute("data-placement", "top");
+    const fitsLeftAligned = triggerRect.left + panelRect.width <= window.innerWidth;
+    if (!fitsLeftAligned) this.setAttribute("data-align", "right");
+  }
+  // ── Sync helpers ─────────────────────────────────────────
+  _syncLabel() {
+    if (!this._labelEl) return;
+    this._labelEl.textContent = this.getAttribute("label") ?? "";
+  }
+  _syncModeOptions() {
+    if (!this._modeControlEl) return;
+    const entity = this.entityLabel;
+    const onlyThese = this._interp(this.getAttribute("label-only-these") ?? "Only these {entity}", {
+      entity
+    });
+    const allExcept = this._interp(
+      this.getAttribute("label-all-except") ?? "All {entity} except\u2026",
+      { entity }
+    );
+    const options = JSON.stringify([
+      { label: onlyThese, value: "include" },
+      { label: allExcept, value: "exclude" }
+    ]);
+    this._modeControlEl.setAttribute("options", options);
+    this._modeControlEl.setAttribute("value", this._stagedMode);
+    this._syncBasketEmptyText();
+    this._syncResultsEmptyText();
+  }
+  _syncSearchPlaceholder() {
+    if (!this._searchEl) return;
+    this._searchEl.setAttribute(
+      "placeholder",
+      this.getAttribute("search-placeholder") ?? "Search\u2026"
+    );
+  }
+  _syncInactiveToggleLabel() {
+    if (!this._inactiveToggleEl) return;
+    this._inactiveToggleEl.setAttribute(
+      "label",
+      this.getAttribute("inactive-toggle-label") ?? "Show Inactive"
+    );
+  }
+  _syncMode() {
+    if (!this._modeControlEl) return;
+    this._modeControlEl.setAttribute("value", this._stagedMode);
+    this._syncBasketHeaderLabel();
+    this._syncBasketRowColors();
+    this._syncTriggerSummary();
+  }
+  _syncDisabled() {
+    if (!this._triggerEl) return;
+    this._triggerEl.disabled = this.disabled;
+    if (this.disabled) this._triggerEl.setAttribute("aria-disabled", "true");
+    else this._triggerEl.removeAttribute("aria-disabled");
+  }
+  _syncShowInactive() {
+    if (!this._inactiveToggleEl) return;
+    if (this.showInactive) this._inactiveToggleEl.setAttribute("checked", "");
+    else this._inactiveToggleEl.removeAttribute("checked");
+  }
+  _syncResults() {
+    if (!this._resultsRowsEl || !this._resultsEmptyEl) return;
+    if (this._resultsListEl) {
+      this._resultsListEl.setAttribute("aria-busy", this.loading ? "true" : "false");
+    }
+    const results = this.results;
+    const stagedIds = new Set(this._stagedBasket.map((c) => c.id));
+    this._resultsRowsEl.innerHTML = "";
+    for (const item of results) {
+      if (stagedIds.has(item.id)) continue;
+      const row = document.createElement("div");
+      row.className = "result-row";
+      row.dataset["id"] = item.id;
+      row.title = item.name;
+      row.setAttribute("role", "option");
+      row.setAttribute("aria-selected", "false");
+      row.tabIndex = -1;
+      const nameEl = document.createElement("span");
+      nameEl.className = "result-name";
+      nameEl.textContent = item.name;
+      row.appendChild(nameEl);
+      if (item.inactive) {
+        const inactiveEl = document.createElement("span");
+        inactiveEl.className = "result-inactive";
+        inactiveEl.textContent = "(Inactive)";
+        row.appendChild(inactiveEl);
+      }
+      const addBtn = document.createElement("span");
+      addBtn.className = "result-add";
+      addBtn.setAttribute("aria-hidden", "true");
+      addBtn.innerHTML = getIconSvg("plus", 16);
+      row.appendChild(addBtn);
+      row.addEventListener("click", () => this._addBasket(item));
+      this._resultsRowsEl.appendChild(row);
+    }
+    this._syncResultsEmptyText();
+    this._syncResultsLimitNote();
+  }
+  _syncResultsEmptyText() {
+    if (!this._resultsEmptyEl || !this._resultsRowsEl) return;
+    const isEmpty = !this.loading && this._resultsRowsEl.children.length === 0;
+    this._resultsEmptyEl.hidden = !isEmpty;
+    if (!isEmpty) return;
+    if (this._query.length < this.minQueryLength) {
+      this._resultsEmptyEl.textContent = this._interp(
+        this.getAttribute("label-min-chars") ?? "Type at least {n} characters to search.",
+        { n: this.minQueryLength }
+      );
+    } else {
+      this._resultsEmptyEl.textContent = this._interp(
+        this.getAttribute("label-no-results") ?? "No {entity} found.",
+        { entity: this.entityLabel }
+      );
+    }
+  }
+  // Surfaces when the consumer's search caps what it returns (e.g. a server
+  // that found 1,000 matches but only sent the top 200) — otherwise a user
+  // has no way to know their match wasn't in the list and just isn't there.
+  // Copy pushes the user toward the fix ("add more characters to narrow"),
+  // not just informing them of the cap.
+  _syncResultsLimitNote() {
+    if (!this._resultsLimitNoteEl) return;
+    const shown = this.results.length;
+    const total = this.resultsTotal;
+    const isCapped = !this.loading && total !== null && total > shown;
+    this._resultsLimitNoteEl.hidden = !isCapped;
+    if (!isCapped) return;
+    const template = this.getAttribute("label-results-cap") ?? "Showing first {n} results. Add more characters to narrow.";
+    this._resultsLimitNoteEl.textContent = this._interp(template, { n: shown });
+  }
+  // BTN-10322 — the basket pane renders the STAGED basket (edited live in
+  // the panel; committed to the `basket` attribute when the panel closes —
+  // see onAfterClose). The committed `basket` attribute is what the trigger
+  // pill / _syncTriggerSummary reflects in the meantime.
+  _syncBasket() {
+    if (!this._basketListEl || !this._basketEmptyEl || !this._basketClearAllEl) return;
+    const basket = this._stagedBasket;
+    this._basketListEl.querySelectorAll(".basket-row").forEach((row) => row.remove());
+    for (const item of basket) {
+      const row = document.createElement("div");
+      row.className = "basket-row";
+      row.dataset["id"] = item.id;
+      row.title = item.name;
+      const nameEl = document.createElement("span");
+      nameEl.className = "basket-row-name";
+      nameEl.textContent = item.name;
+      const removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.className = "basket-row-remove";
+      removeBtn.setAttribute("aria-label", `Remove ${item.name}`);
+      removeBtn.innerHTML = getIconSvg("x", 10);
+      removeBtn.addEventListener("click", () => this._removeBasket(item.id));
+      row.append(nameEl, removeBtn);
+      this._basketListEl.appendChild(row);
+    }
+    this._basketClearAllEl.hidden = basket.length === 0;
+    this._basketClearAllEl.textContent = this._interp(
+      this.getAttribute("label-clear-all") ?? "Clear all ({count})",
+      { count: basket.length }
+    );
+    this._basketEmptyEl.hidden = basket.length > 0;
+    this._syncBasketRowColors();
+    this._syncBasketHeaderLabel();
+    this._syncBasketEmptyText();
+    this._syncResults();
+  }
+  _syncBasketHeaderLabel() {
+    if (!this._basketHeaderLabelEl) return;
+    this._basketHeaderLabelEl.textContent = this._stagedMode === "exclude" ? "Excluded" : "Included";
+  }
+  _syncBasketRowColors() {
+    if (!this._basketListEl) return;
+    const isExclude = this._stagedMode === "exclude";
+    this._basketListEl.querySelectorAll(".basket-row").forEach((row) => row.classList.toggle("mode-exclude", isExclude));
+  }
+  _syncBasketEmptyText() {
+    if (!this._basketEmptyEl) return;
+    const template = this.getAttribute("label-empty-basket") ?? "Nothing yet \u2014 report runs on all {entity}.";
+    this._basketEmptyEl.textContent = this._interp(template, { entity: this.entityLabel });
+  }
+  // The trigger pill / summary reflects COMMITTED state (the `basket` +
+  // `mode` attributes) — staged edits inside the panel do not update it
+  // until Apply commits them.
+  _syncTriggerSummary() {
+    if (!this._pillTextEl || !this._pillEl || !this._pillClearEl) return;
+    const basket = this.basket;
+    const count = basket.length;
+    const isExclude = this.mode === "exclude";
+    const entity = this.entityLabel;
+    if (count === 0) {
+      this._pillTextEl.textContent = this._interp(
+        this.getAttribute("label-all") ?? "All {entity}",
+        { entity }
+      );
+    } else if (isExclude) {
+      this._pillTextEl.textContent = this._interp(
+        this.getAttribute("label-except") ?? "All except {count}",
+        { count, entity }
+      );
+    } else {
+      this._pillTextEl.textContent = this._interp(
+        this.getAttribute("label-count") ?? "{count} selected",
+        { count, entity }
+      );
+    }
+    this._pillEl.classList.toggle("mode-exclude", count > 0 && isExclude);
+    this._pillClearEl.hidden = count === 0;
+  }
+  // BTN-10322 — interpolate `{count}`, `{n}`, `{entity}` tokens in a
+  // consumer-provided template. `{n}` is a synonym of `{count}` so consumers
+  // can pick whichever reads better in their locale.
+  _interp(template, tokens = {}) {
+    let out = template;
+    if (tokens.count !== void 0) {
+      out = out.replace(/\{count\}/g, String(tokens.count));
+      out = out.replace(/\{n\}/g, String(tokens.n ?? tokens.count));
+    } else if (tokens.n !== void 0) {
+      out = out.replace(/\{n\}/g, String(tokens.n));
+    }
+    if (tokens.entity !== void 0) {
+      out = out.replace(/\{entity\}/g, tokens.entity);
+    }
+    return out;
+  }
+  // ── Staged state mutations (inside the panel) ────────────
+  // Every mutation below edits the STAGED state only — the committed `basket`
+  // and `mode` attributes don't move immediately, so the trigger pill doesn't
+  // update on every single add/remove/mode-toggle keystroke. They commit when
+  // the panel closes, by whichever path: Apply, Escape, outside-click, or the
+  // trigger toggle (see `onAfterClose` in `_render()`). Nothing is discarded —
+  // closing the panel is itself the confirmation.
+  _addBasket(item) {
+    if (this._stagedBasket.some((c) => c.id === item.id)) return;
+    this._stagedBasket = [...this._stagedBasket, item];
+    this._syncBasket();
+    this._dispatchBasketChange();
+  }
+  _removeBasket(id) {
+    this._stagedBasket = this._stagedBasket.filter((c) => c.id !== id);
+    this._syncBasket();
+    this._dispatchBasketChange();
+  }
+  _clearAllStaged() {
+    this._stagedBasket = [];
+    this._syncBasket();
+    this._dispatchBasketChange();
+  }
+  /**
+   * The trigger's pill-clear (`x`) is an explicit user action that means "back
+   * to the neutral state". Unlike the basket's "Clear all" (which only touches
+   * staged), this commits immediately — the pill lives on the trigger, which
+   * only reflects committed state. Dispatches `bv-apply` because a commit
+   * happened.
+   */
+  _clearCommitted() {
+    var _a;
+    this._query = "";
+    (_a = this._searchEl) == null ? void 0 : _a.setAttribute("value", "");
+    this.basket = [];
+    this._dispatchApply();
+  }
+  // ── Commit ───────────────────────────────────────────────
+  _stagedDiffersFromCommitted() {
+    if (this._stagedMode !== this.mode) return true;
+    const committed = this.basket;
+    if (committed.length !== this._stagedBasket.length) return true;
+    const committedIds = new Set(committed.map((c) => c.id));
+    return this._stagedBasket.some((c) => !committedIds.has(c.id));
+  }
+  // Pushes staged → committed and fires `bv-apply`. Shared by the Apply
+  // button and by `onAfterClose` (any other close path) — see the comment on
+  // `_stagedBasket` for why closing itself commits.
+  _commitStaged() {
+    this.mode = this._stagedMode;
+    this.basket = [...this._stagedBasket];
+    this._dispatchApply();
+  }
+  _apply() {
+    var _a;
+    this._commitStaged();
+    (_a = this._dropdown) == null ? void 0 : _a.close();
+  }
+  // ── Event dispatch ───────────────────────────────────────
+  _dispatchBasketChange() {
+    this.dispatchEvent(
+      new CustomEvent("bv-basket-change", {
+        bubbles: true,
+        composed: true,
+        detail: { mode: this._stagedMode, basket: [...this._stagedBasket] }
+      })
+    );
+  }
+  _dispatchModeChange() {
+    this.dispatchEvent(
+      new CustomEvent("bv-mode-change", {
+        bubbles: true,
+        composed: true,
+        detail: { mode: this._stagedMode }
+      })
+    );
+  }
+  _dispatchShowInactiveChange() {
+    this.dispatchEvent(
+      new CustomEvent("bv-show-inactive-change", {
+        bubbles: true,
+        composed: true,
+        detail: { showInactive: this.showInactive }
+      })
+    );
+  }
+  _dispatchApply() {
+    this.dispatchEvent(
+      new CustomEvent("bv-apply", {
+        bubbles: true,
+        composed: true,
+        detail: { mode: this.mode, basket: this.basket }
+      })
+    );
+  }
+  _dispatchSearch() {
+    if (this._query.length < this.minQueryLength) return;
+    this._searchRequestId += 1;
+    const requestId = this._searchRequestId;
+    this.dispatchEvent(
+      new CustomEvent("bv-search", {
+        bubbles: true,
+        composed: true,
+        detail: { query: this._query, requestId }
+      })
+    );
+  }
+  // BTN-10322 — internal debounce. Runs the search only after the user
+  // stops typing for `debounce-ms` (default 300ms). Also fires on show-inactive
+  // toggle, since that changes the search space.
+  _scheduleSearchDispatch() {
+    if (this._searchDebounceHandle !== null) {
+      clearTimeout(this._searchDebounceHandle);
+    }
+    this._searchDebounceHandle = setTimeout(() => {
+      this._searchDebounceHandle = null;
+      this._dispatchSearch();
+    }, this.debounceMs);
+  }
+  /**
+   * BTN-10322 — Arrow Up/Down navigation between result rows; Enter or Space
+   * adds the currently-focused row to the staged basket. Home/End jump to
+   * first/last. Escape delegates to the shared dropdown-controller (already
+   * wired on the host).
+   *
+   * `role="option"` rows use `aria-selected` only to communicate focus
+   * position to assistive tech — clicking / Enter also fires the add flow,
+   * which then removes the row from the results list.
+   */
+  _onResultsKeyDown(e) {
+    var _a;
+    if (!this._resultsRowsEl) return;
+    const rows = Array.from(this._resultsRowsEl.querySelectorAll(".result-row"));
+    if (rows.length === 0) return;
+    const currentIdx = rows.findIndex((row) => row.getAttribute("aria-selected") === "true");
+    const focusRow = (idx) => {
+      var _a2;
+      const bounded = Math.max(0, Math.min(idx, rows.length - 1));
+      rows.forEach((row, i) => row.setAttribute("aria-selected", i === bounded ? "true" : "false"));
+      (_a2 = rows[bounded]) == null ? void 0 : _a2.focus();
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusRow(currentIdx < 0 ? 0 : currentIdx + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusRow(currentIdx <= 0 ? 0 : currentIdx - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusRow(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusRow(rows.length - 1);
+        break;
+      case "Enter":
+      case " ": {
+        if (currentIdx < 0) return;
+        e.preventDefault();
+        const focusedId = (_a = rows[currentIdx]) == null ? void 0 : _a.dataset["id"];
+        if (!focusedId) return;
+        const item = this.results.find((r) => r.id === focusedId);
+        if (item) this._addBasket(item);
+        break;
+      }
+    }
+  }
+  // ── Public API (consumer-facing methods) ────────────────
+  /**
+   * BTN-10322 — count of the currently committed basket. Consumers can read
+   * this to render an external counter badge without duplicating state.
+   */
+  get count() {
+    return this.basket.length;
+  }
+  /**
+   * BTN-10322 — cascade reset from outside the panel. This is THE canonical
+   * way for a consumer to clear the picker in response to an upstream filter
+   * change (e.g. CET Report when Categories or Groups change). It:
+   *
+   * - clears the committed `basket` and the staged edit,
+   * - clears `results` + `resultsTotal` (post-cascade the last search's
+   *   rows are stale — leaving them visible next to the cleared banner
+   *   is confusing),
+   * - clears the internal search query,
+   * - surfaces the "cleared" affordance banner with `{ reason }` interpolated
+   *   into the copy,
+   * - dispatches `bv-cleared` with `{ reason }`.
+   *
+   * Does NOT dispatch `bv-apply` — this is not a user commit, it's an
+   * out-of-band cascade. The consumer that triggered it already knows the
+   * basket was cleared.
+   *
+   * The affordance auto-hides the next time the user opens the panel or
+   * dismisses it explicitly via the banner's close button.
+   *
+   * **Prefer this over `element.basket = []`** — the setter is silent (no
+   * bv-cleared, no visible affordance) and is intended for state restoration
+   * from URL/deep-link, not for cascade reset.
+   */
+  reset({ reason }) {
+    var _a;
+    this.basket = [];
+    this._stagedBasket = [];
+    this._query = "";
+    (_a = this._searchEl) == null ? void 0 : _a.setAttribute("value", "");
+    this.results = [];
+    this.resultsTotal = null;
+    this._clearedReason = reason;
+    this._syncClearedAffordance();
+    this.dispatchEvent(
+      new CustomEvent("bv-cleared", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
+  }
+  _syncClearedAffordance() {
+    if (!this._clearedAffordanceEl || !this._clearedAffordanceMsgEl) return;
+    if (this._clearedReason === null) {
+      this._clearedAffordanceEl.hidden = true;
+      return;
+    }
+    const template = this.getAttribute("label-cleared") ?? "Your {entity} selection was cleared ({reason}).";
+    let msg = template;
+    msg = msg.replace(/\{entity\}/g, this.entityLabel);
+    msg = msg.replace(/\{reason\}/g, this._clearedReason);
+    this._clearedAffordanceMsgEl.textContent = msg;
+    this._clearedAffordanceEl.hidden = false;
+  }
+  _dismissClearedAffordance() {
+    this._clearedReason = null;
+    this._syncClearedAffordance();
+  }
+};
+if (!customElements.get("bv-search-picker")) {
+  customElements.define("bv-search-picker", BvSearchPicker);
+}
+export {
+  BvSearchPicker
+};