@madj2k/fe-frontend-kit 2.0.27 → 2.0.29

package/package.json

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

package/readme.md

@@ -402,11 +402,13 @@ A lightweight fade slider using opacity and z-index.
 Init with available options:
 ```
 import { Madj2kSimpleFadeSlider } from '@madj2k/fe-frontend-kit/tools/simple-fade-slider';
-const fadeSlider = new Madj2kSimpleFadeSlider('.js-fade-slider', {
-    duration: 8,
-    classSlide: 'fade-slider-item',
-    classVisible: 'is-visible',
-    debug: true
+document.querySelectorAll('.js-fade-slider').forEach((el) => {
+    new Madj2kSimpleFadeSlider(el, {
+        duration: 8,
+        classSlide: 'fade-slider-item',
+        classVisible: 'is-visible',
+        debug: true
+    });
 });
 ```
 

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

@@ -23,9 +23,12 @@
 ///
 /// @group Layout
 ///
+/// @param {Map} $page-padding - A map of breakpoint names to padding values for responsive control. Defaults to predefined breakpoint-based paddings.
 /// @param {String} $page-wrap-class - The base class used to wrap the entire page (for context-aware styling). Defaults to `'.page'`.
 /// @param {String} $wrap-class - The base utility class prefix for full-width behavior. Defaults to `'.fullwidth'`.
 /// @param {Length} $default-padding - The default horizontal padding applied when full-width is active. Defaults to `16px`.
+/// @param {String} $padding-class - The class prefix used for standalone padding utilities. Defaults to `$page-wrap-class`.
+/// @param {Number} $version - Version number for compatibility handling. Defaults to `1`.
 ///
 /// @example html
 ///   <!-- 1) Around a Bootstrap container -->
@@ -85,7 +88,9 @@
     ),
     $page-wrap-class: '.page',
     $wrap-class: '.fullwidth',
-    $default-padding: 16px
+    $default-padding: 16px,
+    $padding-class: $page-wrap-class,
+    $version: 1,
 ) {
 
     #{$page-wrap-class} {
@@ -93,7 +98,12 @@
         /** default settings without breakpoints **/
         @include page-padding-only($default-padding);
 
-         /** for usage as wrap around a container */
+        /** addition class which simply contains the normal padding */
+        #{$padding-class}-padding {
+            @include page-padding-only($default-padding, 'full');
+        }
+
+        /** for usage as wrap around a container */
         #{$wrap-class}-1 {
             @include page-padding-container($default-padding);
 
@@ -134,6 +144,11 @@
 
             @include media-breakpoint-up($breakpoint) {
 
+                /** addition class which simply contains the normal padding */
+                #{$padding-class}-padding {
+                    @include page-padding-only($padding-x, 'full');
+                }
+
                 /** for usage as wrap around a container */
                 #{$wrap-class}-1 {
                     @include page-padding-container($padding-x);
@@ -155,9 +170,9 @@
 
                 /** reset */
                 #{$wrap-class}-0,
-               .row #{$wrap-class}-0{
+                .row #{$wrap-class}-0{
                     @include page-padding-row-reset();
-               }
+                }
 
                 #{$wrap-class}-0 {
                     #{$wrap-class}-inner{
@@ -179,8 +194,17 @@
 
             /** ensure dominance with body-prefix */
             body #{$page-wrap-class} {
-                padding-left: $padding-x - math.div($grid-gutter-width, 2);
-                padding-right: $padding-x - math.div($grid-gutter-width, 2);
+
+                // seems to be a bug in older version. But we keep it for compatibility
+                @if ($version < 2) {
+                    padding-left: $padding-x - math.div($grid-gutter-width, 2);
+                    padding-right: $padding-x - math.div($grid-gutter-width, 2);
+                }
+
+                /** addition class which simply contains the normal padding */
+                #{$padding-class}-#{$breakpoint}-padding {
+                    @include page-padding-only($padding-x, 'full');
+                }
 
                 /** for usage as wrap around a container */
                 #{$wrap-class}-#{$breakpoint}-1 {
@@ -212,9 +236,14 @@
     }
 }
 
-@mixin page-padding-only ($padding-x) {
-    padding-left: $padding-x - math.div($grid-gutter-width, 2);
-    padding-right: $padding-x - math.div($grid-gutter-width, 2);
+@mixin page-padding-only ($padding-x, $variant: 'default') {
+    @if ($variant == 'full') {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    } @else {
+        padding-left: $padding-x - math.div($grid-gutter-width, 2);
+        padding-right: $padding-x - math.div($grid-gutter-width, 2);
+    }
 }
 
 @mixin page-padding-container ($padding-x) {
@@ -230,7 +259,6 @@
     margin-left: $padding-x * -1 + math.div($grid-gutter-width, 2);
     margin-right: $padding-x * -1 + math.div($grid-gutter-width, 2);
     overflow: hidden;
-
     /*
     $additionalWidth: $padding-x * 2;
     width: calc(100% + $additionalWidth);

package/tools/simple-fade-slider/simple-fade-slider-2.0.js

@@ -10,17 +10,19 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 1.0.0
+ * @version 1.1.0
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
  * @example
- * // Initialize with defaults
- * const slider = new Madj2kSimpleFadeSlider('.js-fade-slider');
+ * // Initialize with a single DOM element
+ * const el = document.querySelector('.js-fade-slider');
+ * const slider = new Madj2kSimpleFadeSlider(el);
  *
  * @example
  * // Initialize with custom config
- * const slider = new Madj2kSimpleFadeSlider('.js-fade-slider', {
+ * const el = document.querySelector('.js-fade-slider');
+ * const slider = new Madj2kSimpleFadeSlider(el, {
  *   duration: 8,
  *   classSlide: 'fade-slider-item',
  *   classVisible: 'is-visible',
@@ -28,6 +30,12 @@
  * });
  *
  * @example
+ * // Initialize multiple sliders with forEach
+ * document.querySelectorAll('.js-fade-slider').forEach((el) => {
+ *   new Madj2kSimpleFadeSlider(el, { duration: 6 });
+ * });
+ *
+ * @example
  * // Example HTML
  * <section class="fade-slider js-fade-slider" aria-label="Image gallery">
  *   <div class="fade-slider-item"><img src="img1.jpg" alt="Description 1"></div>
@@ -66,16 +74,20 @@ class Madj2kSimpleFadeSlider {
   };
 
   /**
-   * @param {string} selector - CSS selector for the slider container
+   * @param {HTMLElement} container - DOM element for the slider container
    * @param {Object} config - configuration options
    * @param {number} [config.duration=12] - time in seconds between slide changes
-   * @param {string} [config.classSlide='fade-slide'] - class for each slide
+   * @param {string} [config.classSlide='fade-slider-item'] - class for each slide
    * @param {string} [config.classVisible='is-visible'] - class for visible slide
    * @param {boolean} [config.debug=false] - enable debug logging
    */
-  constructor(selector, config = {}) {
-    this.container = document.querySelector(selector);
-    if (!this.container) return;
+  constructor(container, config = {}) {
+    if (!(container instanceof HTMLElement)) {
+      console.warn('[Madj2kSimpleFadeSlider] No valid container element provided.');
+      return;
+    }
+
+    this.container = container;
 
     this.config = {
       ...this.config,