@wavelengthusaf/web-components 1.14.0 → 1.15.0

package/dist/esm/index.js

@@ -28,17 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var require_react_production_min = __commonJS({
   "../../../node_modules/react/cjs/react.production.min.js"(exports) {
     "use strict";
-    var l = Symbol.for("react.element");
-    var n = Symbol.for("react.portal");
-    var p = Symbol.for("react.fragment");
-    var q = Symbol.for("react.strict_mode");
-    var r = Symbol.for("react.profiler");
-    var t = Symbol.for("react.provider");
-    var u = Symbol.for("react.context");
-    var v = Symbol.for("react.forward_ref");
-    var w = Symbol.for("react.suspense");
-    var x = Symbol.for("react.memo");
-    var y = Symbol.for("react.lazy");
+    var l = /* @__PURE__ */ Symbol.for("react.element");
+    var n = /* @__PURE__ */ Symbol.for("react.portal");
+    var p = /* @__PURE__ */ Symbol.for("react.fragment");
+    var q = /* @__PURE__ */ Symbol.for("react.strict_mode");
+    var r = /* @__PURE__ */ Symbol.for("react.profiler");
+    var t = /* @__PURE__ */ Symbol.for("react.provider");
+    var u = /* @__PURE__ */ Symbol.for("react.context");
+    var v = /* @__PURE__ */ Symbol.for("react.forward_ref");
+    var w = /* @__PURE__ */ Symbol.for("react.suspense");
+    var x = /* @__PURE__ */ Symbol.for("react.memo");
+    var y = /* @__PURE__ */ Symbol.for("react.lazy");
     var z = Symbol.iterator;
     function A(a) {
       if (null === a || "object" !== typeof a) return null;
@@ -308,19 +308,19 @@ var require_react_development = __commonJS({
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
         var ReactVersion = "18.3.1";
-        var REACT_ELEMENT_TYPE = Symbol.for("react.element");
-        var REACT_PORTAL_TYPE = Symbol.for("react.portal");
-        var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-        var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
-        var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-        var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
-        var REACT_CONTEXT_TYPE = Symbol.for("react.context");
-        var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-        var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
-        var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
-        var REACT_MEMO_TYPE = Symbol.for("react.memo");
-        var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-        var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
+        var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.element");
+        var REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal");
+        var REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
+        var REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode");
+        var REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler");
+        var REACT_PROVIDER_TYPE = /* @__PURE__ */ Symbol.for("react.provider");
+        var REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context");
+        var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
+        var REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense");
+        var REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list");
+        var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+        var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+        var REACT_OFFSCREEN_TYPE = /* @__PURE__ */ Symbol.for("react.offscreen");
         var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
         var FAUX_ITERATOR_SYMBOL = "@@iterator";
         function getIteratorFn(maybeIterable) {
@@ -1284,7 +1284,7 @@ var require_react_development = __commonJS({
         }
         var REACT_MODULE_REFERENCE;
         {
-          REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
+          REACT_MODULE_REFERENCE = /* @__PURE__ */ Symbol.for("react.module.reference");
         }
         function isValidElementType(type) {
           if (typeof type === "string" || typeof type === "function") {
@@ -3183,7 +3183,7 @@ if (!customElements.get("wavelength-progress-bar")) {
 }
 
 // src/web-components/wavelength-input.template.html
-var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .input-wrapper {\n    width: 100%;\n    height: 100%;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
+var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .input-wrapper {\n    width: 100%;\n    height: 100%;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input,\n  textarea {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n    display: block;\n  }\n\n  textarea {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  input:focus,\n  textarea:focus {\n    outline: none;\n  }\n\n  input:disabled,\n  textarea:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder,\n  textarea::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
 
 // src/web-components/wavelength-input.ts
 function getAncestor(el) {
@@ -3264,12 +3264,11 @@ var BaseWavelengthInput = class extends HTMLElement {
     this.internals = this.attachInternals();
     const shadow = this.attachShadow({ mode: "open" });
     shadow.innerHTML = wavelength_input_template_default;
-    this.inputEl = document.createElement("input");
     this.labelEl = shadow.getElementById("floating-label");
     this.helperEl = shadow.getElementById("helper");
     this.clearButtonEl = shadow.getElementById("clear-button");
     this.clearButtonEl.addEventListener("click", this._onClearClick);
-    shadow.querySelector(".input-wrapper").appendChild(this.inputEl);
+    this._ensureInputType();
     shadow.appendChild(this.placeholderStyleEl);
   }
   static get observedAttributes() {
@@ -3304,9 +3303,33 @@ var BaseWavelengthInput = class extends HTMLElement {
       "force-error",
       "label",
       "font-size",
-      "font-family"
+      "font-family",
+      "multi-line"
     ];
   }
+  _ensureInputType() {
+    const isMulti = this.hasAttribute("multi-line");
+    const newTag = isMulti ? "textarea" : "input";
+    if (this.inputEl && this.inputEl.tagName.toLowerCase() === newTag) {
+      return;
+    }
+    const oldValue = this.inputEl ? this.inputEl.value : "";
+    const newEl = document.createElement(newTag);
+    if (this.inputEl) {
+      this.inputEl.removeEventListener("input", this._onInput);
+      this.inputEl.removeEventListener("blur", this._onBlur);
+      this.inputEl.removeEventListener("focus", this._onFocus);
+      this.inputEl.replaceWith(newEl);
+    } else {
+      this.shadowRoot.querySelector(".input-wrapper").appendChild(newEl);
+    }
+    this.inputEl = newEl;
+    this.inputEl.value = oldValue;
+    this.inputEl.addEventListener("input", this._onInput);
+    this.inputEl.addEventListener("blur", this._onBlur);
+    this.inputEl.addEventListener("focus", this._onFocus);
+    this._applyAttributes();
+  }
   connectedCallback() {
     ["placeholder", "value", "input-type", "disabled", "id", "name"].forEach(this._upgradeProperty.bind(this));
     this.validationType = this.getAttribute("validation-type") || "none";
@@ -3486,7 +3509,9 @@ var BaseWavelengthInput = class extends HTMLElement {
     if (maxLength) this.inputEl.maxLength = Number(maxLength);
     this.inputEl.placeholder = this.getAttribute("placeholder") || "";
     this.inputEl.value = this.getAttribute("value") || "";
-    this.inputEl.type = this.getAttribute("input-type") || "text";
+    if (this.inputEl instanceof HTMLInputElement) {
+      this.inputEl.type = this.getAttribute("input-type") || "text";
+    }
     this.inputEl.disabled = this.disabled;
     this.labelEl.innerHTML = `
       <span class="label-text">${label || ""}</span>
@@ -3626,6 +3651,9 @@ var BaseWavelengthInput = class extends HTMLElement {
       case "required":
         this._updateRequiredMarker();
         break;
+      case "multi-line":
+        this._ensureInputType();
+        break;
       default:
         this._applyAttributes();
         break;
@@ -4603,167 +4631,42 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
   customElements.define("wavelength-multi-select-autocomplete", WavelengthMultiSelectAutocomplete);
 }
 
-// src/web-components/wavelength-nav-bar.ts
-var template4 = document.createElement("template");
-template4.innerHTML = `
-  <style>
-    :host {
-      display: block;
-      font-family: sans-serif;
-      height: 100%;
-    }
-
-    
-    nav {
-      display: flex;
-      width: 95%;
-      height: var(--height, 25px);
-      padding: var(--padding, 1rem);
-      border-bottom: var(--border, 1px solid #ddd);
-      position: fixed;
-      top: -25;
-      z-index: 1000;
-      background: var(--bg, #ffffffff);
-      color: var(--txt, #000);
-      gap:1rem;
-      white-space: nowrap;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .nav-center {
-  display: flex;
-  justify-content: center;  
-}
-
-    .home {
-      flex: 1;
-      justify-content: flex-start;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
+// src/web-components/wavelength-nav-bar.html
+var wavelength_nav_bar_default = '<style>\n  :host {\n    display: block;\n    font-family: sans-serif;\n    height: 100%;\n  }\n\n  nav {\n    display: flex;\n    width: 95%;\n    height: var(--height, 25px);\n    padding: var(--padding, 1rem);\n    border-bottom: var(--border, 1px solid #ddd);\n    position: fixed;\n    top: -25;\n    z-index: 1000;\n    background: var(--bg, #ffffffff);\n    color: var(--txt, #000);\n    gap: 1rem;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .nav-center {\n    display: flex;\n    justify-content: center;\n  }\n\n  .home {\n    flex: 1;\n    justify-content: flex-start;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  #logo svg {\n    width: 28px;\n    height: 28px;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tab {\n    padding: 0.35rem 0.75rem;\n    border: 1px solid #ffffffff;\n    border-radius: 4px;\n    text-align: center;\n    cursor: pointer;\n    background: #fff;\n  }\n\n  .tab:hover {\n    background: #f0f0f0; /* optional hover effect */\n  }\n\n  .settings {\n    flex: 1;\n    justify-content: flex-end;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .profile-note {\n    font-size: 0.8rem;\n    opacity: 0.75;\n  }\n\n  .middle-tab-group {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex: 3;\n  }\n  .notification-wrapper {\n    position: relative;\n    height: 100%;\n    display: flex;\n  }\n</style>\n<nav>\n  <div class="section home" id="logo">\n    <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280">\n      <defs>\n        <style>\n          .b {\n            fill: #231f20;\n          }\n          .c {\n            fill: #fff;\n          }\n        </style>\n      </defs>\n      <path\n        class="b"\n        d="M82.5,272.3c-8,.5-13.5-2-17.5-5.5s-34-47.5-36-50.5-2-2.5-2-7.5-1.5-122-1.5-122c1.5-5.5,7-17.5,18-16l72-3.5c1-3.5,4-4.5,4-4.5l-44.5-40.5c-5.5-5.5,1.5-11.5,6.5-7l46,41c4-1.5,10.5-2,15.5-1l38.5-44.5c5.5-5.5,12,0,8,5.5l-36,42.5c1.5,1,4,4.5,4.5,6l28-2c5.5,0,47.5,14,57,17s12,9,12,17-1.5,140-1.5,140c-2.7,12.3-10.5,19-27.5,20.5l-143.5,15Z"\n      />\n      <path class="c" d="M240,113.3c.3-11.6-9.4-21-21-20.4l-122.5,6.4c-10.6.6-19,9.3-19,20v100.8c0,11.9,10.3,21.1,22.1,19.9l120.4-12.8c10-1.1,17.7-9.4,17.9-19.4l2.1-94.4Z" />\n      <ellipse class="c" cx="228.4" cy="241.6" rx="7" ry="6.5" transform="translate(-89 340.5) rotate(-63.9)" />\n      <path\n        d="M132,217.5c-9.5,0-16.3-3.5-21-9.9-6-8.3-7.5-23.5-7.5-39.6s1-29.2,9.5-38.6c6-6.6,10-9.9,22-9.9s16.5,2.8,21,9.4c6.5,9.6,7.5,23.1,7.5,39.2s-.4,20.3-3.1,27.7c-2.7,7.3-6.3,12.8-11,16.4-4.7,3.6-11.3,5.4-17.4,5.4ZM132.5,200.4c5.2,0,7.8-2.9,10-8.8,1.5-6.6,2-11.9,2-23.7s0-17.6-1.5-24.2c-2.3-5.8-4.8-8.8-9.8-8.8-5.2,1.1-6.4,3.6-8.7,9.4-1.5,10.5-1.5,12.7-1.5,23.7s0,19.3,1.5,25.3c2.5,5,2.7,7.2,8,7.2Z"\n      />\n      <path\n        d="M172.7,209.3c-1.1-1.1-.5-12.3-.5-12.3,0,0,0-.6,1.1-1.1,5.9,0,10.1-1.6,10.7-2.8,1.1-1.1,1.6-1.3,1.6-3.9l.5-44.1c0-6.1-7-2.8-12.9-3.3-.5,0-1.1-.6-1.1-1.1v-12.8c3.7-.7,8-1.9,11.1-3.9,3.1-2,4.3-5.7,6.4-8.4l16.8-1.1-.5,73.1s.5,3.3,2.1,3.9c1.1.4,7.5.6,9.1.6s1.6,1.1,1.6,1.1c0,1.7.5,11.7,0,12.3,0,.6-45,5-46.1,3.9Z"\n      />\n    </svg>\n    <slot name="home"></slot>\n  </div>\n  <div class="nav-center"></div>\n  <div class="middle-tab-group"></div>\n  <div class="notification-wrapper">\n    <wavelength-notification-panel></wavelength-notification-panel>\n  </div>\n</nav>\n`;\n';
 
-    #logo svg {
-      width: 28px;
-      height: 28px;
-      flex-shrink: 0;
-      cursor: pointer;
-    }
-
-    .tab {
-      padding: 0.35rem 0.75rem;
-      border: 1px solid #ffffffff;
-      border-radius: 4px;
-      text-align: center;
-      cursor: pointer;
-      background: #fff;
-    }
-
-    .tab:hover {
-      background: #f0f0f0; /* optional hover effect */
-    }
-
-
-    .settings {
-    flex: 1;
-    justify-content: flex-end;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;       
-    }
-
-    .profile {
-      padding: var(--padding, 1rem);
-      border: 2px solid #ccc;
-      border-radius: 6px;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      width: 100%;
-      height: var(--height, 25px);
-      position: fixed;
-    }
-
-    .profile-name {
-      font-weight: 600;
-    }
-
-    .profile-note {
-      font-size: 0.8rem;
-      opacity: 0.75;
-    }
-
-    .middle-tab-group {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      flex: 3;
-    }
-      .notification-wrapper {
-      position: relative;
-      height: 100%;
-      display: flex;
-      
-}
-
-
-  </style>
-  <nav>
-    <div class="section home" id="logo">
-      <!-- Inline SVG to ensure universal compatibility -->
-      <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280">
-        <defs>
-          <style>
-            .b {
-              fill: #231f20;
-            }
-            .c {
-              fill: #fff;
-            }
-          </style>
-        </defs>
-        <path class="b" d="M82.5,272.3c-8,.5-13.5-2-17.5-5.5s-34-47.5-36-50.5-2-2.5-2-7.5-1.5-122-1.5-122c1.5-5.5,7-17.5,18-16l72-3.5c1-3.5,4-4.5,4-4.5l-44.5-40.5c-5.5-5.5,1.5-11.5,6.5-7l46,41c4-1.5,10.5-2,15.5-1l38.5-44.5c5.5-5.5,12,0,8,5.5l-36,42.5c1.5,1,4,4.5,4.5,6l28-2c5.5,0,47.5,14,57,17s12,9,12,17-1.5,140-1.5,140c-2.7,12.3-10.5,19-27.5,20.5l-143.5,15Z"/>
-        <path class="c" d="M240,113.3c.3-11.6-9.4-21-21-20.4l-122.5,6.4c-10.6.6-19,9.3-19,20v100.8c0,11.9,10.3,21.1,22.1,19.9l120.4-12.8c10-1.1,17.7-9.4,17.9-19.4l2.1-94.4Z"/>
-        <ellipse class="c" cx="228.4" cy="241.6" rx="7" ry="6.5" transform="translate(-89 340.5) rotate(-63.9)"/>
-        <path d="M132,217.5c-9.5,0-16.3-3.5-21-9.9-6-8.3-7.5-23.5-7.5-39.6s1-29.2,9.5-38.6c6-6.6,10-9.9,22-9.9s16.5,2.8,21,9.4c6.5,9.6,7.5,23.1,7.5,39.2s-.4,20.3-3.1,27.7c-2.7,7.3-6.3,12.8-11,16.4-4.7,3.6-11.3,5.4-17.4,5.4ZM132.5,200.4c5.2,0,7.8-2.9,10-8.8,1.5-6.6,2-11.9,2-23.7s0-17.6-1.5-24.2c-2.3-5.8-4.8-8.8-9.8-8.8-5.2,1.1-6.4,3.6-8.7,9.4-1.5,10.5-1.5,12.7-1.5,23.7s0,19.3,1.5,25.3c2.5,5,2.7,7.2,8,7.2Z"/>
-        <path d="M172.7,209.3c-1.1-1.1-.5-12.3-.5-12.3,0,0,0-.6,1.1-1.1,5.9,0,10.1-1.6,10.7-2.8,1.1-1.1,1.6-1.3,1.6-3.9l.5-44.1c0-6.1-7-2.8-12.9-3.3-.5,0-1.1-.6-1.1-1.1v-12.8c3.7-.7,8-1.9,11.1-3.9,3.1-2,4.3-5.7,6.4-8.4l16.8-1.1-.5,73.1s.5,3.3,2.1,3.9c1.1.4,7.5.6,9.1.6s1.6,1.1,1.6,1.1c0,1.7.5,11.7,0,12.3,0,.6-45,5-46.1,3.9Z"/>
-      </svg>
-      <slot name="home"></slot>
-    </div>
-  <div class="nav-center"></div> 
-<div class = "middle-tab-group">
-   <div class="tab"><a href="/applications"><slot name="tab">Applications</slot></a></div>
-  <div class="tab"><a href="/users"><slot name="tab">Users</slot></a></div>
-  <div class="tab"><a href="/apikeys"><slot name="tab">API Keys</slot></a></div>
-   </div>
-    <div class="notification-wrapper">
-         <wavelength-notification-panel ></wavelength-notification-panel>
-    </div>
-    </nav>
-`;
+// src/web-components/wavelength-nav-bar.ts
 var WavelengthNavBar = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["bg-color", "txt-color", "height", "padding", "border", "items"];
-  }
   constructor() {
     super();
+    this._handleHomeClick = () => {
+      this.dispatchEvent(new CustomEvent("home-click", { bubbles: true, composed: true }));
+    };
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template4.content.cloneNode(true));
-    shadow.querySelector("#logo")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("home-click"));
-    });
+    shadow.innerHTML = wavelength_nav_bar_default;
+  }
+  static get observedAttributes() {
+    return ["bg-color", "txt-color", "height", "padding", "border", "items"];
+  }
+  disconnectedCallback() {
+    const logo = this.shadowRoot?.querySelector("#logo");
+    if (logo) {
+      logo.removeEventListener("click", this._handleHomeClick);
+    }
   }
   connectedCallback() {
     this.applyStyles();
     this.renderTabs();
+    const logo = this.shadowRoot?.querySelector("#logo");
+    if (logo) {
+      logo.addEventListener("click", this._handleHomeClick);
+    }
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "items") {
+      this.renderTabs();
+    }
     this.applyStyles();
-    this.renderTabs();
   }
   applyStyles() {
     this.style.setProperty("--bg", this.getAttribute("bg-color") || "#ffffffff");
@@ -4775,18 +4678,31 @@ var WavelengthNavBar = class extends HTMLElement {
   renderTabs() {
     const container = this.shadowRoot?.querySelector(".middle-tab-group");
     if (!container) return;
-    container.innerHTML = "";
+    container.replaceChildren();
     const itemsAttr = this.getAttribute("items");
-    const items = itemsAttr ? JSON.parse(itemsAttr) : [];
+    let items = [];
+    const attr = this.getAttribute("items");
+    if (attr) {
+      try {
+        items = JSON.parse(attr);
+      } catch (e) {
+        console.warn("Invalid items JSON", e);
+      }
+    }
     items.forEach((item) => {
       const tab = document.createElement("div");
       tab.className = "tab";
       tab.textContent = item.title;
-      if (item.path) {
-        tab.addEventListener("click", () => {
-          alert(`You clicked: ${item.title}`);
-        });
-      }
+      tab.setAttribute("role", "tab");
+      tab.tabIndex = 0;
+      this.dispatchEvent(
+        new CustomEvent("tab-click", {
+          detail: { title: item.title, path: item.path },
+          bubbles: true,
+          composed: true,
+          cancelable: true
+        })
+      );
       container.appendChild(tab);
     });
   }
@@ -4797,8 +4713,8 @@ if (!customElements.get("wavelength-nav-bar")) {
 
 // src/web-components/wavelength-child-data-table.ts
 var import_react = __toESM(require_react(), 1);
-var template5 = document.createElement("template");
-template5.innerHTML = `
+var template4 = document.createElement("template");
+template4.innerHTML = `
 
   <style>
   
@@ -4949,7 +4865,7 @@ var ChildDataTable = class extends HTMLElement {
   <path d="M13.2375 0L7.5 5.725L1.7625 0L0 1.7625L7.5 9.2625L15 1.7625L13.2375 0Z" fill="currentColor"/>
 </svg>`;
     this.shadow = this.attachShadow({ mode: "open" });
-    this.shadow.append(template5.content.cloneNode(true));
+    this.shadow.append(template4.content.cloneNode(true));
   }
   static get observedAttributes() {
     return ["table-columns", "table-data", "dropdown-arrow-location", "sort-icon", "dropdown-button-icon"];
@@ -5747,8 +5663,8 @@ var WavelengthFileDropZone = class extends HTMLElement {
 customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
 // src/web-components/wavelength-dropdown.ts
-var template6 = document.createElement("template");
-template6.innerHTML = `
+var template5 = document.createElement("template");
+template5.innerHTML = `
   <style>
     :host {
         display: inline-block;
@@ -5828,7 +5744,7 @@ var WavelengthDropdown = class extends HTMLElement {
     super();
     this._options = [];
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template6.content.cloneNode(true));
+    shadow.appendChild(template5.content.cloneNode(true));
     this.dropdownField = shadow.querySelector(".dropdown-field");
     this.dropdownBox = shadow.querySelector(".dropdown-box");
     this.selectedSpan = shadow.querySelector(".selected");
@@ -6903,11 +6819,149 @@ var WavelengthSwitch = class extends HTMLElement {
 if (!customElements.get("wavelength-switch")) {
   customElements.define("wavelength-switch", WavelengthSwitch);
 }
+
+// src/web-components/wavelength-badge.template.html
+var wavelength_badge_template_default = '<style>\n  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");\n\n  :host {\n    display: inline-block;\n    font-family: var(--main-font-stack);\n    --badge-font: "Montserrat";\n    --font-family: "Montserrat";\n    --fallback-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n\n    --badge-font-stack: var(--badge-font), var(--fallback-fonts);\n    --main-font-stack: var(--font-family), var(--fallback-fonts);\n\n    --badge-color: rgb(69, 95, 230);\n    --badge-text-color: rgb(255, 255, 255);\n    --badge-hover-color: color-mix(in srgb, var(--badge-color), black 15%);\n    --badge-border-radius: 50%;\n    --font-size: 14px;\n    --badge-size: 24px;\n\n    --text-box-border-radius: 8px;\n    --text-box-background-color: #f3f3f3;\n    --text-box-text-color: black;\n    --text-box-border-color: black;\n    --text-box-hover-border-color: color-mix(in srgb, var(--text-box-border-color), black 40%);\n    --text-box-font-size: 12px;\n    --text-box-font-family: "Montserrat";\n    --text-box-font-stack: var(--text-box-font-family), var(--fallback-fonts);\n    --text-box-align-items: center;\n    --text-box-justify-content: center;\n    --text-box-width: auto;\n    --text-box-height: auto;\n  }\n\n  :host([href]) {\n    cursor: pointer;\n  }\n\n  :host([href]) .badge:hover {\n    background: var(--badge-hover-color, color-mix(in srgb, var(--badge-color, rgb(69, 95, 230)), black 15%));\n    color: #f3f3f3;\n  }\n\n  :host([href]) .contentBox:hover {\n    border-color: var(--text-box-hover-border-color, color-mix(in srgb, var(--text-box-border-color, black), black 40%));\n  }\n\n  .badge {\n    background: var(--badge-color, rgb(69, 95, 230));\n    color: var(--badge-text-color, rgb(255, 255, 255));\n    border-radius: var(--badge-border-radius, 50%);\n    font-size: var(--font-size, 14px);\n    text-align: center;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    box-sizing: border-box;\n    font-family: var(--badge-font-stack);\n    min-width: var(--badge-size, 24px);\n    width: var(--badge-size, 24px);\n    height: var(--badge-size, 24px);\n    transition: background-color 0.2s ease;\n    padding: 0;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .badge slot[name="badge"]::slotted(*) {\n    display: inline-block;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: clip;\n    font-size: inherit;\n    padding: 0 1px;\n  }\n\n  .badge.len-3 {\n    font-size: calc(var(--font-size) * 0.55);\n    letter-spacing: -0.06em;\n  }\n\n  .badge.len-4 {\n    font-size: calc(var(--font-size) * 0.45);\n    letter-spacing: -0.08em;\n  }\n\n  .badge.len-long {\n    font-size: calc(var(--font-size) * 0.35);\n    letter-spacing: -0.12em;\n  }\n\n  .basic {\n    display: inline-flex;\n  }\n\n  .wrapper {\n    position: relative;\n    display: inline-flex;\n    width: fit-content;\n    height: fit-content;\n  }\n\n  .instanceBadge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    z-index: 1;\n  }\n\n  .contentBox {\n    border-radius: var(--text-box-border-radius, 8px);\n    background: var(--text-box-background-color, #f3f3f3);\n    color: var(--text-box-text-color, black);\n    display: inline-flex;\n    flex-direction: column;\n    align-items: var(--text-box-align-items, center);\n    justify-content: var(--text-box-justify-content, center);\n    border: 1px solid var(--text-box-border-color, black);\n    box-sizing: border-box;\n    font-family: var(--text-box-font-stack);\n    width: var(--text-box-width, auto);\n    height: var(--text-box-height, auto);\n    padding: 6px 10px;\n    transition: border-color 0.2s ease;\n    overflow: scroll;\n    text-overflow: ellipsis;\n    word-break: break-word;\n  }\n\n  .contentBox slot {\n    display: flex;\n    flex-direction: column;\n    align-items: var(--text-box-align-items);\n    justify-content: var(--text-box-justify-content);\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  ::slotted(:not([slot])) {\n    max-width: 100%;\n    max-height: 100%;\n    width: 100%;\n    height: 100%;\n    flex: 1;\n  }\n</style>\n<div id="root"></div>\n';
+
+// src/web-components/wavelength-badge.ts
+var _WavelengthBadge = class _WavelengthBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.badgeSlot = null;
+    this._handleClick = () => {
+      const href = this.getAttribute("href");
+      if (href) {
+        window.open(href, "_blank");
+      }
+    };
+    this._handleSlotChange = () => {
+      if (!this.badgeSlot) return;
+      const assignedNodes = this.badgeSlot.assignedNodes();
+      const textContent = assignedNodes.map((node) => node.textContent).join("").trim();
+      if (textContent) {
+        this._updateLengthClass(textContent);
+      }
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_badge_template_default;
+    this.rootElement = this.shadow.getElementById("root");
+  }
+  static get observedAttributes() {
+    return [..._WavelengthBadge.styleAttributes, "variant", "badge-content", "href"];
+  }
+  connectedCallback() {
+    this._syncStyles();
+    this._render();
+    this._updateA11y();
+    this.addEventListener("click", this._handleClick);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (_WavelengthBadge.styleAttributes.includes(name)) {
+      this._syncStyles();
+    } else if (name === "variant") {
+      this._render();
+    } else if (name === "badge-content") {
+      this._updateLengthClass(newValue || "");
+      this._updateSlotText(newValue || "");
+    } else if (name === "href") {
+      this._updateA11y();
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._handleClick);
+    this.badgeSlot?.removeEventListener("slotchange", this._handleSlotChange);
+  }
+  _syncStyles() {
+    _WavelengthBadge.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value !== null && value !== "") {
+        this.style.setProperty(`--${attr}`, value);
+      } else {
+        this.style.removeProperty(`--${attr}`);
+      }
+    });
+  }
+  _render() {
+    if (!this.rootElement) return;
+    const variant = this.getAttribute("variant") || "basic";
+    const badgeContent = this.getAttribute("badge-content") || "";
+    const contentLength = badgeContent.length;
+    const lengthClass = contentLength > 4 ? "len-long" : `len-${contentLength}`;
+    this.rootElement.textContent = "";
+    this.badgeSlot = document.createElement("slot");
+    this.badgeSlot.name = "badge";
+    this.badgeSlot.textContent = badgeContent;
+    this.badgeSlot.addEventListener("slotchange", this._handleSlotChange);
+    const badgeDiv = document.createElement("div");
+    badgeDiv.appendChild(this.badgeSlot);
+    if (variant === "withInstance") {
+      const wrapper = document.createElement("div");
+      wrapper.className = "wrapper";
+      const contentBox = document.createElement("div");
+      contentBox.className = "contentBox";
+      const mainSlot = document.createElement("slot");
+      contentBox.appendChild(mainSlot);
+      badgeDiv.className = `badge instanceBadge ${lengthClass}`;
+      wrapper.appendChild(contentBox);
+      wrapper.appendChild(badgeDiv);
+      this.rootElement.appendChild(wrapper);
+    } else {
+      badgeDiv.className = `badge basic ${lengthClass}`;
+      this.rootElement.appendChild(badgeDiv);
+    }
+    this.badgeSlot = this.shadowRoot.querySelector('slot[name="badge"]');
+    this.badgeSlot?.addEventListener("slotchange", this._handleSlotChange);
+  }
+  _updateLengthClass(content) {
+    const badge = this.shadowRoot.querySelector(".badge");
+    if (!badge) return;
+    badge.classList.remove("len-1", "len-2", "len-3", "len-4", "len-long");
+    const lengthClass = content.length > 4 ? "len-long" : `len-${content.length}`;
+    badge.classList.add(lengthClass);
+  }
+  _updateSlotText(content) {
+    const slot = this.shadowRoot.querySelector('slot[name="badge"]');
+    if (slot) {
+      slot.textContent = content;
+    }
+  }
+  _updateA11y() {
+    const href = this.getAttribute("href");
+    if (href) {
+      this.setAttribute("role", "link");
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("tabindex");
+    }
+  }
+};
+_WavelengthBadge.styleAttributes = [
+  "badge-color",
+  "badge-text-color",
+  "badge-border-radius",
+  "font-size",
+  "badge-size",
+  "badge-font",
+  "text-box-width",
+  "text-box-height",
+  "text-box-background-color",
+  "text-box-text-color",
+  "text-box-border-color",
+  "text-box-border-radius",
+  "badge-hover-color",
+  "text-box-hover-border-color"
+];
+var WavelengthBadge = _WavelengthBadge;
+if (!customElements.get("wavelength-badge")) {
+  customElements.define("wavelength-badge", WavelengthBadge);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
   ChildDataTable,
   SampleComponent,
+  WavelengthBadge,
   WavelengthBanner,
   WavelengthButton,
   WavelengthCheckbox,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",