@wavelengthusaf/web-components 1.15.0 → 1.17.0

package/dist/cjs/index.cjs

@@ -5662,6 +5662,108 @@ var WavelengthFileDropZone = class extends HTMLElement {
 };
 customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
+// src/web-components/wavelength-confirmation-modal.template.html
+var wavelength_confirmation_modal_template_default = '<style>\n  :host([show="true"]) {\n    display: block;\n    position: fixed;\n    z-index: 1300;\n    inset: 0;\n  }\n  :host(:not([show="true"])) {\n  display: none;\n}\n\n\n  dialog::backdrop {\nbackground-color: rgba(0, 0, 0, 0.5);\n-webkit-tap-highlight-color: transparent;\n}\n\n  dialog {\n  box-sizing: border-box;\n  position: relative;\n  background-color: var(--background-color, #fff);\n  border-radius: 1rem;\n  color: var(--text-color, #000);\n  box-shadow:\n    0 0.6875rem 0.9375rem -0.4375rem rgba(0, 0, 0, 0.2),\n    0 1.5rem 2.375rem 3px rgba(0, 0, 0, 0.14),\n    0 0.5625rem 2.875rem 0.5rem rgba(0, 0, 0, 0.12);\n  padding: 2rem;\n  overflow: auto;\n  font-family: var(--font-family, "Roboto", "Helvetica", "Arial", "sans-serif");\n  outline: 0;\n  border: none;\n}\n/* Ensure the dialog appears above the backdrop */\n.backdrop + dialog.modal-dialog {\n  position: fixed;\n  inset: 0;\n  margin: auto;\n}\n\n  .modal-title {\n    margin: 0;\n    font-size: 1.75rem;\n    font-weight: 500;\n    padding: 0;\n    margin-bottom: 1rem;\n  }\n\n  .modal-dialog {\n    margin: 0;\n    font-size: 1rem;\n    line-height: 1.2;\n    font-weight: 400;\n    min-height: 3.75rem;\n  }\n\n  .modal-actions {\n    position: absolute;\n    bottom: 1rem;\n    right: 1rem;\n    display: flex;\n    flex-direction: row;\n    gap: 0.5rem;\n  }\n\n  /* Internal Button Styles imitating WavelengthStyledButton */\n  .modal-actions wavelength-button {\n    min-width: 6.5625rem;\n  }\n</style>\n\n<div class="backdrop" id="backdrop"></div>\n<dialog class="modal-dialog" id="dialog-element">\n  <p class="modal-title" id="title-element"></p>\n  <p class="modal-dialog" id="dialog-content"></p>\n  <div class="modal-actions">\n    <wavelength-button id="cancel-button" variant="outlined" color-one="rgba(0, 0, 0, 0.87)" padding="0.375rem 1rem" font-size="0.875rem" width="6.5625rem"></wavelength-button>\n    <wavelength-button id="submit-button" variant="contained" color-one="#1A8083" color-two="#FFFFFF" padding="0.375rem 1rem" font-size="0.875rem" width="6.5625rem"></wavelength-button>\n  </div>\n</dialog>\n';
+
+// src/web-components/wavelength-confirmation-modal.ts
+var WavelengthConfirmationModal = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["show", "width", "height", "font-family", "text-color", "background-color", "title-text", "dialog-text", "submit-text", "cancel-text"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = wavelength_confirmation_modal_template_default;
+    this.elements = {
+      backdrop: shadow.getElementById("backdrop"),
+      dialog: shadow.getElementById("dialog-element"),
+      titleElement: shadow.getElementById("title-element"),
+      contentElement: shadow.getElementById("dialog-content"),
+      cancelButton: shadow.getElementById("cancel-button"),
+      submitButton: shadow.getElementById("submit-button")
+    };
+    this.elements.dialog.addEventListener("close", () => {
+      if (this.getAttribute("show") !== "false") {
+        this.setAttribute("show", "false");
+      }
+      this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    });
+    this.elements.dialog.addEventListener("click", (e) => {
+      const rect = this.elements.dialog.getBoundingClientRect();
+      const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        this.elements.dialog.close();
+      }
+    });
+    this.elements.cancelButton.addEventListener("click", () => {
+      this.elements.dialog.close();
+      this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+    });
+    this.elements.submitButton.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("submit", { bubbles: true, composed: true }));
+    });
+  }
+  connectedCallback() {
+    this.updateStyling();
+    this.updateContent();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "title-text" || name === "dialog-text" || name === "submit-text" || name === "cancel-text") {
+      this.updateContent();
+    } else if (name === "show") {
+      if (newValue === "true") {
+        if (!this.elements.dialog.open) {
+          this.elements.dialog.showModal();
+        }
+      } else {
+        if (this.elements.dialog.open) {
+          this.elements.dialog.close();
+        }
+      }
+    } else {
+      this.updateStyling();
+    }
+  }
+  updateContent() {
+    const titleText = this.getAttribute("title-text") || "";
+    const dialogText = this.getAttribute("dialog-text") || "";
+    const submitText = this.getAttribute("submit-text") || "Submit";
+    const cancelText = this.getAttribute("cancel-text") || "Cancel";
+    this.elements.titleElement.textContent = titleText;
+    this.elements.contentElement.textContent = dialogText;
+    this.elements.submitButton.textContent = submitText;
+    this.elements.cancelButton.textContent = cancelText;
+  }
+  updateStyling() {
+    const width = this.getAttribute("width") || "28.1875rem";
+    const height = this.getAttribute("height") || "16rem";
+    const fontFamily = this.getAttribute("font-family") || "";
+    const textColor = this.getAttribute("text-color") || "";
+    const backgroundColor = this.getAttribute("background-color") || "";
+    this.elements.dialog.style.width = width;
+    this.elements.dialog.style.height = height;
+    if (fontFamily) {
+      this.style.setProperty("--font-family", fontFamily);
+    } else {
+      this.style.removeProperty("--font-family");
+    }
+    if (textColor) {
+      this.style.setProperty("--text-color", textColor);
+    } else {
+      this.style.removeProperty("--text-color");
+    }
+    if (backgroundColor) {
+      this.style.setProperty("--background-color", backgroundColor);
+    } else {
+      this.style.removeProperty("--background-color");
+    }
+  }
+};
+if (!customElements.get("wavelength-confirmation-modal")) {
+  customElements.define("wavelength-confirmation-modal", WavelengthConfirmationModal);
+}
+
 // src/web-components/wavelength-dropdown.ts
 var template5 = document.createElement("template");
 template5.innerHTML = `
@@ -5720,8 +5822,9 @@ template5.innerHTML = `
         margin: 0;
         padding: 0;
         list-style: none;
-        overflow-y: auto;
+        overflow-y: auto; 
         display: none;
+        top: 100%;      
         z-index: 10;
         box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
       }
@@ -5778,8 +5881,15 @@ var WavelengthDropdown = class extends HTMLElement {
     this.parseOptionsAttribute();
     this.applyStyles();
     this.dropdownField.addEventListener("click", () => {
-      this.optionsList.classList.toggle("show");
-      this.arrow.classList.toggle("active");
+      const isOpen = this.optionsList.classList.contains("show");
+      if (!isOpen) {
+        this.optionsList.classList.add("show");
+        this.arrow.classList.add("active");
+        requestAnimationFrame(() => this._positionDropdown());
+      } else {
+        this.optionsList.classList.remove("show");
+        this.arrow.classList.remove("active");
+      }
     });
     document.addEventListener("click", (e) => {
       if (!this.contains(e.target)) {
@@ -5788,6 +5898,22 @@ var WavelengthDropdown = class extends HTMLElement {
       }
     });
   }
+  _positionDropdown() {
+    const fieldRect = this.dropdownField.getBoundingClientRect();
+    const listHeight = this.optionsList.offsetHeight;
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - fieldRect.bottom;
+    const spaceAbove = fieldRect.top;
+    if (spaceBelow < listHeight && spaceAbove > spaceBelow) {
+      this.optionsList.style.top = "auto";
+      this.optionsList.style.bottom = "100%";
+      this.optionsList.style.maxHeight = `${spaceAbove - 8}px`;
+    } else {
+      this.optionsList.style.top = "100%";
+      this.optionsList.style.bottom = "auto";
+      this.optionsList.style.maxHeight = `${spaceBelow - 8}px`;
+    }
+  }
   attributeChangedCallback() {
     this.parseOptionsAttribute();
     this.setDefaultValue();
@@ -6957,6 +7083,265 @@ if (!customElements.get("wavelength-badge")) {
   customElements.define("wavelength-badge", WavelengthBadge);
 }
 
+// src/web-components/wavelength-dialog.template.html
+var wavelength_dialog_template_default = '<style>\n  :host {\n    /* \u2500\u2500 Customizable CSS variables \u2500\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    --box-color: white;\n    --max-width: 500px;\n    --max-height: 500px;\n    --shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 8px 10px -5px rgba(0, 0, 0, 0.2);\n    --font-family: Roboto, sans-serif;\n    --font-size: 16px;\n    --border-radius: 0.5rem;\n    --border-color: #e5e7eb;\n    --text-color: #111827;\n    --left-btn-bg: #f3f4f6;\n    --left-btn-color: #374151;\n    --right-btn-bg: #2563eb;\n    --right-btn-color: #ffffff;\n\n    /* \u2500\u2500 Default: EMBEDDED MODE \u2500\u2500\u2500\u2500\u2500\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    display: block;\n    box-sizing: border-box;\n\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n\n  dialog::backdrop {\n    background: rgba(0, 0, 0, 0.35);\n  }\n\n  /* \u2500\u2500 Dialog card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  dialog {\n    flex-direction: column;\n    padding: 0;\n    margin: auto;\n    position: relative;\n    width: 100%;\n    max-width: var(--max-width);\n    max-height: min(var(--max-height), calc(100vh - 32px));\n    box-sizing: border-box;\n    overflow: hidden;\n\n    background: var(--box-color);\n    color: var(--text-color);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--border-color, #e5e7eb);\n    box-shadow: var(--shadow);\n    outline: none;\n  }\n  dialog[open] {\n    display: flex;\n  }\n  [hidden] {\n    display: none !important;\n  }\n  /* \u2500\u2500 Header (title) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  .dialog-header {\n    padding: 20px 24px 16px;\n    font-weight: 600;\n    font-size: 1.125rem;\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n    flex-shrink: 0;\n  }\n\n  /* \u2500\u2500 Content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  .dialog-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px 24px;\n\n    /* prevents weird flex collapse in non-overlay layouts */\n    min-height: 0;\n    border: none;\n    outline: none;\n  }\n\n  /* \u2500\u2500 Footer (buttons) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dialog-footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n    padding: 16px 24px 20px;\n    border-top: 1px solid var(--border-color, #e5e7eb);\n    flex-shrink: 0;\n  }\n\n  /* \u2500\u2500 Shared button base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .btn {\n    padding: 8px 20px;\n    border-radius: 6px;\n    border: 1px solid transparent;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: inherit;\n    line-height: 1.4;\n    transition:\n      opacity 0.15s ease,\n      box-shadow 0.15s ease;\n  }\n  .btn:hover {\n    opacity: 0.85;\n  }\n  .btn:active {\n    opacity: 0.7;\n  }\n  .btn:focus-visible {\n    outline: 2px solid var(--right-btn-bg);\n    outline-offset: 2px;\n  }\n\n  /* \u2500\u2500 Cancel / left 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 */\n  .btn-left {\n    background: var(--left-btn-bg);\n    color: var(--left-btn-color);\n    border-color: var(--border-color);\n  }\n\n  /* \u2500\u2500 Confirm / right 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 */\n  .btn-right {\n    background: var(--right-btn-bg);\n    color: var(--right-btn-color);\n  }\n</style>\n\n<!-- Dialog card -->\n<dialog id="dialog">\n  <!--  Title  -->\n  <header class="dialog-header" id="dialog-header">\n    <span class="attr-title"></span>\n  </header>\n\n  <!-- Dev-supplied content via default slot -->\n  <section class="dialog-content">\n    <slot></slot>\n  </section>\n\n  <!-- Action buttons -->\n  <footer class="dialog-footer" id="dialog-footer">\n    <button class="btn btn-left" id="left-btn" type="button"></button>\n    <button class="btn btn-right" id="right-btn" type="button"></button>\n  </footer>\n</dialog>\n';
+
+// src/web-components/wavelength-dialog.ts
+var _WavelengthDialog = class _WavelengthDialog extends HTMLElement {
+  constructor() {
+    super();
+    this._onLeftClick = () => this._emit("wl-left-btn-click");
+    this._onRightClick = () => this._emit("wl-right-btn-click");
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_dialog_template_default;
+    this.elements = {
+      dialog: this.shadow.querySelector("dialog"),
+      header: this.shadow.querySelector("#dialog-header"),
+      footer: this.shadow.querySelector("#dialog-footer"),
+      leftBtn: this.shadow.querySelector("#left-btn"),
+      rightBtn: this.shadow.querySelector("#right-btn"),
+      titleSpan: this.shadow.querySelector(".attr-title")
+    };
+  }
+  get dialogTitle() {
+    return this.getAttribute("dialog-title");
+  }
+  set dialogTitle(value) {
+    if (value === null) this.removeAttribute("dialog-title");
+    else this.setAttribute("dialog-title", value);
+  }
+  get leftBtnLabel() {
+    return this.getAttribute("left-btn-label");
+  }
+  set leftBtnLabel(value) {
+    if (value === null) this.removeAttribute("left-btn-label");
+    else this.setAttribute("left-btn-label", value);
+  }
+  get rightBtnLabel() {
+    return this.getAttribute("right-btn-label");
+  }
+  set rightBtnLabel(value) {
+    if (value === null) this.removeAttribute("right-btn-label");
+    else this.setAttribute("right-btn-label", value);
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(value) {
+    if (value) this.setAttribute("open", "");
+    else this.removeAttribute("open");
+  }
+  get overlay() {
+    return this.hasAttribute("overlay");
+  }
+  set overlay(value) {
+    if (value) this.setAttribute("overlay", "");
+    else this.removeAttribute("overlay");
+  }
+  static get observedAttributes() {
+    return [..._WavelengthDialog.styleAttributes, "dialog-title", "left-btn-label", "right-btn-label", "overlay", "open"];
+  }
+  connectedCallback() {
+    this.elements.leftBtn.addEventListener("click", this._onLeftClick);
+    this.elements.rightBtn.addEventListener("click", this._onRightClick);
+    this._syncStyles();
+    this._syncContent();
+    this._syncDialog();
+  }
+  disconnectedCallback() {
+    _optionalChain([this, 'access', _101 => _101.elements, 'access', _102 => _102.leftBtn, 'optionalAccess', _103 => _103.removeEventListener, 'call', _104 => _104("click", this._onLeftClick)]);
+    _optionalChain([this, 'access', _105 => _105.elements, 'access', _106 => _106.rightBtn, 'optionalAccess', _107 => _107.removeEventListener, 'call', _108 => _108("click", this._onRightClick)]);
+  }
+  attributeChangedCallback(name) {
+    if (_WavelengthDialog.styleAttributes.includes(name)) {
+      this._syncStyles();
+    } else if (name === "dialog-title" || name === "left-btn-label" || name === "right-btn-label") {
+      this._syncContent();
+    } else if (name === "open" || name === "overlay") {
+      this._syncDialog();
+    }
+  }
+  _syncDialog() {
+    if (!this.isConnected) return;
+    const dialog = this.elements.dialog;
+    const shouldBeOpen = this.hasAttribute("open");
+    if (!shouldBeOpen) {
+      if (dialog.open) dialog.close();
+      return;
+    }
+    if (dialog.open) dialog.close();
+    if (this.hasAttribute("overlay")) {
+      dialog.showModal();
+    } else {
+      dialog.show();
+    }
+  }
+  _emit(name) {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));
+  }
+  _syncStyles() {
+    _WavelengthDialog.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value !== null) {
+        this.style.setProperty(`--${attr}`, value);
+      } else {
+        this.style.removeProperty(`--${attr}`);
+      }
+    });
+  }
+  _syncContent() {
+    const { header, titleSpan, leftBtn, rightBtn, footer } = this.elements;
+    const attrTitle = _optionalChain([this, 'access', _109 => _109.getAttribute, 'call', _110 => _110("dialog-title"), 'optionalAccess', _111 => _111.trim, 'call', _112 => _112()]) || "";
+    header.hidden = !attrTitle;
+    titleSpan.textContent = attrTitle;
+    const leftLabel = this.getAttribute("left-btn-label");
+    const rightLabel = this.getAttribute("right-btn-label");
+    leftBtn.textContent = leftLabel || "";
+    leftBtn.hidden = !leftLabel;
+    rightBtn.textContent = rightLabel || "";
+    rightBtn.hidden = !rightLabel;
+    footer.hidden = !leftLabel && !rightLabel;
+  }
+};
+_WavelengthDialog.styleAttributes = [
+  "box-color",
+  "max-width",
+  "max-height",
+  "shadow",
+  "font-size",
+  "font-family",
+  "border-radius",
+  "border-color",
+  "text-color",
+  "left-btn-bg",
+  "left-btn-color",
+  "right-btn-bg",
+  "right-btn-color"
+];
+var WavelengthDialog = _WavelengthDialog;
+if (!customElements.get("wavelength-dialog")) {
+  customElements.define("wavelength-dialog", WavelengthDialog);
+}
+
+// src/web-components/wavelength-popup-menu.template.html
+var wavelength_popup_menu_template_default = '<style>\n  :host {\n    display: inline-block;\n    position: relative;\n    --menu-offset-val: var(--menu-offset, 8px);\n\n    --badge-bg: var(--color, #007bff);\n    --badge-text: var(--badge-text-color, #fff);\n    --badge-size: var(--icon-size, 24px);\n\n    --card-bg: var(--card-background-color, #fff);\n    --card-w: var(--card-width, 280px);\n  }\n\n  :host(:hover) {\n    --badge-bg: var(--badge-hover-color, var(--color));\n    cursor: pointer;\n  }\n\n  .wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n  /* --- Dropdown --- */\n  .dropdown {\n    display: none;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 1000;\n    width: max-content;\n    opacity: 0;\n  }\n\n  :host([data-open]) .dropdown {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    opacity: 1;\n  }\n  /* --- Direction --- */\n  :host(:not([menu-direction])) .dropdown,\n  :host([menu-direction="down"]) .dropdown {\n    top: 100%;\n    padding-top: var(--menu-offset-val);\n  }\n  :host([menu-direction="up"]) .dropdown {\n    bottom: 100%;\n    padding-bottom: var(--menu-offset-val);\n  }\n  :host([menu-direction="left"]) .dropdown {\n    top: 50%;\n    left: auto;\n    right: 100%;\n    transform: translateY(-50%);\n    padding-right: var(--menu-offset-val);\n  }\n  :host([menu-direction="right"]) .dropdown {\n    top: 50%;\n    left: 100%;\n    right: auto;\n    transform: translateY(-50%);\n    padding-left: var(--menu-offset-val);\n  }\n  /* --- Variant visibility --- */\n  wavelength-menu,\n  .card {\n    display: none;\n  }\n  :host(:not([variant])) wavelength-menu,\n  :host([variant="menu"]) wavelength-menu {\n    display: block;\n  }\n  :host([variant="card"]) .card {\n    display: block;\n  }\n  /* --- Card --- */\n  .card {\n    width: var(--card-w);\n    background-color: var(--card-bg);\n    padding: var(--card-padding, 16px);\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n  }\n</style>\n<div class="wrapper">\n  <wavelength-badge badge-color="var(--badge-bg)" badge-text-color="var(--badge-text)" badge-size="var(--badge-size)"> </wavelength-badge>\n\n  <div class="dropdown">\n    <wavelength-menu></wavelength-menu>\n\n    <div class="card">\n      <slot name="card-header"></slot>\n      <slot name="card-body"></slot>\n      <slot name="card-footer"></slot>\n    </div>\n  </div>\n</div>\n';
+
+// src/web-components/wavelength-popup-menu.ts
+var WavelengthPopUpMenu = class extends StylingMixin(HTMLElement) {
+  constructor() {
+    super();
+    this._isOpen = false;
+    // --- Event handlers ---
+    this._handleBadgeClick = (e) => {
+      e.stopPropagation();
+      this.isOpen = !this._isOpen;
+    };
+    this._handleMouseEnter = () => this.isOpen = true;
+    this._handleMouseLeave = () => this.isOpen = false;
+    this._handleMenuSelect = (e) => {
+      this.dispatchEvent(
+        new CustomEvent("wl-popup-menu-select", {
+          detail: e.detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.isOpen = false;
+    };
+    this._handleOutsideClick = (e) => {
+      if (!this._isOpen) return;
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this.isOpen = false;
+      }
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_popup_menu_template_default;
+    this._menu = this.shadow.querySelector("wavelength-menu");
+    this._badge = this.shadow.querySelector("wavelength-badge");
+  }
+  static get observedAttributes() {
+    return ["variant", "trigger", "menu-direction", "menu-items", "menu-offset", "badge-label"];
+  }
+  connectedCallback() {
+    this._setupTrigger();
+    this._syncMenuItems();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "trigger":
+        this._setupTrigger();
+        break;
+      case "menu-items":
+        this._syncMenuItems();
+        break;
+      case "badge-label":
+        this._badge.setAttribute("badge-content", newValue || "");
+        break;
+      case "menu-offset": {
+        const px = this._px("menu-offset");
+        if (px) this.style.setProperty("--menu-offset", px);
+        else this.style.removeProperty("--menu-offset");
+        break;
+      }
+    }
+  }
+  disconnectedCallback() {
+    this._cleanup();
+  }
+  // --- Props ---
+  _px(attr) {
+    const val = this.getAttribute(attr);
+    if (!val) return null;
+    return isNaN(Number(val)) ? val : `${val}px`;
+  }
+  _syncMenuItems() {
+    const items = this.getAttribute("menu-items");
+    if (items !== null) {
+      this._menu.setAttribute("items", items);
+    } else {
+      this._menu.removeAttribute("items");
+    }
+  }
+  // --- Open/close ---
+  get isOpen() {
+    return this._isOpen;
+  }
+  set isOpen(open) {
+    if (this._isOpen === open) return;
+    this._isOpen = open;
+    this.toggleAttribute("open", open);
+    this.toggleAttribute("data-open", open);
+  }
+  // --- Trigger ---
+  _cleanup() {
+    document.removeEventListener("click", this._handleOutsideClick);
+    this._badge.removeEventListener("click", this._handleBadgeClick);
+    this.removeEventListener("mouseenter", this._handleMouseEnter);
+    this.removeEventListener("mouseleave", this._handleMouseLeave);
+    this._menu.removeEventListener("wavelength-menu-select", this._handleMenuSelect);
+  }
+  _setupTrigger() {
+    this._cleanup();
+    document.addEventListener("click", this._handleOutsideClick);
+    this._menu.addEventListener("wavelength-menu-select", this._handleMenuSelect);
+    const trigger = this.getAttribute("trigger") || "click";
+    if (trigger === "hover") {
+      this.addEventListener("mouseenter", this._handleMouseEnter);
+      this.addEventListener("mouseleave", this._handleMouseLeave);
+    } else {
+      this._badge.addEventListener("click", this._handleBadgeClick);
+    }
+  }
+};
+if (!customElements.get("wavelength-popup-menu")) {
+  customElements.define("wavelength-popup-menu", WavelengthPopUpMenu);
+}
+
+
+
+
 
 
 
@@ -6983,7 +7368,7 @@ if (!customElements.get("wavelength-badge")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js: