@madj2k/fe-frontend-kit 2.0.32 → 2.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.32",
+  "version": "2.0.34",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

package/sass/bootstrap-5.3/10_mixins/_icons.scss

@@ -91,8 +91,12 @@
 ///
 /// @license
 /// GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+/// @deprecated
 ///
 @mixin toggle-icon($selector: '.toggle') {
+
+    @warn "toggle-icon() is deprecated. Use toggle() instead.";
+
     #{$selector}:has(.icon:first-child) {
         line-height: 1; // icon-only toggle buttons
     }

package/sass/bootstrap-5.3/10_mixins/_nav.scss

@@ -250,6 +250,12 @@
     align-items: center;
     gap: rem-calc($gap);
     height: 100%;
+
+    @warn "nav-toggle-group() is deprecated. Use toggle-group() instead.";
+
+    @include toggle-group(
+        $gap: $gap,
+    );
 }
 
 
@@ -309,49 +315,13 @@
         "icon-plus": unquote('"\\e908"')
     )
 ) {
-    background-color: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-
-    &:has(.nav-toggle-icon) {
-        display: flex;
-        align-items: center;
-
-        // variant with icons as font
-        &[aria-expanded="true"] {
-            @each $icon-class, $content in $icon-mappings {
-                .#{$icon-class} {
-                    &:before {
-                        content: $content;
-                    }
-                }
-            }
-        }
-
-        // variant with icons in a sprite
-        .nav-toggle-icon-opened {
-            display: none;
-        }
-
-        &[aria-expanded="true"] {
-            .nav-toggle-icon-opened {
-                display: inline-block;
-            }
-            .nav-toggle-icon-closed {
-                display: none;
-            }
-        }
-    }
 
-    &-icon:not(:has(svg)),
-    &-icon svg {
-        font-size: rem-calc($icon-size);
-        width: rem-calc($icon-size);
-        color: $icon-color;
-    }
+    @warn "nav-toggle() is deprecated. Use toggle() instead.";
 
-    &-icon svg {
-        height: 100%;
-    }
+    @include toggle(
+        $icon-size: $icon-size,
+        $icon-color: $icon-color,
+        $icon-mappings: $icon-mappings,
+        $icon-selector: '.nav-toggle-icon'
+    );
 }

package/sass/bootstrap-5.3/10_mixins/_toggle.scss

@@ -0,0 +1,141 @@
+
+/* ==================================================
+* Toggle
+* ==================================================*/
+/// Creates a button group container for toggles.
+///
+/// Used to align toggle buttons and icons horizontally with spacing.
+/// Useful in responsive navigation headers.
+///
+/// @group Toggle
+///
+/// @param {Length} $gap - The spacing between toggle elements. Defaults to `$spacer`.
+///
+/// @example html
+///   <div class="toggle-group">
+///     <button class="toggle" aria-expanded="false">
+///       <i class="toggle-icon icon-hamburger"></i>
+///     </button>
+///   </div>
+///
+/// @example scss
+///   .toggle-group {
+///     @include toggle-group($gap: 1rem);
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin toggle-group(
+    $gap: 16px
+) {
+    display: flex;
+    align-items: center;
+    gap: rem-calc($gap);
+    height: 100%;
+}
+
+
+/// Creates a button element for toggling.
+///
+/// Features:
+/// - Accessible button with `aria-expanded` state
+/// - Icon switching based on toggle state (e.g., hamburger to close)
+/// - Configurable icon size and colors
+/// - No default background or borders for flexible styling
+/// - Built-in accessibility outline
+///
+/// @group Toggle
+///
+/// @param {Length} $icon-size - Size of the icon (width/height). Defaults to `$spacer`.
+/// @param {Color} $icon-color - Icon color (e.g., fill or text color). Defaults to `$color-primary`.
+/// @param {Map} $icon-mappings - Map of icon toggle states (e.g., hamburger → close). Defaults to a predefined map.
+///
+/// @example html with icon font
+///   <button class="toggle" aria-expanded="false">
+///     <i class="toggle-icon icon-hamburger icon"></i>
+///   </button>
+///
+/// @example html with icon sprite
+///   <button class="toggle" aria-expanded="false">
+///     <i class="toggle-icon">
+///         <svg class="toggle-icon-opened" aria-hidden="true" focusable="false">
+///             <use href="sprite.svg#search"></use>
+///         </svg>
+///         <svg class="toggle-icon-closed" aria-hidden="true" focusable="false">
+///             <use href="sprite.svg#close"></use>
+///         </svg>
+///     </i>
+///   </button>
+///
+///
+/// @example scss
+///   .toggle {
+///     @include toggle(
+///       $icon-size: 1.5rem,
+///       $icon-color: #333,
+///       $icon-mappings: (
+///         "icon-hamburger": "icon-close",
+///         "icon-plus": "icon-minus"
+///       )
+///     );
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin toggle(
+    $icon-size: 16px,
+    $icon-color: var(--bs-primary),
+    $icon-mappings: (
+        "icon-hamburger": unquote('"\\e905"'),
+        "icon-plus": unquote('"\\e908"')
+    ),
+    $icon-selector: '.toggle-icon'
+) {
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+
+    &:has(#{$icon-selector}) {
+        display: flex;
+        align-items: center;
+
+        // variant with icons as font
+        &[aria-expanded="true"] {
+            @each $icon-class, $content in $icon-mappings {
+                .#{$icon-class} {
+                    &:before {
+                        content: $content;
+                    }
+                }
+            }
+        }
+
+        // variant with icons in a sprite
+        #{$icon-selector}-opened {
+            display: none;
+        }
+
+        &[aria-expanded="true"] {
+            #{$icon-selector}-opened {
+                display: inline-block;
+            }
+            #{$icon-selector}-closed {
+                display: none;
+            }
+        }
+    }
+
+    #{$icon-selector}:not(:has(svg)),
+    #{$icon-selector} svg {
+        font-size: rem-calc($icon-size);
+        width: rem-calc($icon-size);
+        color: $icon-color;
+    }
+
+    #{$icon-selector} svg {
+        height: 100%;
+    }
+}

package/sass/bootstrap-5.3/10_mixins/index.scss

@@ -7,5 +7,6 @@
 @import './nav';
 @import './page';
 @import './section';
+@import './toggle';
 @import './toggle-list';
 @import './unit';

package/tools/element-in-viewport/element-in-viewport-2.0.js

@@ -11,7 +11,7 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 1.0.0
+ * @version 1.0.1
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -34,7 +34,7 @@
  * document.querySelectorAll('.js-element-in-viewport').forEach((el) => {
  *   new Madj2kElementInViewport(el, {
  *     visibleClass: 'is-in-viewport',
- *     threshold: 1
+ *     threshold: 0.5
  *   });
  * });
  */
@@ -64,6 +64,17 @@ class Madj2kElementInViewport {
     this.element = element;
     this.config = { ...this.config, ...config };
 
+    const viewportHeight = window.innerHeight;
+    const elementHeight = element.offsetHeight;
+
+    if (elementHeight > viewportHeight) {
+      const adjustedThreshold = (viewportHeight * this.config.threshold) / elementHeight;
+      this._log(
+        `Element taller than viewport. Original threshold ${this.config.threshold} adjusted to ${adjustedThreshold.toFixed(3)}`
+      );
+      this.config.threshold = Math.min(adjustedThreshold, 1);
+    }
+
     this._log('Initialized with config:', this.config);
     this._observe();
   }