@wavelengthusaf/components 3.3.9 → 3.3.11

package/dist/cjs/index.d.cts

@@ -318,9 +318,9 @@ interface WavelengthTitleBarProps {
     titleText?: string;
     subtitleText?: string;
     textColor?: string;
-    textShadow?: boolean;
+    shadowColor?: string;
 }
-declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthTitleBar({ titleText, subtitleText, textColor, shadowColor }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
     bannerText?: string;

package/dist/esm/index.d.ts

@@ -318,9 +318,9 @@ interface WavelengthTitleBarProps {
     titleText?: string;
     subtitleText?: string;
     textColor?: string;
-    textShadow?: boolean;
+    shadowColor?: string;
 }
-declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthTitleBar({ titleText, subtitleText, textColor, shadowColor }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
     bannerText?: string;

package/dist/esm/index.js

@@ -1246,6 +1246,10 @@ var WavelengthBanner = class extends HTMLElement {
         font-family: sans-serif;
         font-size: 1rem;
       }
+
+      p {
+        margin: 0;
+      }
     `;
     this.container = document.createElement("div");
     this.container.classList.add("banner");
@@ -2300,6 +2304,7 @@ var WavelengthTitleBar = class extends HTMLElement {
     subtitle.classList.add("subtitle");
     subtitle.textContent = this.getAttribute("subtitle-text") || "Default Subtitle";
     const textColor = this.getAttribute("text-color") || "#34649b";
+    const shadowColor = this.getAttribute("shadow-color");
     const style3 = document.createElement("style");
     style3.textContent = `
   :host {
@@ -2312,7 +2317,7 @@ var WavelengthTitleBar = class extends HTMLElement {
   .title {
     font-family: "Goldman", sans-serif;
     font-size: 3.75rem;
-    text-shadow: 0.313rem 0.313rem 0.375rem #FFFFFF;
+    ${shadowColor ? `text-shadow: 0.313rem 0.313rem 0.375rem ${shadowColor};` : ""}
     -webkit-text-stroke: 1px black;
     letter-spacing: 0.07em;
     user-select: none;
@@ -2342,35 +2347,32 @@ var WavelengthTitleBar = class extends HTMLElement {
     }
   }
   static get observedAttributes() {
-    return ["title-text", "subtitle-text", "text-color", "has-shadow"];
+    return ["title-text", "subtitle-text", "text-color", "shadow-color"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      if (name === "title-text") {
-        const titleElement = this.shadowRoot?.querySelector(".title");
-        if (titleElement) {
-          titleElement.textContent = newValue;
-        }
-      } else if (name === "subtitle-text") {
-        const subtitleElement = this.shadowRoot?.querySelector(".subtitle");
-        if (subtitleElement) {
-          subtitleElement.textContent = newValue;
-        }
-      } else if (name === "text-color") {
-        const titleElement = this.shadowRoot?.querySelector(".title");
-        const subtitleElement = this.shadowRoot?.querySelector(".subtitle");
-        if (titleElement) {
-          titleElement.style.color = newValue;
-        }
-        if (subtitleElement) {
-          subtitleElement.style.color = newValue;
-        }
-      } else if (name === "has-shadow") {
-        const titleElement = this.shadowRoot?.querySelector(".title");
+    if (oldValue === newValue) return;
+    const titleElement = this.shadowRoot?.querySelector(".title");
+    const subtitleElement = this.shadowRoot?.querySelector(".subtitle");
+    switch (name) {
+      case "title-text":
+        if (titleElement) titleElement.textContent = newValue;
+        break;
+      case "subtitle-text":
+        if (subtitleElement) subtitleElement.textContent = newValue;
+        break;
+      case "text-color":
+        if (titleElement) titleElement.style.color = newValue;
+        if (subtitleElement) subtitleElement.style.color = newValue;
+        break;
+      case "shadow-color":
         if (titleElement) {
-          titleElement.style.textShadow = newValue !== "false" ? "none" : "0.313rem 0.313rem 0.375rem #FFFFFF";
+          if (newValue) {
+            titleElement.style.textShadow = `0.313rem 0.313rem 0.375rem ${newValue}`;
+          } else {
+            titleElement.style.textShadow = "";
+          }
         }
-      }
+        break;
     }
   }
 };
@@ -6334,16 +6336,16 @@ function WavelengthFooter({ text, textColor }) {
 // src/components/headers/WavelengthTitleBar/WavelengthTitleBar.tsx
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow }) {
+function WavelengthTitleBar2({ titleText, subtitleText, textColor, shadowColor }) {
   const ref = useRef4(null);
   useEffect3(() => {
     if (ref.current) {
       ref.current.setAttribute("title-text", titleText || "Default Title");
       ref.current.setAttribute("subtitle-text", subtitleText || "Default Subtitle");
       ref.current.setAttribute("text-color", textColor || "#34649b");
-      ref.current.setAttribute("has-shadow", textShadow ? "false" : "true");
+      ref.current.setAttribute("shadow-color", shadowColor || "");
     }
-  }, [titleText, subtitleText, textColor, textShadow]);
+  }, [titleText, subtitleText, textColor, shadowColor]);
   return /* @__PURE__ */ jsx22("wavelength-title-bar", { ref });
 }