@wavelengthusaf/web-components 1.4.1 → 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"];
@@ -5436,6 +5226,299 @@ if (!customElements.get("wavelength-child-data-table")) {
   customElements.define("wavelength-child-data-table", ChildDataTable);
 }
 
+// src/functions/swapCSSClass.ts
+function swapCSSClass(element, remove, add) {
+  element.classList.remove(...remove);
+  if (add) element.classList.add(add);
+}
+
+// src/functions/getRequiredElement.ts
+function getRequiredElement(root, selector) {
+  const el = root.querySelector(`${selector}`);
+  if (!el) {
+    throw new Error(`Missing element: ${selector}`);
+  }
+  return el;
+}
+
+// src/web-components/wavelength-checkbox.ts
+var checkboxTemplate = document.createElement("template");
+checkboxTemplate.innerHTML = `
+    <style>
+
+  .checkbox-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center; 
+  cursor: pointer;
+}
+
+  .checkbox-container input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  
+  .custom-checkbox {
+  --size: 20px;
+  --border: 2px;
+  --check-left: 6.5px;
+  --check-top: 1.5px;
+  --check-width: 5px;
+  --check-height: 10px;
+  --halo: 12px;
+
+  width: var(--size);
+  height: var(--size);
+  border: var(--border) solid #444;
+  border-radius: 4px;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+
+  .custom-checkbox::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--halo) * -1); /* controls halo size */
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 50%;        /* THIS makes it circular */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: -1;
+  }
+
+
+  .checkbox-container:hover .custom-checkbox::before {
+    opacity: 1;
+  }
+
+  
+  .checkbox-container input:checked + .custom-checkbox {
+    background-color: #444;
+  }
+
+  
+  .checkbox-container input:checked + .custom-checkbox::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--check-width);
+  height: var(--check-height);
+  border: solid white;
+  border-width: 0 var(--border) var(--border) 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.light::after {
+    border: solid white;
+    border-width: 0 2px 2px 0;
+  }
+  
+  .checkbox-container input:checked + .custom-checkbox.dark::after {
+    border: solid black;
+    border-width: 0 2px 2px 0;
+  }
+
+  .primary::before {
+    background: #2196F335;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.primary {
+    background-color: #2196F3;
+    border-color: #2196F3;
+  }
+
+  .secondary::before {
+    background: #7B1FA235;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.secondary {
+    background-color: #7B1FA2;
+    border-color: #7B1FA2;
+  }
+
+  .error::before {
+    background: #D32F2F35;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.error {
+    background-color: #D32F2F;
+    border-color: #D32F2F;
+  }
+
+  .warning::before {
+    background: #EF6C0035;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.warning {
+    background-color: #EF6C00;
+    border-color: #EF6C00;
+  }
+
+  .info::before {
+    background: #0288D135;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.info {
+    background-color: #0288D1;
+    border-color: #0288D1;
+  }
+
+  .success::before {
+    background: #2E7D3235;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.success {
+    background-color: #2E7D32;
+    border-color: #2E7D32;
+  }
+
+  .custom-checkbox.small {
+  --size: 18px;
+  --check-left: 4.5px;
+  --check-top: 1px;
+  --check-width: 3px;
+  --check-height: 7px;
+  --halo: 10px;
+}
+
+.custom-checkbox.medium {
+  
+}
+
+.custom-checkbox.large {
+  --size: 25px;
+  --border: 2px;
+  --check-left: 9px;
+  --check-top: 2px;
+  --check-width: 7px;
+  --check-height: 14px;
+  --halo: 15px;
+}
+
+.custom-checkbox.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: rgba(128, 128, 128, 0.85); 
+  background: #f5f5f5;
+}
+
+.custom-checkbox.disabled::before {
+  opacity: 0 !important;
+  display: none;
+}
+
+.checkbox-container:hover .custom-checkbox.disabled::before {
+  opacity: 0;
+}
+
+.checkbox-container input:checked + .custom-checkbox.disabled::after {
+  border-color: rgba(120, 120, 120, 0.85);
+}
+
+.checkbox-container::after {
+  content: attr(text);
+  font-size: 14px;
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  line-height: 1;       
+  margin-left: 8px;
+  color: #333;
+  user-select: none;
+}
+
+
+.checkbox-container.small::after {
+  font-size: 14px;
+}
+
+.checkbox-container.medium::after {
+  font-size: 16px; /* default */
+}
+
+.checkbox-container.large::after {
+  font-size: 18px;
+}
+
+</style>
+
+<label class="checkbox-container" text="">
+  <input type="checkbox"/>
+  <span class="custom-checkbox"></span>
+</label>
+`;
+var BaseWavelengthCheckbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.initialized = false;
+    this.attributeHandlers = {
+      size: (value) => {
+        swapCSSClass(this.elements.box, ["small", "medium", "large"], _nullishCoalesce(value, () => ( "medium")));
+      },
+      color: (value) => {
+        swapCSSClass(this.elements.box, ["primary", "secondary", "error", "warning", "info", "success"], _nullishCoalesce(value, () => ( "primary")));
+      },
+      theme: (value) => {
+        swapCSSClass(this.elements.box, ["light", "dark"], _nullishCoalesce(value, () => ( "light")));
+      },
+      disabled: (value) => {
+        if (value === "") {
+          this.elements.input.disabled = true;
+          swapCSSClass(this.elements.box, ["enabled", "disabled"], "disabled");
+        } else {
+          swapCSSClass(this.elements.box, ["enabled", "disabled"], "enabled");
+          this.elements.input.disabled = false;
+        }
+      },
+      text: (value) => {
+        if (value === null) {
+          this.elements.label.removeAttribute("text");
+        } else {
+          this.elements.label.setAttribute("text", value);
+        }
+      },
+      textSize: (value) => {
+        swapCSSClass(this.elements.label, ["small", "medium", "large"], _nullishCoalesce(value, () => ( "medium")));
+      }
+    };
+    this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["size", "color", "theme", "disabled", "text", "text-size"];
+  }
+  connectedCallback() {
+    if (!this.initialized) {
+      this.shadowRoot.innerHTML = checkboxTemplate.innerHTML;
+      this.elements = {
+        box: getRequiredElement(this.shadowRoot, "span"),
+        input: getRequiredElement(this.shadowRoot, "input"),
+        label: getRequiredElement(this.shadowRoot, "label")
+      };
+      this.styleCheckbox();
+      this.initialized = true;
+    }
+  }
+  attributeChangedCallback() {
+    if (this.initialized) this.styleCheckbox();
+  }
+  styleCheckbox() {
+    if (!this.initialized) return;
+    for (const key in this.attributeHandlers) {
+      const attr = key === "textSize" ? "text-size" : key;
+      this.attributeHandlers[key](this.getAttribute(attr));
+    }
+  }
+};
+var WavelengthCheckbox = class extends StylingMixin(BaseWavelengthCheckbox) {
+};
+if (!customElements.get("wavelength-checkbox")) {
+  customElements.define("wavelength-checkbox", WavelengthCheckbox);
+}
+
 // src/web-components/wavelength-file-drop-zone.ts
 var fileDropZoneTemplate = document.createElement("template");
 fileDropZoneTemplate.innerHTML = `
@@ -5655,7 +5738,8 @@ customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
+
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js: