@bluevolt-tech/lumen 1.3.2 → 1.4.1

package/dist/components/bv-filter-panel/bv-filter-panel.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-filter-panel/bv-filter-panel.css
-var bv_filter_panel_default = ":host {\n  display: block;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.panel-title {\n  margin: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.clear-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.clear-btn:hover {\n  text-decoration: underline;\n}\n\n.groups {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n.group {\n}\n\n.group-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding-bottom: var(--bv-spacing-sm);\n}\n\n.group-label {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.group-chevron {\n  width: 20px;\n  height: 20px;\n  color: var(--bv-color-neutral-500);\n  transition: transform var(--bv-transition-fast);\n}\n\n.group-chevron.collapsed {\n  transform: rotate(180deg);\n}\n\n.group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.group-options.hidden {\n  display: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-xs);\n}\n\n.option bv-checkbox {\n  flex: 1;\n  min-width: 0;\n}\n\n.option-count {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bv-spacing-sm);\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-full);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n";
+var bv_filter_panel_default = ":host {\n  display: block;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n}\n\n/* Self-hide when there are no groups to show. */\n:host([empty]) {\n  display: none;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.panel-title {\n  margin: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.clear-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.clear-btn:hover {\n  text-decoration: underline;\n}\n\n.groups {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n.group {\n}\n\n.group-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding-bottom: var(--bv-spacing-sm);\n}\n\n.group-label {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.group-chevron {\n  width: 20px;\n  height: 20px;\n  color: var(--bv-color-neutral-500);\n  transition: transform var(--bv-transition-fast);\n}\n\n.group-chevron.collapsed {\n  transform: rotate(180deg);\n}\n\n.group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.group-options.hidden {\n  display: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-xs);\n}\n\n.option bv-checkbox {\n  flex: 1;\n  min-width: 0;\n}\n\n.option-count {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bv-spacing-sm);\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-full);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Loading skeleton */\n.skeleton {\n  display: none;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n:host([loading]) .groups {\n  display: none;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n.skeleton-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n}\n\n.skeleton-line {\n  height: 14px;\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.skeleton-heading {\n  height: 20px;\n  width: 55%;\n  margin-bottom: 4px;\n}\n\n.skeleton-short-line {\n  width: 70%;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-checkbox/bv-checkbox.css
 var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Size tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.wrap {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n}\n";
@@ -93,10 +93,18 @@ var CHEVRON = `<svg class="group-chevron" viewBox="0 0 20 20" fill="none" xmlns=
   <path d="M5 12.5l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 var BvFilterPanel = class extends HTMLElement {
-  static observedAttributes = ["groups"];
+  static observedAttributes = ["groups", "loading"];
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(v) {
+    if (v) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
   _rendered = false;
   _groups = [];
   _groupsEl = null;
+  _skeletonEl = null;
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
@@ -115,6 +123,9 @@ var BvFilterPanel = class extends HTMLElement {
       this._parseGroups();
       if (this._rendered) this._buildGroups();
     }
+    if (name === "loading" && this._rendered) {
+      this._syncLoading();
+    }
   }
   _parseGroups() {
     try {
@@ -153,12 +164,26 @@ var BvFilterPanel = class extends HTMLElement {
     this._groupsEl = document.createElement("div");
     this._groupsEl.className = "groups";
     this._buildGroups();
-    shadow.append(header, this._groupsEl);
+    this._skeletonEl = document.createElement("div");
+    this._skeletonEl.className = "skeleton";
+    this._skeletonEl.setAttribute("aria-hidden", "true");
+    this._skeletonEl.innerHTML = Array.from({ length: 3 }).map(
+      () => '<div class="skeleton-group"><div class="skeleton-line skeleton-heading"></div><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line skeleton-short-line"></div></div>'
+    ).join("");
+    shadow.append(header, this._groupsEl, this._skeletonEl);
+    this._syncLoading();
+  }
+  _syncLoading() {
+    const loading = this.loading;
+    this.setAttribute("aria-busy", loading ? "true" : "false");
   }
   _buildGroups() {
     if (!this._groupsEl) return;
     this._groupsEl.innerHTML = "";
+    let rendered = 0;
     for (const group of this._groups) {
+      if (!group.options || group.options.length === 0) continue;
+      rendered++;
       const expanded = group.expanded !== false;
       const groupEl = document.createElement("div");
       groupEl.className = "group";
@@ -212,6 +237,8 @@ var BvFilterPanel = class extends HTMLElement {
       groupEl.append(groupHeader, optionsEl);
       this._groupsEl.appendChild(groupEl);
     }
+    if (rendered === 0) this.setAttribute("empty", "");
+    else this.removeAttribute("empty");
   }
 };
 if (!customElements.get("bv-filter-panel")) {

package/dist/components/bv-portal-header/bv-portal-header.d.ts

@@ -8,5 +8,6 @@ export declare class BvPortalHeader extends HTMLElement {
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _propagate;
     private _render;
 }

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

@@ -2,7 +2,7 @@
 var bv_portal_header_default = ":host {\n  display: block;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n}\n\n.title-bar {\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  line-height: 32px;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\nbv-promo-banner {\n  align-self: flex-start;\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-user-row/bv-user-row.css
-var bv_user_row_default = ":host {\n  display: inline-block;\n}\n\n.row {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-lg);\n}\n\n/* User info */\n.user-info {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  min-width: 0;\n}\n\nbv-avatar {\n  --bv-avatar-size: 56px;\n  flex-shrink: 0;\n}\n\n.text-col {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.user-name {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 28px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-org {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  line-height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Edit button \u2014 white bg, neutral border */\n.edit-btn {\n  --bv-button-bg: var(--bv-color-neutral-0);\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-400);\n  flex-shrink: 0;\n}\n";
+var bv_user_row_default = ":host {\n  display: inline-block;\n}\n\n.row {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-lg);\n}\n\n/* User info */\n.user-info {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  min-width: 0;\n}\n\nbv-avatar {\n  --bv-avatar-size: 56px;\n  flex-shrink: 0;\n}\n\n.text-col {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.user-name {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 28px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-org {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  line-height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Edit action host \u2014 flex to keep either <bv-button> or <a> aligned */\n.edit-action {\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n/* Edit button \u2014 white bg, neutral border */\n.edit-btn {\n  --bv-button-bg: var(--bv-color-neutral-0);\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-400);\n  flex-shrink: 0;\n}\n\n/* Edit link \u2014 same visual as .edit-btn, but a real anchor */\n.edit-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  padding: 8px 16px;\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-secondary-foreground);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-md);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  text-decoration: none;\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n.edit-link:hover {\n  background: var(--bv-color-neutral-100);\n  border-color: var(--bv-color-neutral-400);\n}\n\n.edit-link:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 2px;\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-avatar/bv-avatar.css
 var bv_avatar_default = ":host {\n  --bv-avatar-size: 40px;\n  --bv-avatar-bg: var(--bv-color-primary-light);\n  --bv-avatar-color: var(--bv-color-primary);\n  --bv-avatar-radius: var(--bv-radius-full);\n  display: inline-flex;\n}\n\n:host([size='xs']) {\n  --bv-avatar-size: 24px;\n}\n:host([size='sm']) {\n  --bv-avatar-size: 32px;\n}\n:host([size='md']) {\n  --bv-avatar-size: 40px;\n}\n:host([size='lg']) {\n  --bv-avatar-size: 48px;\n}\n:host([size='xl']) {\n  --bv-avatar-size: 64px;\n}\n\n.avatar {\n  width: var(--bv-avatar-size);\n  height: var(--bv-avatar-size);\n  border-radius: var(--bv-avatar-radius);\n  background: var(--bv-avatar-bg);\n  color: var(--bv-avatar-color);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  flex-shrink: 0;\n  font-family: var(--bv-font-family-base);\n  font-weight: var(--bv-font-weight-semibold);\n  font-size: calc(var(--bv-avatar-size) * 0.38);\n  user-select: none;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n";
@@ -84,187 +84,7 @@ if (!customElements.get("bv-avatar")) {
 }
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
-var bv_button_default = `/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-   Apps can override these three properties per-instance:
-
-   HTML:       <bv-button style="--bv-button-bg: #e53e3e;">
-   Angular:    <bv-button [style.--bv-button-bg]="brandColor">
-   JavaScript: btn.style.setProperty('--bv-button-bg', value)
-
-   Hover is auto-computed from the base colors via color-mix().
-   Override --bv-button-bg-hover / --bv-button-border-color-hover
-   if you need explicit control over the hovered state.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-:host {
-  /* Default values \u2014 map to global tokens (primary variant) */
-  --bv-button-bg: var(--bv-color-primary);
-  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
-  --bv-button-color: var(--bv-color-neutral-0);
-  --bv-button-border-color: var(--bv-color-primary);
-  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
-  --bv-button-font-family: var(--bv-font-family-base);
-  --bv-button-font-size: var(--bv-font-size-sm);
-
-  display: inline-block;
-  font-family: var(--bv-font-family-base);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host([full-width]) {
-  display: block;
-  width: 100%;
-}
-
-/* \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
-   Each variant re-points the component tokens to different global
-   tokens. Apps can still override with inline styles \u2014 inline style
-   always wins due to higher specificity.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-:host([variant='secondary']) {
-  --bv-button-bg: var(--bv-color-secondary);
-  --bv-button-border-color: var(--bv-color-secondary);
-  --bv-button-color: var(--bv-color-secondary-foreground);
-}
-
-:host([variant='tertiary']) {
-  --bv-button-bg: var(--bv-color-tertiary);
-  --bv-button-border-color: var(--bv-color-tertiary);
-}
-
-:host([variant='danger']) {
-  --bv-button-bg: var(--bv-color-danger);
-  --bv-button-border-color: var(--bv-color-danger);
-}
-
-:host([variant='ghost']) {
-  --bv-button-bg: transparent;
-  --bv-button-bg-hover: var(--bv-color-primary-light);
-  --bv-button-color: var(--bv-color-primary);
-  --bv-button-border-color: transparent;
-  --bv-button-border-color-hover: transparent;
-}
-
-:host([variant='outline']) {
-  --bv-button-bg: transparent;
-  --bv-button-bg-hover: var(--bv-color-primary-light);
-  --bv-button-color: var(--bv-color-primary);
-  --bv-button-border-color: var(--bv-color-primary);
-  --bv-button-border-color-hover: var(--bv-color-primary);
-}
-
-/* \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
-   All visual properties read from the component-level tokens above.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bv-spacing-xs);
-  padding: 10px var(--bv-spacing-md);
-  min-height: 40px;
-  width: auto;
-  font-family: var(--bv-button-font-family);
-  font-size: var(--bv-button-font-size);
-  font-style: normal;
-  font-weight: var(--bv-font-weight-semibold);
-  line-height: 20px;
-  border: 1px solid var(--bv-button-border-color);
-  border-radius: var(--bv-radius-lg);
-  cursor: pointer;
-  transition:
-    background var(--bv-transition-fast),
-    color var(--bv-transition-fast),
-    border-color var(--bv-transition-fast),
-    box-shadow var(--bv-transition-fast),
-    opacity var(--bv-transition-fast);
-  white-space: nowrap;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
-  box-sizing: border-box;
-  background: var(--bv-button-bg);
-  color: var(--bv-button-color);
-  box-shadow: var(--bv-shadow-sm);
-}
-
-:host([full-width]) .btn {
-  width: 100%;
-}
-
-.btn:hover:not(:disabled) {
-  background: var(--bv-button-bg-hover);
-  border-color: var(--bv-button-border-color-hover);
-}
-
-.btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.btn:focus-visible {
-  outline: 2px solid var(--bv-button-border-color);
-  outline-offset: 2px;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* \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*/
-
-:host([size='sm']) .btn {
-  padding: 6px 12px;
-  min-height: 32px;
-  font-size: var(--bv-font-size-sm);
-}
-
-:host([size='lg']) .btn {
-  padding: 12px var(--bv-spacing-lg);
-  min-height: 48px;
-  font-size: var(--bv-font-size-md);
-}
-
-/* \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*/
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  line-height: 0;
-}
-
-/* \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*/
-
-.btn-count {
-  opacity: 0.8;
-  font-weight: var(--bv-font-weight-regular);
-}
-
-/* \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*/
-
-.spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  flex-shrink: 0;
-  animation: bv-spin 700ms linear infinite;
-}
-
-@keyframes bv-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-`;
+var bv_button_default = "/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Apps can override these three properties per-instance:\n\n   HTML:       <bv-button style=\"--bv-button-bg: #e53e3e;\">\n   Angular:    <bv-button [style.--bv-button-bg]=\"brandColor\">\n   JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n   Hover is auto-computed from the base colors via color-mix().\n   Override --bv-button-bg-hover / --bv-button-border-color-hover\n   if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n  /* Default values \u2014 map to global tokens (primary variant) */\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n  --bv-button-font-family: var(--bv-font-family-base);\n  --bv-button-font-size: var(--bv-font-size-sm);\n\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n  display: none !important;\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Each variant re-points the component tokens to different global\n   tokens. Apps can still override with inline styles \u2014 inline style\n   always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-border-color: var(--bv-color-secondary);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n  --bv-button-bg: var(--bv-color-tertiary);\n  --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n  --bv-button-bg: var(--bv-color-danger);\n  --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: transparent;\n  --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--bv-spacing-xs);\n  padding: 10px var(--bv-spacing-md);\n  min-height: 40px;\n  width: auto;\n  font-family: var(--bv-button-font-family);\n  font-size: var(--bv-button-font-size);\n  font-style: normal;\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  border: 1px solid var(--bv-button-border-color);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast),\n    opacity var(--bv-transition-fast);\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  outline: none;\n  box-sizing: border-box;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n  border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--bv-button-border-color);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n:host([size='sm']) .btn {\n  padding: 6px 12px;\n  min-height: 32px;\n  font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n  padding: 12px var(--bv-spacing-lg);\n  min-height: 48px;\n  font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-count {\n  opacity: 0.8;\n  font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 
 // components/bv-icon/icons.ts
 var icons = {
@@ -483,8 +303,24 @@ var BvUserRow = class extends HTMLElement {
     "user-org",
     "avatar-src",
     "avatar-initials",
-    "greeting"
+    "greeting",
+    "edit-profile-href",
+    "edit-profile-target"
   ];
+  get editProfileHref() {
+    return this.getAttribute("edit-profile-href") ?? "";
+  }
+  set editProfileHref(v) {
+    if (v) this.setAttribute("edit-profile-href", v);
+    else this.removeAttribute("edit-profile-href");
+  }
+  get editProfileTarget() {
+    return this.getAttribute("edit-profile-target") ?? "";
+  }
+  set editProfileTarget(v) {
+    if (v) this.setAttribute("edit-profile-target", v);
+    else this.removeAttribute("edit-profile-target");
+  }
   _rendered = false;
   _els = {};
   constructor() {
@@ -520,6 +356,12 @@ var BvUserRow = class extends HTMLElement {
       greeting: () => {
         if (this._els.name)
           this._els.name.textContent = this._greeting() + (this.getAttribute("user-name") ?? "");
+      },
+      "edit-profile-href": () => {
+        this._syncEditAction();
+      },
+      "edit-profile-target": () => {
+        this._syncEditAction();
       }
     };
     (_a = map[name]) == null ? void 0 : _a.call(map);
@@ -557,16 +399,40 @@ var BvUserRow = class extends HTMLElement {
     this._els.org = org;
     textCol.append(name, org);
     userInfo.append(avatar, textCol);
-    const editBtn = document.createElement("bv-button");
-    editBtn.className = "edit-btn";
-    editBtn.setAttribute("icon", "edit");
-    editBtn.textContent = "Edit Profile";
-    editBtn.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
-    });
-    this._els.editBtn = editBtn;
-    row.append(userInfo, editBtn);
+    const actionHost = document.createElement("div");
+    actionHost.className = "edit-action";
+    this._els.actionHost = actionHost;
+    row.append(userInfo, actionHost);
     shadow.appendChild(row);
+    this._syncEditAction();
+  }
+  _syncEditAction() {
+    const host = this._els.actionHost;
+    if (!host) return;
+    const href = this.getAttribute("edit-profile-href") ?? "";
+    const target = this.getAttribute("edit-profile-target") ?? "";
+    host.innerHTML = "";
+    if (href) {
+      const link = document.createElement("a");
+      link.className = "edit-link";
+      link.href = href;
+      link.rel = "noopener noreferrer";
+      if (target) link.setAttribute("target", target);
+      link.textContent = "Edit Profile";
+      link.addEventListener("click", () => {
+        this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
+      });
+      host.appendChild(link);
+    } else {
+      const btn = document.createElement("bv-button");
+      btn.className = "edit-btn";
+      btn.setAttribute("icon", "edit");
+      btn.textContent = "Edit Profile";
+      btn.addEventListener("click", () => {
+        this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
+      });
+      host.appendChild(btn);
+    }
   }
 };
 if (!customElements.get("bv-user-row")) {
@@ -581,7 +447,14 @@ var CHEVRON = `<svg class="chevron" viewBox="0 0 16 16" fill="none" xmlns="http:
   <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 var BvPromoBanner = class extends HTMLElement {
-  static observedAttributes = ["message", "badge-label", "badge-logo", "href"];
+  static observedAttributes = ["message", "badge-label", "badge-logo", "href", "target"];
+  get target() {
+    return this.getAttribute("target") ?? "";
+  }
+  set target(v) {
+    if (v) this.setAttribute("target", v);
+    else this.removeAttribute("target");
+  }
   _rendered = false;
   _messageEl = null;
   _badgeLabelEl = null;
@@ -608,6 +481,13 @@ var BvPromoBanner = class extends HTMLElement {
       this._badgeLogoEl.hidden = !val;
     }
     if (name === "href" && this._anchor) this._anchor.href = val ?? "";
+    if (name === "target" && this._anchor) this._syncTarget();
+  }
+  _syncTarget() {
+    if (!this._anchor) return;
+    const t = this.getAttribute("target");
+    if (t) this._anchor.setAttribute("target", t);
+    else this._anchor.removeAttribute("target");
   }
   _render() {
     if (this._rendered) return;
@@ -623,6 +503,7 @@ var BvPromoBanner = class extends HTMLElement {
     anchor.href = this.getAttribute("href") ?? "";
     anchor.rel = "noopener noreferrer";
     this._anchor = anchor;
+    this._syncTarget();
     const badge = document.createElement("span");
     badge.className = "badge";
     const badgeLabel = document.createElement("span");
@@ -728,7 +609,10 @@ var BvPortalHeader = class extends HTMLElement {
     "promo-message",
     "promo-badge-label",
     "promo-badge-logo",
-    "promo-href"
+    "promo-href",
+    "promo-target",
+    "edit-profile-href",
+    "edit-profile-target"
   ];
   _rendered = false;
   _els = {};
@@ -786,10 +670,24 @@ var BvPortalHeader = class extends HTMLElement {
       "promo-href": () => {
         var _a2;
         (_a2 = this._els.promo) == null ? void 0 : _a2.setAttribute("href", val ?? "");
+      },
+      "promo-target": () => {
+        this._propagate(this._els.promo, "target", val);
+      },
+      "edit-profile-href": () => {
+        this._propagate(this._els.userRow, "edit-profile-href", val);
+      },
+      "edit-profile-target": () => {
+        this._propagate(this._els.userRow, "edit-profile-target", val);
       }
     };
     (_a = map[name]) == null ? void 0 : _a.call(map);
   }
+  _propagate(target, attr, val) {
+    if (!target) return;
+    if (val) target.setAttribute(attr, val);
+    else target.removeAttribute(attr);
+  }
   _render() {
     if (this._rendered) return;
     this._rendered = true;
@@ -815,6 +713,10 @@ var BvPortalHeader = class extends HTMLElement {
     userRow.setAttribute("user-org", this.getAttribute("user-org") ?? "");
     userRow.setAttribute("avatar-src", this.getAttribute("avatar-src") ?? "");
     userRow.setAttribute("avatar-initials", this.getAttribute("avatar-initials") ?? "");
+    const editHref = this.getAttribute("edit-profile-href");
+    if (editHref) userRow.setAttribute("edit-profile-href", editHref);
+    const editTarget = this.getAttribute("edit-profile-target");
+    if (editTarget) userRow.setAttribute("edit-profile-target", editTarget);
     userRow.addEventListener("bv-edit-profile", () => {
       this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
     });
@@ -824,6 +726,8 @@ var BvPortalHeader = class extends HTMLElement {
     promo.setAttribute("badge-label", this.getAttribute("promo-badge-label") ?? "");
     promo.setAttribute("badge-logo", this.getAttribute("promo-badge-logo") ?? "");
     promo.setAttribute("href", this.getAttribute("promo-href") ?? "");
+    const promoTarget = this.getAttribute("promo-target");
+    if (promoTarget) promo.setAttribute("target", promoTarget);
     this._els.promo = promo;
     const search = document.createElement("bv-searchbox");
     search.setAttribute("size", "lg");

package/dist/components/bv-promo-banner/bv-promo-banner.d.ts

@@ -1,5 +1,8 @@
+export type PromoBannerTarget = '_self' | '_blank' | '_parent' | '_top' | '';
 export declare class BvPromoBanner extends HTMLElement {
     static readonly observedAttributes: string[];
+    get target(): PromoBannerTarget;
+    set target(v: PromoBannerTarget);
     private _rendered;
     private _messageEl;
     private _badgeLabelEl;
@@ -8,5 +11,6 @@ export declare class BvPromoBanner extends HTMLElement {
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _syncTarget;
     private _render;
 }

package/dist/components/bv-promo-banner/bv-promo-banner.js

@@ -6,7 +6,14 @@ var CHEVRON = `<svg class="chevron" viewBox="0 0 16 16" fill="none" xmlns="http:
   <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 var BvPromoBanner = class extends HTMLElement {
-  static observedAttributes = ["message", "badge-label", "badge-logo", "href"];
+  static observedAttributes = ["message", "badge-label", "badge-logo", "href", "target"];
+  get target() {
+    return this.getAttribute("target") ?? "";
+  }
+  set target(v) {
+    if (v) this.setAttribute("target", v);
+    else this.removeAttribute("target");
+  }
   _rendered = false;
   _messageEl = null;
   _badgeLabelEl = null;
@@ -33,6 +40,13 @@ var BvPromoBanner = class extends HTMLElement {
       this._badgeLogoEl.hidden = !val;
     }
     if (name === "href" && this._anchor) this._anchor.href = val ?? "";
+    if (name === "target" && this._anchor) this._syncTarget();
+  }
+  _syncTarget() {
+    if (!this._anchor) return;
+    const t = this.getAttribute("target");
+    if (t) this._anchor.setAttribute("target", t);
+    else this._anchor.removeAttribute("target");
   }
   _render() {
     if (this._rendered) return;
@@ -48,6 +62,7 @@ var BvPromoBanner = class extends HTMLElement {
     anchor.href = this.getAttribute("href") ?? "";
     anchor.rel = "noopener noreferrer";
     this._anchor = anchor;
+    this._syncTarget();
     const badge = document.createElement("span");
     badge.className = "badge";
     const badgeLabel = document.createElement("span");

package/dist/components/bv-user-row/bv-user-row.d.ts

@@ -1,7 +1,12 @@
 import '../bv-avatar/bv-avatar.ts';
 import '../bv-button/bv-button.ts';
+export type UserRowEditProfileTarget = '_self' | '_blank' | '_parent' | '_top' | '';
 export declare class BvUserRow extends HTMLElement {
     static readonly observedAttributes: string[];
+    get editProfileHref(): string;
+    set editProfileHref(v: string);
+    get editProfileTarget(): UserRowEditProfileTarget;
+    set editProfileTarget(v: UserRowEditProfileTarget);
     private _rendered;
     private _els;
     constructor();
@@ -9,4 +14,5 @@ export declare class BvUserRow extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _greeting;
     private _render;
+    private _syncEditAction;
 }