@profitlich/template-toolkit 5.3.1 → 5.4.0

package/components/menu-toggle/MenuToggle.js

@@ -6,6 +6,7 @@ import './menu-toggle.scss';
  * @property {string}  menuSelector             CSS-Selektor (`querySelector`) des Menü-Containers.
  * @property {string}  menuLinkSelector         CSS-Selektor für Menü-Links, die das Menü beim Klick schliessen (z.B. '.menu-link').
  * @property {string}  menuItemSelector         CSS-Selektor des Menü-Wrappers; Klicks ausserhalb schliessen das Menü (z.B. '.menu').
+ * @property {boolean} [linkClickClosesMenu=true] Wenn `false`, bleibt das Menü beim Klick auf einen `menuLinkSelector`-Link offen. Default `true` = Menü schliesst beim Link-Klick.
  * @property {string} [shiftElementSelector]    Optional: CSS-Selektor des Elements, das beim Öffnen um die Scrollbar-Breite verschoben/verbreitert wird, damit z.B. ein fixierter Header nicht springt.
  * @property {number} [shiftDelay=0]            Verzögerung in Sekunden, bevor Scrollbar gemessen und Body fixiert wird – nützlich, wenn vorher noch eine CSS-Animation läuft, die die Scrollbar entfernt.
  * @property {boolean} [deferPositionFixed=false] Setzt `data-menu-fixed` erst nach `shiftDelay` statt sofort. Nötig, wenn das Fixieren eine laufende Öffnungs-Animation stören würde.
@@ -19,6 +20,7 @@ export class MenuToggle {
     #menu;
     #menuLinkSelector;
     #menuItemSelector;
+    #linkClickClosesMenu;
     #scrollbarWidth;
     #shiftElement;
     #shiftDelay;
@@ -40,6 +42,7 @@ export class MenuToggle {
         menuSelector,
         menuLinkSelector,
         menuItemSelector,
+        linkClickClosesMenu = true,
         shiftElementSelector = null,
         shiftDelay = 0,
         deferPositionFixed = false,
@@ -50,6 +53,7 @@ export class MenuToggle {
         this.#menu = document.querySelector(menuSelector);
         this.#menuLinkSelector = menuLinkSelector;
         this.#menuItemSelector = menuItemSelector;
+        this.#linkClickClosesMenu = linkClickClosesMenu;
         this.#shiftElement = shiftElementSelector ? document.querySelector(shiftElementSelector) : null;
         this.#shiftDelay = shiftDelay * 1000;
         this.#deferPositionFixed = deferPositionFixed;
@@ -71,7 +75,7 @@ export class MenuToggle {
         });
 
         this.#menu.addEventListener('click', (event) => {
-            if (this.isActive && event.target.matches(this.#menuLinkSelector)) {
+            if (this.#linkClickClosesMenu && this.isActive && event.target.matches(this.#menuLinkSelector)) {
                 this.#toggleMenu();
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "5.3.1",
+    "version": "5.4.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "sass": "scss/forward.scss",

package/scss/core/capsize.scss

@@ -1,14 +1,22 @@
+@use "sass:meta";
+
 // Emittiert die Capsize-Pseudo-Elemente (::before/::after mit Em-Trims)
 // für den aktuellen Selektor. Die Inhalte (welche Pseudo-Elemente, welche
 // Properties) kommen vollständig aus @capsizecss/core via der
 // Sass-Custom-Function capsize-pseudo-elements (registriert im
 // vite/capsizeSassFunctions.js des Toolkits).
 @mixin capsize($name, $fontSize, $lineHeight) {
-    $pseudo: capsize-pseudo-elements($name, $fontSize, $lineHeight);
-    @each $selector-suffix, $props in $pseudo {
-        &#{$selector-suffix} {
-            @each $prop, $val in $props {
-                #{$prop}: $val;
+    // Capsize ist opt-in: ohne registrierte Custom-Function wird übersprungen,
+    // damit ein fehlender Vite-Setup nicht zu kryptischem Sass-Fehler führt.
+    @if not meta.function-exists("capsize-pseudo-elements") {
+        @warn "Capsize ist nicht eingerichtet: Custom-Function capsize-pseudo-elements fehlt. Siehe template-toolkit/CLAUDE.md, Abschnitt Capsize. Aufruf für \"#{$name}\" wird übersprungen.";
+    } @else {
+        $pseudo: capsize-pseudo-elements($name, $fontSize, $lineHeight);
+        @each $selector-suffix, $props in $pseudo {
+            &#{$selector-suffix} {
+                @each $prop, $val in $props {
+                    #{$prop}: $val;
+                }
             }
         }
     }

package/scss/core/layout.scss

@@ -88,7 +88,12 @@ $mediaqueries: (
     line-height: size($layout, $lineHeight);
 
     @if ($capsize != null) {
-        @include capsize($capsize, $fontSize, $lineHeight);
+        // 4. Argument ist der Capsize-Font-Name (String). Frühere API hatte hier font-weight.
+        @if meta.type-of($capsize) != 'string' {
+            @warn "font(): 4. Argument (Capsize-Font-Name) muss ein String sein, erhalten #{meta.type-of($capsize)} \"#{$capsize}\". Vermutlich Altlast aus früherer API (font-weight). Capsize wird übersprungen.";
+        } @else {
+            @include capsize($capsize, $fontSize, $lineHeight);
+        }
     }
 
 }