@wavelengthusaf/web-components 1.4.2 → 1.5.0

package/dist/cjs/index.cjs

@@ -2241,19 +2241,10 @@ function StylingMixin(mixinBaseClass) {
   };
 }
 
+// src/web-components/sample-component.template.html
+var sample_component_template_default = '<style>\n  :host {\n    display: block;\n    /* Define component defaults here */\n  }\n</style>\n<div class="content">\n  <button></button>\n</div>\n';
+
 // src/web-components/sample-component.ts
-var template = document.createElement("template");
-template.innerHTML = `
-  <style>
-    :host {
-      display: block;
-      /* Define component defaults here */
-    }
-  </style>
-  <div class="content">
-    <slot></slot> <!-- Enables user-defined inner HTML -->
-  </div>
-`;
 var BaseSampleComponent = class extends HTMLElement {
   // List of attributes to observe for changes
   static get observedAttributes() {
@@ -2262,7 +2253,7 @@ var BaseSampleComponent = class extends HTMLElement {
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
-    this.shadow.append(template.content.cloneNode(true));
+    this.shadow.innerHTML = sample_component_template_default;
   }
   // Called when component is inserted into the DOM
   connectedCallback() {
@@ -2402,79 +2393,11 @@ if (!customElements.get("wavelength-banner")) {
   customElements.define("wavelength-banner", WavelengthBanner);
 }
 
+// src/web-components/wavelength-button.template.html
+var wavelength_button_template_default = '<style>\n  :host {\n    display: inline-flex;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n    border: none;\n    border-radius: 0.25rem;\n    cursor: pointer;\n    font-family: "Roboto", "Helvetica", "Arial", sans-serif;\n    font-weight: 500;\n    font-size: 0.875rem;\n    letter-spacing: 0.02857rem;\n    text-transform: uppercase;\n    user-select: none;\n    white-space: normal;\n    word-break: break-word;\n    text-align: center;\n    height: auto;\n  }\n\n  button .ripple {\n    position: absolute;\n    border-radius: 50%;\n    transform: scale(0);\n    animation: ripple 600ms linear;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  button .label {\n    position: relative;\n    z-index: 1;\n    display: block;\n    width: 100%;\n  }\n\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  button.contained {\n    box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;\n  }\n\n  button.contained:hover,\n  button.outlined:hover,\n  button.text:hover {\n    opacity: 0.96;\n    transition: background-color 300ms ease-in-out;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n</style>\n\n<button>\n  <span class="label"><slot>LABEL</slot></span>\n</button>\n';
+
 // src/web-components/wavelength-button.ts
 var buttonTemplate = document.createElement("template");
-buttonTemplate.innerHTML = `
-  <style>
-	:host {
-  	display: inline-flex;
-	}
-
-	button {
-  	display: inline-flex;
-  	align-items: center;
-  	justify-content: center;
-  	position: relative;
-  	overflow: hidden;
-  	border: none;
-  	border-radius: 0.25rem;
-  	cursor: pointer;
-  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  	font-weight: 500;
-  	font-size: 0.875rem;
-  	letter-spacing: 0.02857rem;
-  	text-transform: uppercase;
-  	user-select: none;
-  	white-space: normal;
-  	word-break: break-word;
-  	text-align: center;
-  	height: auto;
-	}
-
-	button .ripple {
-  	position: absolute;
-  	border-radius: 50%;
-  	transform: scale(0);
-  	animation: ripple 600ms linear;
-  	pointer-events: none;
-  	z-index: 0;
-	}
-
-	button .label {
-  	position: relative;
-  	z-index: 1;
-  	display: block;
-  	width: 100%;
-	}
-
-	@keyframes ripple {
-  	to {
-    	transform: scale(4);
-    	opacity: 0;
-  	}
-	}
-
-	button.contained {
-  	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
-	}
-
-	button.contained:hover,
-	button.outlined:hover,
-	button.text:hover {
-  	opacity: 0.96;
-  	transition: background-color 300ms ease-in-out;
-	}
-
-	button:disabled {
-  	opacity: 0.5;
-  	pointer-events: none;
-	}
-  </style>
-
-  <button>
-	<span class="label"><slot>LABEL</slot></span>
-  </button>
-`;
 var WavelengthButton = class extends HTMLElement {
   constructor() {
     super();
@@ -2483,7 +2406,7 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverOut = () => {
     };
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(buttonTemplate.content.cloneNode(true));
+    shadow.innerHTML = wavelength_button_template_default;
     this.button = shadow.querySelector("button");
     this.button.addEventListener("click", (event) => {
       if (this.button.disabled || this.hasAttribute("disabled")) {
@@ -3179,8 +3102,8 @@ if (!customElements.get("wavelength-form")) {
 }
 
 // src/web-components/wavelength-progress-bar.ts
-var template2 = document.createElement("template");
-template2.innerHTML = `
+var template = document.createElement("template");
+template.innerHTML = `
   <style>
 	.label {
   	display: flex;
@@ -3219,7 +3142,7 @@ var WavelengthProgressBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template2.content.cloneNode(true));
+    shadow.appendChild(template.content.cloneNode(true));
     this.container = shadow.querySelector(".container");
     this.nameSpan = shadow.querySelector(".name");
     this.statusSpan = shadow.querySelector(".status");
@@ -3259,143 +3182,10 @@ if (!customElements.get("wavelength-progress-bar")) {
   customElements.define("wavelength-progress-bar", WavelengthProgressBar);
 }
 
-// src/web-components/wavelength-input.ts
-var template3 = document.createElement("template");
-template3.innerHTML = `
-<style>
-  :host {
-    display: block;
-    width: 100%;
-    font-family: sans-serif;
-    --wavelength-container-background: #f8f8f8;
-    --wavelength-label-background: #ffffff;
-  }
-
-  .field-wrapper {  
-    position: relative;  
-  }  
-
-  .floating-label {  
-    position: absolute;  
-    top: -0.325rem;  
-    left: 12px;  
-    font-size: 0.75rem;  
-    line-height: 1;  
-    color: var(--wavelength-label-color, #666666);  
-    padding: 0 4px;  
-    z-index: 1;  
-    pointer-events: none;  
-    user-select: none;  
-  }  
-
-  .floating-label::before,  
-  .floating-label::after {  
-    content: '';  
-    position: absolute;  
-    left: 0;  
-    width: 100%;  
-    z-index: -1;  
-  }  
-
-  .floating-label::before {  
-    top: 0;  
-    height: 50%;  
-    background: var(--wavelength-container-background, white);  
-  }  
-
-  .floating-label::after {  
-    bottom: 0;  
-    height: 50%;  
-    background: var(--wavelength-label-background, #ffffff);  
-  }  
-
-  :host([disabled]) .floating-label::before {  
-    opacity: 0;  
-  }  
-
-  input {  
-    font-size: 16px;  
-    padding: 16.5px 14px;  
-    border: 1px solid var(--wavelength-border-color, #cccccc);  
-    border-radius: 8px;  
-    width: 100%;  
-    box-sizing: border-box;  
-    background-color: var(--wavelength-background, #ffffff);  
-    transition: border-color 0.2s ease;  
-    overflow: auto;  
-    font-family: inherit;  
-  }  
-
-  input:focus {  
-    outline: none;  
-  }  
-
-  input:disabled {  
-    opacity: 0.5;  
-    cursor: not-allowed;  
-  }  
-
-  :host([disabled]) .floating-label::after {  
-    opacity: 0;  
-    cursor: not-allowed;  
-  }  
-
-  input::placeholder {  
-    color: #999999;  
-  }  
-
-  .helper-message {  
-    margin-top: 4px;  
-    font-size: 0.75rem;  
-    max-width: 100%;  
-    word-wrap: break-word;  
-    white-space: normal;  
-    overflow-wrap: break-word;  
-    color: #000000;
-    padding-left: 14px;
-    margin-left: 2px;
-    user-select: none;  
-  }
-
-  .required-marker {
-    color: red;
-    font-weight: lighter;
-    font-size: 0.75rem;  
-  }
-  
-  .clear-button {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 1.25 rem;
-    color: #666666;
-    cursor: pointer;
-    opacity: 0.5;
-    user-select: none;
-    transition: opacity 0.2s ease;
-    z-index: 2;
-    display: none;
-    line-height: 1;
-    padding: 0 4px;
-  }
-
-  .clear-button:hover {
-    opacity: 1;
-  }
+// 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  }\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';
 
-  :host([disabled]) .clear-button {
-    display: none;
-  }
- 
-</style>
-<div class="field-wrapper">
-  <label class="floating-label" id="floating-label"></label>
-  <div class="input-wrapper"></div>
-  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>
-</div>
-<div class="helper-message" id="helper"></div>
-`;
+// src/web-components/wavelength-input.ts
 function getAncestor(el) {
   if (!el) return null;
   if (el.parentElement) {
@@ -3473,7 +3263,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     };
     this.internals = this.attachInternals();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template3.content.cloneNode(true));
+    shadow.innerHTML = wavelength_input_template_default;
     this.inputEl = document.createElement("input");
     this.labelEl = shadow.getElementById("floating-label");
     this.helperEl = shadow.getElementById("helper");
@@ -4067,8 +3857,8 @@ if (!customElements.get("wavelength-date-picker")) {
 }
 
 // src/web-components/wavelength-notification-panel.ts
-var template4 = document.createElement("template");
-template4.innerHTML = `
+var template2 = document.createElement("template");
+template2.innerHTML = `
   <style>
 	:host {
   	display: flex;
@@ -4267,7 +4057,7 @@ var WavelengthNotificationPanel = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template4.content.cloneNode(true));
+    shadow.appendChild(template2.content.cloneNode(true));
     this.panelButton = shadow.querySelector(".pill");
     this.panel = shadow.querySelector(".dropdown-panel");
     this.signOutButton = shadow.querySelector(".footer-button-sign-out");
@@ -4331,8 +4121,8 @@ if (!customElements.get("wavelength-notification-panel")) {
 }
 
 // src/web-components/wavelength-multi-select-autocomplete.ts
-var template5 = document.createElement("template");
-template5.innerHTML = `
+var template3 = document.createElement("template");
+template3.innerHTML = `
   <style>
     .multi-select-container {
       background-color: white;
@@ -4574,7 +4364,7 @@ var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
     this._internals = this.attachInternals();
     this._internals.role = "combobox";
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template5.content.cloneNode(true));
+    shadow.appendChild(template3.content.cloneNode(true));
     this._container = this.shadowRoot.querySelector(".multi-select-container");
     this._inputWrapper = this.shadowRoot.querySelector(".multi-select-input-wrapper");
     this._input = this.shadowRoot.querySelector(".multi-select-input");
@@ -4791,8 +4581,8 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
 }
 
 // src/web-components/wavelength-nav-bar.ts
-var template6 = document.createElement("template");
-template6.innerHTML = `
+var template4 = document.createElement("template");
+template4.innerHTML = `
   <style>
     :host {
       display: block;
@@ -4939,7 +4729,7 @@ var WavelengthNavBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template6.content.cloneNode(true));
+    shadow.appendChild(template4.content.cloneNode(true));
     _optionalChain([shadow, 'access', _61 => _61.querySelector, 'call', _62 => _62("#logo"), 'optionalAccess', _63 => _63.addEventListener, 'call', _64 => _64("click", () => {
       this.dispatchEvent(new CustomEvent("home-click"));
     })]);
@@ -4984,8 +4774,8 @@ if (!customElements.get("wavelength-nav-bar")) {
 
 // src/web-components/wavelength-child-data-table.ts
 var import_react = __toESM(require_react(), 1);
-var template7 = document.createElement("template");
-template7.innerHTML = `
+var template5 = document.createElement("template");
+template5.innerHTML = `
 
   <style>
   
@@ -5136,7 +4926,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(template7.content.cloneNode(true));
+    this.shadow.append(template5.content.cloneNode(true));
   }
   static get observedAttributes() {
     return ["table-columns", "table-data", "dropdown-arrow-location", "sort-icon", "dropdown-button-icon"];

package/dist/esm/index.js

@@ -2241,19 +2241,10 @@ function StylingMixin(mixinBaseClass) {
   };
 }
 
+// src/web-components/sample-component.template.html
+var sample_component_template_default = '<style>\n  :host {\n    display: block;\n    /* Define component defaults here */\n  }\n</style>\n<div class="content">\n  <button></button>\n</div>\n';
+
 // src/web-components/sample-component.ts
-var template = document.createElement("template");
-template.innerHTML = `
-  <style>
-    :host {
-      display: block;
-      /* Define component defaults here */
-    }
-  </style>
-  <div class="content">
-    <slot></slot> <!-- Enables user-defined inner HTML -->
-  </div>
-`;
 var BaseSampleComponent = class extends HTMLElement {
   // List of attributes to observe for changes
   static get observedAttributes() {
@@ -2262,7 +2253,7 @@ var BaseSampleComponent = class extends HTMLElement {
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
-    this.shadow.append(template.content.cloneNode(true));
+    this.shadow.innerHTML = sample_component_template_default;
   }
   // Called when component is inserted into the DOM
   connectedCallback() {
@@ -2402,79 +2393,11 @@ if (!customElements.get("wavelength-banner")) {
   customElements.define("wavelength-banner", WavelengthBanner);
 }
 
+// src/web-components/wavelength-button.template.html
+var wavelength_button_template_default = '<style>\n  :host {\n    display: inline-flex;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n    border: none;\n    border-radius: 0.25rem;\n    cursor: pointer;\n    font-family: "Roboto", "Helvetica", "Arial", sans-serif;\n    font-weight: 500;\n    font-size: 0.875rem;\n    letter-spacing: 0.02857rem;\n    text-transform: uppercase;\n    user-select: none;\n    white-space: normal;\n    word-break: break-word;\n    text-align: center;\n    height: auto;\n  }\n\n  button .ripple {\n    position: absolute;\n    border-radius: 50%;\n    transform: scale(0);\n    animation: ripple 600ms linear;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  button .label {\n    position: relative;\n    z-index: 1;\n    display: block;\n    width: 100%;\n  }\n\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  button.contained {\n    box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;\n  }\n\n  button.contained:hover,\n  button.outlined:hover,\n  button.text:hover {\n    opacity: 0.96;\n    transition: background-color 300ms ease-in-out;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n</style>\n\n<button>\n  <span class="label"><slot>LABEL</slot></span>\n</button>\n';
+
 // src/web-components/wavelength-button.ts
 var buttonTemplate = document.createElement("template");
-buttonTemplate.innerHTML = `
-  <style>
-	:host {
-  	display: inline-flex;
-	}
-
-	button {
-  	display: inline-flex;
-  	align-items: center;
-  	justify-content: center;
-  	position: relative;
-  	overflow: hidden;
-  	border: none;
-  	border-radius: 0.25rem;
-  	cursor: pointer;
-  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  	font-weight: 500;
-  	font-size: 0.875rem;
-  	letter-spacing: 0.02857rem;
-  	text-transform: uppercase;
-  	user-select: none;
-  	white-space: normal;
-  	word-break: break-word;
-  	text-align: center;
-  	height: auto;
-	}
-
-	button .ripple {
-  	position: absolute;
-  	border-radius: 50%;
-  	transform: scale(0);
-  	animation: ripple 600ms linear;
-  	pointer-events: none;
-  	z-index: 0;
-	}
-
-	button .label {
-  	position: relative;
-  	z-index: 1;
-  	display: block;
-  	width: 100%;
-	}
-
-	@keyframes ripple {
-  	to {
-    	transform: scale(4);
-    	opacity: 0;
-  	}
-	}
-
-	button.contained {
-  	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
-	}
-
-	button.contained:hover,
-	button.outlined:hover,
-	button.text:hover {
-  	opacity: 0.96;
-  	transition: background-color 300ms ease-in-out;
-	}
-
-	button:disabled {
-  	opacity: 0.5;
-  	pointer-events: none;
-	}
-  </style>
-
-  <button>
-	<span class="label"><slot>LABEL</slot></span>
-  </button>
-`;
 var WavelengthButton = class extends HTMLElement {
   constructor() {
     super();
@@ -2483,7 +2406,7 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverOut = () => {
     };
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(buttonTemplate.content.cloneNode(true));
+    shadow.innerHTML = wavelength_button_template_default;
     this.button = shadow.querySelector("button");
     this.button.addEventListener("click", (event) => {
       if (this.button.disabled || this.hasAttribute("disabled")) {
@@ -3179,8 +3102,8 @@ if (!customElements.get("wavelength-form")) {
 }
 
 // src/web-components/wavelength-progress-bar.ts
-var template2 = document.createElement("template");
-template2.innerHTML = `
+var template = document.createElement("template");
+template.innerHTML = `
   <style>
 	.label {
   	display: flex;
@@ -3219,7 +3142,7 @@ var WavelengthProgressBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template2.content.cloneNode(true));
+    shadow.appendChild(template.content.cloneNode(true));
     this.container = shadow.querySelector(".container");
     this.nameSpan = shadow.querySelector(".name");
     this.statusSpan = shadow.querySelector(".status");
@@ -3259,143 +3182,10 @@ if (!customElements.get("wavelength-progress-bar")) {
   customElements.define("wavelength-progress-bar", WavelengthProgressBar);
 }
 
-// src/web-components/wavelength-input.ts
-var template3 = document.createElement("template");
-template3.innerHTML = `
-<style>
-  :host {
-    display: block;
-    width: 100%;
-    font-family: sans-serif;
-    --wavelength-container-background: #f8f8f8;
-    --wavelength-label-background: #ffffff;
-  }
-
-  .field-wrapper {  
-    position: relative;  
-  }  
-
-  .floating-label {  
-    position: absolute;  
-    top: -0.325rem;  
-    left: 12px;  
-    font-size: 0.75rem;  
-    line-height: 1;  
-    color: var(--wavelength-label-color, #666666);  
-    padding: 0 4px;  
-    z-index: 1;  
-    pointer-events: none;  
-    user-select: none;  
-  }  
-
-  .floating-label::before,  
-  .floating-label::after {  
-    content: '';  
-    position: absolute;  
-    left: 0;  
-    width: 100%;  
-    z-index: -1;  
-  }  
-
-  .floating-label::before {  
-    top: 0;  
-    height: 50%;  
-    background: var(--wavelength-container-background, white);  
-  }  
-
-  .floating-label::after {  
-    bottom: 0;  
-    height: 50%;  
-    background: var(--wavelength-label-background, #ffffff);  
-  }  
-
-  :host([disabled]) .floating-label::before {  
-    opacity: 0;  
-  }  
-
-  input {  
-    font-size: 16px;  
-    padding: 16.5px 14px;  
-    border: 1px solid var(--wavelength-border-color, #cccccc);  
-    border-radius: 8px;  
-    width: 100%;  
-    box-sizing: border-box;  
-    background-color: var(--wavelength-background, #ffffff);  
-    transition: border-color 0.2s ease;  
-    overflow: auto;  
-    font-family: inherit;  
-  }  
-
-  input:focus {  
-    outline: none;  
-  }  
-
-  input:disabled {  
-    opacity: 0.5;  
-    cursor: not-allowed;  
-  }  
-
-  :host([disabled]) .floating-label::after {  
-    opacity: 0;  
-    cursor: not-allowed;  
-  }  
-
-  input::placeholder {  
-    color: #999999;  
-  }  
-
-  .helper-message {  
-    margin-top: 4px;  
-    font-size: 0.75rem;  
-    max-width: 100%;  
-    word-wrap: break-word;  
-    white-space: normal;  
-    overflow-wrap: break-word;  
-    color: #000000;
-    padding-left: 14px;
-    margin-left: 2px;
-    user-select: none;  
-  }
-
-  .required-marker {
-    color: red;
-    font-weight: lighter;
-    font-size: 0.75rem;  
-  }
-  
-  .clear-button {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 1.25 rem;
-    color: #666666;
-    cursor: pointer;
-    opacity: 0.5;
-    user-select: none;
-    transition: opacity 0.2s ease;
-    z-index: 2;
-    display: none;
-    line-height: 1;
-    padding: 0 4px;
-  }
-
-  .clear-button:hover {
-    opacity: 1;
-  }
+// 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  }\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';
 
-  :host([disabled]) .clear-button {
-    display: none;
-  }
- 
-</style>
-<div class="field-wrapper">
-  <label class="floating-label" id="floating-label"></label>
-  <div class="input-wrapper"></div>
-  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>
-</div>
-<div class="helper-message" id="helper"></div>
-`;
+// src/web-components/wavelength-input.ts
 function getAncestor(el) {
   if (!el) return null;
   if (el.parentElement) {
@@ -3473,7 +3263,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     };
     this.internals = this.attachInternals();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template3.content.cloneNode(true));
+    shadow.innerHTML = wavelength_input_template_default;
     this.inputEl = document.createElement("input");
     this.labelEl = shadow.getElementById("floating-label");
     this.helperEl = shadow.getElementById("helper");
@@ -4067,8 +3857,8 @@ if (!customElements.get("wavelength-date-picker")) {
 }
 
 // src/web-components/wavelength-notification-panel.ts
-var template4 = document.createElement("template");
-template4.innerHTML = `
+var template2 = document.createElement("template");
+template2.innerHTML = `
   <style>
 	:host {
   	display: flex;
@@ -4267,7 +4057,7 @@ var WavelengthNotificationPanel = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template4.content.cloneNode(true));
+    shadow.appendChild(template2.content.cloneNode(true));
     this.panelButton = shadow.querySelector(".pill");
     this.panel = shadow.querySelector(".dropdown-panel");
     this.signOutButton = shadow.querySelector(".footer-button-sign-out");
@@ -4331,8 +4121,8 @@ if (!customElements.get("wavelength-notification-panel")) {
 }
 
 // src/web-components/wavelength-multi-select-autocomplete.ts
-var template5 = document.createElement("template");
-template5.innerHTML = `
+var template3 = document.createElement("template");
+template3.innerHTML = `
   <style>
     .multi-select-container {
       background-color: white;
@@ -4574,7 +4364,7 @@ var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
     this._internals = this.attachInternals();
     this._internals.role = "combobox";
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template5.content.cloneNode(true));
+    shadow.appendChild(template3.content.cloneNode(true));
     this._container = this.shadowRoot.querySelector(".multi-select-container");
     this._inputWrapper = this.shadowRoot.querySelector(".multi-select-input-wrapper");
     this._input = this.shadowRoot.querySelector(".multi-select-input");
@@ -4791,8 +4581,8 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
 }
 
 // src/web-components/wavelength-nav-bar.ts
-var template6 = document.createElement("template");
-template6.innerHTML = `
+var template4 = document.createElement("template");
+template4.innerHTML = `
   <style>
     :host {
       display: block;
@@ -4939,7 +4729,7 @@ var WavelengthNavBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template6.content.cloneNode(true));
+    shadow.appendChild(template4.content.cloneNode(true));
     shadow.querySelector("#logo")?.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("home-click"));
     });
@@ -4984,8 +4774,8 @@ if (!customElements.get("wavelength-nav-bar")) {
 
 // src/web-components/wavelength-child-data-table.ts
 var import_react = __toESM(require_react(), 1);
-var template7 = document.createElement("template");
-template7.innerHTML = `
+var template5 = document.createElement("template");
+template5.innerHTML = `
 
   <style>
   
@@ -5136,7 +4926,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(template7.content.cloneNode(true));
+    this.shadow.append(template5.content.cloneNode(true));
   }
   static get observedAttributes() {
     return ["table-columns", "table-data", "dropdown-arrow-location", "sort-icon", "dropdown-button-icon"];

package/package.json

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