@schukai/monster 4.43.5 → 4.43.7

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+## [4.43.7] - 2025-10-11
+
+### Bug Fixes
+
+- position submenu
+### Changes
+
+- close issue [#329](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/329)
+- update webtests
+
+
+
+## [4.43.6] - 2025-10-11
+
+### Bug Fixes
+
+- update the workflow navigation  [#329](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/329)
+
+
+
 ## [4.43.5] - 2025-10-10
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.43.5"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.43.7"}

package/source/components/form/password.mjs

@@ -14,8 +14,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomControl } from "../../dom/customcontrol.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+  assembleMethodSymbol,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { PasswordStyleSheet } from "./stylesheet/password.mjs";
 import { fireCustomEvent } from "../../dom/events.mjs";
@@ -61,107 +61,107 @@ export const inputElementSymbol = Symbol("inputIconElement");
  * @fires monster-password-show
  */
 class Password extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/password@@instance");
-	}
+  /**
+   * This method is called by the `instanceof` operator.
+   * @returns {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/form/password@@instance");
+  }
 
-	/**
-	 *
-	 * @return {Components.Form.Password
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initPasswordState.call(this);
-		return this;
-	}
+  /**
+   *
+   * @return {Components.Form.Password
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+    initPasswordState.call(this);
+    return this;
+  }
 
-	/**
-	 * The current value of the Switch
-	 * @return {string}
-	 */
-	get value() {
-		return this.getOption("value");
-	}
+  /**
+   * The current value of the Switch
+   * @return {string}
+   */
+  get value() {
+    return this.getOption("value");
+  }
 
-	/**
-	 * Set value
-	 * @property {string} value
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		this[inputElementSymbol].value = value;
-		this.setFormValue(value);
-	}
+  /**
+   * Set value
+   * @property {string} value
+   */
+  set value(value) {
+    this.setOption("value", value);
+    this[inputElementSymbol].value = value;
+    this.setFormValue(value);
+  }
 
-	/**
-	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {string} templateMapping.hidden-icon The hidden icon template (without svg tag)
-	 * @property {string} templateMapping.visible-icon The visible icon template (without svg tag)
-	 * @property {string} type="password" The type of the input field
-	 * @property {string} placeholder="" The placeholder of the input field
-	 * @property {boolean} required=false The required state of the input field
-	 * @property {string} autocomplete="off" The autocomplete state of the input field
-	 * @property {string} inputmode="text" The inputmode state of the input field
-	 * @property {Object} aria Aria attributes
-	 * @property {boolean} aria.required=false The required state of the input field
-	 * @property {string} aria.placeholder="" The placeholder of the input field
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			templateMapping: {
-				"hidden-icon": `                    
+  /**
+   * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * The individual configuration values can be found in the table.
+   *
+   * @property {Object} templates Template definitions
+   * @property {string} templates.main Main template
+   * @property {string} templateMapping.hidden-icon The hidden icon template (without svg tag)
+   * @property {string} templateMapping.visible-icon The visible icon template (without svg tag)
+   * @property {string} type="password" The type of the input field
+   * @property {string} placeholder="" The placeholder of the input field
+   * @property {boolean} required=false The required state of the input field
+   * @property {string} autocomplete="off" The autocomplete state of the input field
+   * @property {string} inputmode="text" The inputmode state of the input field
+   * @property {Object} aria Aria attributes
+   * @property {boolean} aria.required=false The required state of the input field
+   * @property {string} aria.placeholder="" The placeholder of the input field
+   * @property {boolean} disabled=false Disabled state
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+      templateMapping: {
+        "hidden-icon": `                    
                     <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
                     <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
                     <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>`,
-				"visible-icon": `
+        "visible-icon": `
                     <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                     <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>`,
-			},
-			type: "password",
-			placeholder: "",
-			required: false,
-			autocomplete: "off",
-			inputmode: "text",
-			aria: {
-				required: false,
-				placeholder: "",
-			},
-			disabled: false,
-			value: null,
+      },
+      type: "password",
+      placeholder: "",
+      required: false,
+      autocomplete: "off",
+      inputmode: "text",
+      aria: {
+        required: false,
+        placeholder: "",
+      },
+      disabled: false,
+      value: null,
 
-			eventProcessing: true,
-		});
-	}
+      eventProcessing: true,
+    });
+  }
 
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-password";
-	}
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-password";
+  }
 
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [PasswordStyleSheet];
-	}
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [PasswordStyleSheet];
+  }
 }
 
 /**
@@ -171,54 +171,54 @@ class Password extends CustomControl {
  * @fires monster-password-show
  */
 function initEventHandler() {
-	const self = this;
-	const element = this[passwordElementSymbol];
+  const self = this;
+  const element = this[passwordElementSymbol];
 
-	const type = "click";
+  const type = "click";
 
-	this[hiddenIconElementSymbol].addEventListener(type, function (event) {
-		fireCustomEvent(self, "monster-password-show", {
-			element: self,
-		});
+  this[hiddenIconElementSymbol].addEventListener(type, function (event) {
+    fireCustomEvent(self, "monster-password-show", {
+      element: self,
+    });
 
-		requestAnimationFrame(() => {
-			self[visibleIconElementSymbol].classList.remove("hidden");
-			self[hiddenIconElementSymbol].classList.add("hidden");
-			self.setOption("type", "text");
-		});
-	});
+    requestAnimationFrame(() => {
+      self[visibleIconElementSymbol].classList.remove("hidden");
+      self[hiddenIconElementSymbol].classList.add("hidden");
+      self.setOption("type", "text");
+    });
+  });
 
-	this[visibleIconElementSymbol].addEventListener(type, function (event) {
-		fireCustomEvent(self, "monster-password-hide", {
-			element: self,
-		});
+  this[visibleIconElementSymbol].addEventListener(type, function (event) {
+    fireCustomEvent(self, "monster-password-hide", {
+      element: self,
+    });
 
-		requestAnimationFrame(() => {
-			self[visibleIconElementSymbol].classList.add("hidden");
-			self[hiddenIconElementSymbol].classList.remove("hidden");
-			self.setOption("type", "password");
-		});
-	});
+    requestAnimationFrame(() => {
+      self[visibleIconElementSymbol].classList.add("hidden");
+      self[hiddenIconElementSymbol].classList.remove("hidden");
+      self.setOption("type", "password");
+    });
+  });
 
-	this[inputElementSymbol].addEventListener("input", function (event) {
-		self.setFormValue(self.value);
-		self.setOption("value", this.value);
-	});
+  this[inputElementSymbol].addEventListener("input", function (event) {
+    self.setFormValue(self.value);
+    self.setOption("value", this.value);
+  });
 
-	return this;
+  return this;
 }
 
 /**
  * @private
  */
 function initPasswordState() {
-	if (this.getOption("type") === "password") {
-		this[visibleIconElementSymbol].classList.add("hidden");
-		this[hiddenIconElementSymbol].classList.remove("hidden");
-	} else {
-		this[visibleIconElementSymbol].classList.remove("hidden");
-		this[hiddenIconElementSymbol].classList.add("hidden");
-	}
+  if (this.getOption("type") === "password") {
+    this[visibleIconElementSymbol].classList.add("hidden");
+    this[hiddenIconElementSymbol].classList.remove("hidden");
+  } else {
+    this[visibleIconElementSymbol].classList.remove("hidden");
+    this[hiddenIconElementSymbol].classList.add("hidden");
+  }
 }
 
 /**
@@ -226,21 +226,21 @@ function initPasswordState() {
  * @return {void}
  */
 function initControlReferences() {
-	this[passwordElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+  this[passwordElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="control"]`,
+  );
 
-	this[visibleIconElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="visible-icon"]`,
-	);
+  this[visibleIconElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="visible-icon"]`,
+  );
 
-	this[hiddenIconElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="hidden-icon"]`,
-	);
+  this[hiddenIconElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="hidden-icon"]`,
+  );
 
-	this[inputElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="input"]`,
-	);
+  this[inputElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="input"]`,
+  );
 }
 
 /**
@@ -248,8 +248,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <div data-monster-role="control" part="control">
             <monster-input-group part="input-group">
                 <input data-monster-role="input"

package/source/components/navigation/site-navigation.mjs

@@ -204,7 +204,6 @@ function initEventHandler() {
       if (window.innerWidth > 768) {
         computePosition(hamburgerButton, hamburgerNav, {
           placement: "bottom-end",
-          strategy: "fixed",
           middleware: [
             offset(8),
             flip(),
@@ -313,9 +312,14 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
     const component = this;
     let cleanup;
     let hideTimeout;
+    let isHovering = false;
 
     const immediateHide = () => {
       submenu.style.display = "none";
+      Object.assign(submenu.style, {
+        maxHeight: "",
+        overflowY: "",
+      });
       submenu
         .querySelectorAll(
           "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
@@ -323,19 +327,16 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
         .forEach((sub) => {
           sub.style.display = "none";
         });
-
       fireCustomEvent(this, "monster-submenu-hide", {
         context,
         trigger: parentLi,
         submenu,
         level,
       });
-
       if (cleanup) {
         cleanup();
         cleanup = null;
       }
-
       if (
         level === 1 &&
         component[activeSubmenuHiderSymbol] === immediateHide
@@ -346,8 +347,6 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
 
     const show = () => {
       component[hideHamburgerMenuSymbol]?.();
-      clearTimeout(hideTimeout);
-
       if (level === 1) {
         if (
           component[activeSubmenuHiderSymbol] &&
@@ -368,7 +367,6 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
             }
           });
       }
-
       submenu.style.display = "block";
       fireCustomEvent(this, "monster-submenu-show", {
         context,
@@ -376,16 +374,14 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
         submenu,
         level,
       });
-
-      if (level === 1 && !cleanup) {
+      if (!cleanup) {
         cleanup = autoUpdate(parentLi, submenu, () => {
-          computePosition(parentLi, submenu, {
-            placement: "bottom-start",
-            strategy: "fixed",
-            middleware: [
-              offset(8),
-              flip({ fallbackPlacements: ["top-start"] }),
-              shift({ padding: 8 }),
+          const middleware = [offset(8), flip(), shift({ padding: 8 })];
+          const containsSubmenus = submenu.querySelector(
+            "ul, div[part='mega-menu']",
+          );
+          if (!containsSubmenus) {
+            middleware.push(
               size({
                 apply: ({ availableHeight, elements }) => {
                   Object.assign(elements.floating.style, {
@@ -395,7 +391,11 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
                 },
                 padding: 8,
               }),
-            ],
+            );
+          }
+          computePosition(parentLi, submenu, {
+            placement: level === 1 ? "bottom-start" : "right-start",
+            middleware: middleware,
           }).then(({ x, y, strategy }) => {
             Object.assign(submenu.style, {
               position: strategy,
@@ -407,22 +407,33 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
       }
     };
 
-    const hideWithDelay = () => {
-      hideTimeout = setTimeout(immediateHide, 200);
+    const handleMouseEnter = () => {
+      isHovering = true; // Status auf "aktiv" setzen
+      clearTimeout(hideTimeout);
+      if (submenu.style.display !== "block") {
+        show();
+      }
     };
 
-    parentLi.addEventListener("mouseenter", show);
-    parentLi.addEventListener("mouseleave", hideWithDelay);
-    submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
-    submenu.addEventListener("mouseleave", hideWithDelay);
+    const handleMouseLeave = () => {
+      isHovering = false; // Status auf "inaktiv" setzen
+      hideTimeout = setTimeout(() => {
+        if (!isHovering) {
+          immediateHide();
+        }
+      }, 250);
+    };
+
+    parentLi.addEventListener("mouseenter", handleMouseEnter);
+    parentLi.addEventListener("mouseleave", handleMouseLeave);
+    submenu.addEventListener("mouseenter", handleMouseEnter);
+    submenu.addEventListener("mouseleave", handleMouseLeave);
   } else {
-    // Click behavior
     const anchor = parentLi.querySelector(":scope > a");
     if (anchor) {
       anchor.addEventListener("click", (event) => {
         event.preventDefault();
         event.stopPropagation();
-
         if (!submenu.classList.contains("is-open")) {
           [...parentLi.parentElement.children]
             .filter((li) => li !== parentLi)
@@ -435,7 +446,6 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
               }
             });
         }
-
         const isOpen = submenu.classList.toggle("is-open");
         const eventName = isOpen
           ? "monster-submenu-show"
@@ -450,7 +460,6 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
     }
   }
 
-  // Recursive call for nested lists
   if (submenu.tagName === "UL") {
     submenu
       .querySelectorAll(":scope > li")

package/source/components/navigation/style/site-navigation.pcss

@@ -174,22 +174,6 @@
   background-color: var(--monster-color-primary-2);
 }
 
-[part="visible-list"] [part="submenu"] [part="submenu"] {
-  position: relative;
-  top: auto;
-  left: auto;
-  box-shadow: none;
-  border: none;
-  border-top: 1px solid var(--monster-color-primary-2);
-  min-width: unset;
-  margin-top: var(--monster-space-3);
-  background-color: transparent;
-  padding-top: var(--monster-space-3);
-  padding-bottom: 0;
-  padding-right: 0;
-  padding-left: var(--monster-space-3);
-}
-
 [part="mega-menu"] {
   padding: var(--monster-space-4);
   min-width: 400px;