@wavelengthusaf/web-components 1.7.0 → 1.8.0

package/dist/cjs/index.cjs

@@ -5755,6 +5755,7 @@ template6.innerHTML = `
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        box-sizing: border-box;
         border: 1px solid black;
         gap: 4px;
         padding: 0 8px;
@@ -5783,7 +5784,7 @@ template6.innerHTML = `
     }
 
     .options-list {
-        position: relative;
+        position: absolute;
         left: 0;
         right: 0;
         margin: 0;
@@ -5822,7 +5823,26 @@ var WavelengthDropdown = class extends HTMLElement {
     this._selectedValue = this.getAttribute("default-value");
   }
   static get observedAttributes() {
-    return ["options", "default-value", "color", "font-size", "font-family", "border-radius", "width", "height", "arrow-size", "popup-radius", "popup-align", "popup-selected-color"];
+    return [
+      "options",
+      "default-value",
+      "color",
+      "font-size",
+      "font-family",
+      "border-radius",
+      "border-color",
+      "width",
+      "height",
+      "arrow-size",
+      "arrow-color",
+      "popup-radius",
+      "popup-align",
+      "popup-selected-color",
+      "popup-background-color",
+      "popup-text-color",
+      "popup-text-align",
+      "popup-hover-background"
+    ];
   }
   connectedCallback() {
     this.parseOptionsAttribute();
@@ -5869,10 +5889,11 @@ var WavelengthDropdown = class extends HTMLElement {
       li.style.textOverflow = "clip";
       li.style.fontSize = this.getAttribute("font-size") || this.style.fontSize || "inherit";
       li.style.fontFamily = this.getAttribute("font-family") || this.style.fontFamily || "inherit";
-      li.style.color = "#000";
+      li.style.color = this.getAttribute("popup-text-color") || "#000";
+      li.style.textAlign = this.getAttribute("popup-text-align") || "left";
       const originalBg = li.style.backgroundColor;
       li.addEventListener("mouseenter", () => {
-        li.style.backgroundColor = "#eee";
+        li.style.backgroundColor = this.getAttribute("popup-hover-background") || "#eee";
       });
       li.addEventListener("mouseleave", () => {
         if (this._selectedValue === opt.value) {
@@ -5919,6 +5940,7 @@ var WavelengthDropdown = class extends HTMLElement {
       height: this.getAttribute("height") || style.height
     });
     Object.assign(this.dropdownField.style, {
+      borderColor: this.getAttribute("border-color") || style.borderColor,
       borderRadius: this.getAttribute("border-radius") || style.borderRadius,
       fontSize: this.getAttribute("font-size") || style.fontSize,
       fontFamily: this.getAttribute("font-family") || style.fontFamily,
@@ -5927,6 +5949,7 @@ var WavelengthDropdown = class extends HTMLElement {
     this.dropdownBox.style.minWidth = this.getAttribute("width") || "auto";
     const arrow = this.dropdownField.querySelector(".arrow");
     arrow.style.padding = this.getAttribute("arrow-size") || "2px";
+    arrow.style.background = this.getAttribute("arrow-color") || "black";
     this.optionsList.style.minWidth = "auto";
     const popupAlign = this.getAttribute("popup-align") || "left";
     switch (popupAlign) {
@@ -5947,7 +5970,7 @@ var WavelengthDropdown = class extends HTMLElement {
         this.optionsList.style.transform = "none";
         break;
     }
-    this.optionsList.style.backgroundColor = "white";
+    this.optionsList.style.backgroundColor = this.getAttribute("popup-background-color") || "white";
     this.optionsList.style.borderRadius = this.getAttribute("popup-radius") || this.getAttribute("border-radius") || "4px";
   }
   get value() {
@@ -5972,6 +5995,60 @@ if (!customElements.get("wavelength-dropdown")) {
   customElements.define("wavelength-dropdown", WavelengthDropdown);
 }
 
+// src/web-components/wavelength-snackbar.template.html
+var wavelength_snackbar_template_default = '<style>\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 1000;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100%;\n    padding: 20px;\n    box-sizing: border-box;\n    pointer-events: none;\n    opacity: 0;\n    align-items: flex-end;\n    transform: translateY(100px);\n    justify-content: var(--justify-content, center);\n    transition:\n      opacity 0.3s ease-in-out,\n      transform 0.3s ease-in-out;\n  }\n\n  :host([vertical-align="top"]) {\n    align-items: flex-start;\n    transform: translateY(-100px);\n  }\n\n  :host([vertical-align="center"]) {\n    align-items: center;\n    transform: scale(0.9);\n  }\n\n  :host([vertical-align="bottom"]) {\n    align-items: flex-end;\n    transform: translateY(100px);\n  }\n\n  :host(.show) {\n    opacity: 1;\n    transform: none;\n  }\n\n  #container {\n    display: none;\n    pointer-events: auto;\n    background-color: var(--background-color, #333);\n    color: var(--font-color, #fff);\n    font-family: var(--font-family, Arial, sans-serif);\n    font-size: var(--font-size, 16px);\n    border: var(--border, none);\n    padding: var(--padding, 16px);\n    border-radius: var(--border-radius, 8px);\n    width: var(--width, auto);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    text-align: center;\n  }\n</style>\n\n<div id="container"></div>\n';
+
+// src/web-components/wavelength-snackbar.ts
+var WavelengthSnackbar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["message", "background-color", "font-color", "font-family", "font-size", "border", "padding", "border-radius", "width", "horizontal-align", "duration"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = wavelength_snackbar_template_default;
+    this.snackbarElement = this.shadowRoot.querySelector("#container");
+    this.render();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.render();
+    if (name === "message" && newValue) this.show();
+  }
+  render() {
+    if (!this.snackbarElement) return;
+    const message = this.getAttribute("message") || "";
+    this.snackbarElement.textContent = message;
+    this.snackbarElement.style.display = message ? "block" : "none";
+    const props = [
+      ["--background-color", "background-color", "#333"],
+      ["--font-color", "font-color", "#fff"],
+      ["--font-family", "font-family", "Arial, sans-serif"],
+      ["--font-size", "font-size", "16px"],
+      ["--border", "border", "none"],
+      ["--padding", "padding", "16px"],
+      ["--border-radius", "border-radius", "8px"],
+      ["--width", "width", "auto"],
+      ["--justify-content", "horizontal-align", "center"]
+    ];
+    for (const [prop, attr, fallback] of props) {
+      this.style.setProperty(prop, _nullishCoalesce(this.getAttribute(attr), () => ( fallback)));
+    }
+  }
+  show(message, duration) {
+    if (!this.snackbarElement) return;
+    if (message) this.snackbarElement.textContent = message;
+    const displayDuration = _nullishCoalesce(duration, () => ( parseInt(_nullishCoalesce(this.getAttribute("duration"), () => ( "3000")), 10)));
+    this.classList.remove("show");
+    void this.offsetWidth;
+    this.classList.add("show");
+    setTimeout(() => this.classList.remove("show"), displayDuration);
+  }
+};
+customElements.define("wavelength-snackbar", WavelengthSnackbar);
+
 // src/web-components/wavelength-planetrail.template.html
 var wavelength_planetrail_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  .flex-container {\n    display: flex;\n    align-items: center;\n  }\n\n  #inner {\n    border-radius: 25px;\n    height: 2px;\n    flex-grow: 1;\n    background-color: var(--color);\n  }\n\n  #path {\n    fill: var(--color);\n  }\n</style>\n\n<div id="outer" class="flex-container" >\n  <div id="inner">\n  </div>\n  <div>\n  <svg id="plane" width="40" height="40">\n    <path\n      d="M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"\n      id="path"\n    />\n  </svg>\n  </div>\n</div>\n';
 
@@ -6016,6 +6093,71 @@ if (!customElements.get("wavelength-planetrail")) {
   customElements.define("wavelength-planetrail", WavelengthPlaneTrail);
 }
 
+// src/web-components/wavelength-manyplanes.template.html
+var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  #plane-container {\n    display: flex;\n    justify-content: flex-end;\n    height: 40px;\n  }\n</style>\n<div id="plane-container" class="flex-container"></div>';
+
+// src/web-components/wavelength-manyplanes.ts
+var WavelengthManyPlanes = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_manyplanes_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  updateComponent() {
+    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const trailDir = this.getAttribute("trail-dir") || "right";
+    const opacity = this.getAttribute("opacity") || "1";
+    const color = this.getAttribute("color") || "#00308F";
+    const gradient = this.getAttribute("gradient") || "false";
+    const spaced = this.getAttribute("spaced") || "true";
+    const planeContainer = this.shadow.getElementById("plane-container");
+    if (planeContainer === null) {
+      return;
+    }
+    planeContainer.replaceChildren();
+    planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
+    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
+    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+      let currentPlaneOpacity = opacity;
+      if (gradient === "true") {
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+      }
+      planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
+    }
+  }
+  createPlane(opacity, color, flipped) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const newPlane = document.createElementNS(svgNS, "svg");
+    const planePath = document.createElementNS(svgNS, "path");
+    newPlane.setAttribute("width", "40");
+    newPlane.setAttribute("height", "40");
+    newPlane.setAttribute("id", "planes");
+    newPlane.setAttribute("transform", flipped ? "matrix(-1, 0, 0, 1, 0, 0)" : "");
+    newPlane.setAttribute("opacity", opacity);
+    newPlane.appendChild(planePath);
+    planePath.setAttribute(
+      "d",
+      "M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"
+    );
+    planePath.setAttribute("fill", color);
+    return newPlane;
+  }
+};
+if (!customElements.get("wavelength-manyplanes")) {
+  customElements.define("wavelength-manyplanes", WavelengthManyPlanes);
+}
+
+
+
 
 
 
@@ -6034,7 +6176,7 @@ if (!customElements.get("wavelength-planetrail")) {
 
 
 
-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.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; 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.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -1852,6 +1852,16 @@ declare class WavelengthDropdown extends HTMLElement {
     set color(col: string);
 }
 
+declare class WavelengthSnackbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private snackbarElement;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    show(message?: string, duration?: number): void;
+}
+
 declare class BasePlaneTrail extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
@@ -2235,4 +2245,14 @@ declare const WavelengthPlaneTrail_base: {
 declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthManyPlanes extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar };

package/dist/esm/index.d.ts

@@ -1852,6 +1852,16 @@ declare class WavelengthDropdown extends HTMLElement {
     set color(col: string);
 }
 
+declare class WavelengthSnackbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private snackbarElement;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    show(message?: string, duration?: number): void;
+}
+
 declare class BasePlaneTrail extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
@@ -2235,4 +2245,14 @@ declare const WavelengthPlaneTrail_base: {
 declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthManyPlanes extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar };

package/dist/esm/index.js

@@ -5755,6 +5755,7 @@ template6.innerHTML = `
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        box-sizing: border-box;
         border: 1px solid black;
         gap: 4px;
         padding: 0 8px;
@@ -5783,7 +5784,7 @@ template6.innerHTML = `
     }
 
     .options-list {
-        position: relative;
+        position: absolute;
         left: 0;
         right: 0;
         margin: 0;
@@ -5822,7 +5823,26 @@ var WavelengthDropdown = class extends HTMLElement {
     this._selectedValue = this.getAttribute("default-value");
   }
   static get observedAttributes() {
-    return ["options", "default-value", "color", "font-size", "font-family", "border-radius", "width", "height", "arrow-size", "popup-radius", "popup-align", "popup-selected-color"];
+    return [
+      "options",
+      "default-value",
+      "color",
+      "font-size",
+      "font-family",
+      "border-radius",
+      "border-color",
+      "width",
+      "height",
+      "arrow-size",
+      "arrow-color",
+      "popup-radius",
+      "popup-align",
+      "popup-selected-color",
+      "popup-background-color",
+      "popup-text-color",
+      "popup-text-align",
+      "popup-hover-background"
+    ];
   }
   connectedCallback() {
     this.parseOptionsAttribute();
@@ -5869,10 +5889,11 @@ var WavelengthDropdown = class extends HTMLElement {
       li.style.textOverflow = "clip";
       li.style.fontSize = this.getAttribute("font-size") || this.style.fontSize || "inherit";
       li.style.fontFamily = this.getAttribute("font-family") || this.style.fontFamily || "inherit";
-      li.style.color = "#000";
+      li.style.color = this.getAttribute("popup-text-color") || "#000";
+      li.style.textAlign = this.getAttribute("popup-text-align") || "left";
       const originalBg = li.style.backgroundColor;
       li.addEventListener("mouseenter", () => {
-        li.style.backgroundColor = "#eee";
+        li.style.backgroundColor = this.getAttribute("popup-hover-background") || "#eee";
       });
       li.addEventListener("mouseleave", () => {
         if (this._selectedValue === opt.value) {
@@ -5919,6 +5940,7 @@ var WavelengthDropdown = class extends HTMLElement {
       height: this.getAttribute("height") || style.height
     });
     Object.assign(this.dropdownField.style, {
+      borderColor: this.getAttribute("border-color") || style.borderColor,
       borderRadius: this.getAttribute("border-radius") || style.borderRadius,
       fontSize: this.getAttribute("font-size") || style.fontSize,
       fontFamily: this.getAttribute("font-family") || style.fontFamily,
@@ -5927,6 +5949,7 @@ var WavelengthDropdown = class extends HTMLElement {
     this.dropdownBox.style.minWidth = this.getAttribute("width") || "auto";
     const arrow = this.dropdownField.querySelector(".arrow");
     arrow.style.padding = this.getAttribute("arrow-size") || "2px";
+    arrow.style.background = this.getAttribute("arrow-color") || "black";
     this.optionsList.style.minWidth = "auto";
     const popupAlign = this.getAttribute("popup-align") || "left";
     switch (popupAlign) {
@@ -5947,7 +5970,7 @@ var WavelengthDropdown = class extends HTMLElement {
         this.optionsList.style.transform = "none";
         break;
     }
-    this.optionsList.style.backgroundColor = "white";
+    this.optionsList.style.backgroundColor = this.getAttribute("popup-background-color") || "white";
     this.optionsList.style.borderRadius = this.getAttribute("popup-radius") || this.getAttribute("border-radius") || "4px";
   }
   get value() {
@@ -5972,6 +5995,60 @@ if (!customElements.get("wavelength-dropdown")) {
   customElements.define("wavelength-dropdown", WavelengthDropdown);
 }
 
+// src/web-components/wavelength-snackbar.template.html
+var wavelength_snackbar_template_default = '<style>\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 1000;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100%;\n    padding: 20px;\n    box-sizing: border-box;\n    pointer-events: none;\n    opacity: 0;\n    align-items: flex-end;\n    transform: translateY(100px);\n    justify-content: var(--justify-content, center);\n    transition:\n      opacity 0.3s ease-in-out,\n      transform 0.3s ease-in-out;\n  }\n\n  :host([vertical-align="top"]) {\n    align-items: flex-start;\n    transform: translateY(-100px);\n  }\n\n  :host([vertical-align="center"]) {\n    align-items: center;\n    transform: scale(0.9);\n  }\n\n  :host([vertical-align="bottom"]) {\n    align-items: flex-end;\n    transform: translateY(100px);\n  }\n\n  :host(.show) {\n    opacity: 1;\n    transform: none;\n  }\n\n  #container {\n    display: none;\n    pointer-events: auto;\n    background-color: var(--background-color, #333);\n    color: var(--font-color, #fff);\n    font-family: var(--font-family, Arial, sans-serif);\n    font-size: var(--font-size, 16px);\n    border: var(--border, none);\n    padding: var(--padding, 16px);\n    border-radius: var(--border-radius, 8px);\n    width: var(--width, auto);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    text-align: center;\n  }\n</style>\n\n<div id="container"></div>\n';
+
+// src/web-components/wavelength-snackbar.ts
+var WavelengthSnackbar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["message", "background-color", "font-color", "font-family", "font-size", "border", "padding", "border-radius", "width", "horizontal-align", "duration"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = wavelength_snackbar_template_default;
+    this.snackbarElement = this.shadowRoot.querySelector("#container");
+    this.render();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.render();
+    if (name === "message" && newValue) this.show();
+  }
+  render() {
+    if (!this.snackbarElement) return;
+    const message = this.getAttribute("message") || "";
+    this.snackbarElement.textContent = message;
+    this.snackbarElement.style.display = message ? "block" : "none";
+    const props = [
+      ["--background-color", "background-color", "#333"],
+      ["--font-color", "font-color", "#fff"],
+      ["--font-family", "font-family", "Arial, sans-serif"],
+      ["--font-size", "font-size", "16px"],
+      ["--border", "border", "none"],
+      ["--padding", "padding", "16px"],
+      ["--border-radius", "border-radius", "8px"],
+      ["--width", "width", "auto"],
+      ["--justify-content", "horizontal-align", "center"]
+    ];
+    for (const [prop, attr, fallback] of props) {
+      this.style.setProperty(prop, this.getAttribute(attr) ?? fallback);
+    }
+  }
+  show(message, duration) {
+    if (!this.snackbarElement) return;
+    if (message) this.snackbarElement.textContent = message;
+    const displayDuration = duration ?? parseInt(this.getAttribute("duration") ?? "3000", 10);
+    this.classList.remove("show");
+    void this.offsetWidth;
+    this.classList.add("show");
+    setTimeout(() => this.classList.remove("show"), displayDuration);
+  }
+};
+customElements.define("wavelength-snackbar", WavelengthSnackbar);
+
 // src/web-components/wavelength-planetrail.template.html
 var wavelength_planetrail_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  .flex-container {\n    display: flex;\n    align-items: center;\n  }\n\n  #inner {\n    border-radius: 25px;\n    height: 2px;\n    flex-grow: 1;\n    background-color: var(--color);\n  }\n\n  #path {\n    fill: var(--color);\n  }\n</style>\n\n<div id="outer" class="flex-container" >\n  <div id="inner">\n  </div>\n  <div>\n  <svg id="plane" width="40" height="40">\n    <path\n      d="M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"\n      id="path"\n    />\n  </svg>\n  </div>\n</div>\n';
 
@@ -6015,6 +6092,69 @@ var WavelengthPlaneTrail = class extends StylingMixin(BasePlaneTrail) {
 if (!customElements.get("wavelength-planetrail")) {
   customElements.define("wavelength-planetrail", WavelengthPlaneTrail);
 }
+
+// src/web-components/wavelength-manyplanes.template.html
+var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  #plane-container {\n    display: flex;\n    justify-content: flex-end;\n    height: 40px;\n  }\n</style>\n<div id="plane-container" class="flex-container"></div>';
+
+// src/web-components/wavelength-manyplanes.ts
+var WavelengthManyPlanes = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_manyplanes_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  updateComponent() {
+    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const trailDir = this.getAttribute("trail-dir") || "right";
+    const opacity = this.getAttribute("opacity") || "1";
+    const color = this.getAttribute("color") || "#00308F";
+    const gradient = this.getAttribute("gradient") || "false";
+    const spaced = this.getAttribute("spaced") || "true";
+    const planeContainer = this.shadow.getElementById("plane-container");
+    if (planeContainer === null) {
+      return;
+    }
+    planeContainer.replaceChildren();
+    planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
+    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
+    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+      let currentPlaneOpacity = opacity;
+      if (gradient === "true") {
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+      }
+      planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
+    }
+  }
+  createPlane(opacity, color, flipped) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const newPlane = document.createElementNS(svgNS, "svg");
+    const planePath = document.createElementNS(svgNS, "path");
+    newPlane.setAttribute("width", "40");
+    newPlane.setAttribute("height", "40");
+    newPlane.setAttribute("id", "planes");
+    newPlane.setAttribute("transform", flipped ? "matrix(-1, 0, 0, 1, 0, 0)" : "");
+    newPlane.setAttribute("opacity", opacity);
+    newPlane.appendChild(planePath);
+    planePath.setAttribute(
+      "d",
+      "M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"
+    );
+    planePath.setAttribute("fill", color);
+    return newPlane;
+  }
+};
+if (!customElements.get("wavelength-manyplanes")) {
+  customElements.define("wavelength-manyplanes", WavelengthManyPlanes);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -6028,11 +6168,13 @@ export {
   WavelengthFileDropZone,
   WavelengthForm,
   WavelengthInput,
+  WavelengthManyPlanes,
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
   WavelengthNotificationPanel,
   WavelengthPlaneTrail,
   WavelengthProgressBar,
+  WavelengthSnackbar,
   WavelengthTitleBar
 };
 /*! Bundled license information:

package/package.json

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