@madj2k/fe-frontend-kit 2.0.38 → 2.0.40

package/menus/slide-menu/slide-menu-2.0.scss

@@ -0,0 +1,129 @@
+/* ==================================================
+ * Slide Navigation
+ * ================================================== */
+
+$slide-nav-zindex: 890;
+$slide-nav-card-zindex: 666;
+$slide-nav-card-zindex-active: 9999;
+
+.slide-nav {
+    position: absolute;
+    left: 0;
+    top: -100vh;
+
+    width: 100vw;
+    height: 100vh;
+
+    overflow: hidden;
+    z-index: $slide-nav-zindex;
+    display: none;
+
+    /* prevent pointer events on inner spans */
+    a span,
+    button span {
+        pointer-events: none;
+    }
+
+    /* --------------------------------------------------
+     * Open state
+     * -------------------------------------------------- */
+    &.open {
+        display: block;
+    }
+
+    /* ==================================================
+     * Menu container
+     * (position animated via JS: top)
+     * ================================================== */
+    .slide-nav-container {
+        position: absolute;
+        top: -100%;
+        left: 0;
+
+        width: 100%;
+        height: 100vh;
+    }
+
+    /* ==================================================
+     * Cards
+     * (position animated via JS: left)
+     * ================================================== */
+    .slide-nav-card {
+        position: absolute;
+        top: 0;
+        left: 100%;
+
+        width: 100%;
+        height: 100%;
+
+        background-color: #fff;
+        z-index: $slide-nav-card-zindex;
+        transition: none;
+
+        /* active / visible card */
+        &.show {
+            left: 0;
+            z-index: $slide-nav-card-zindex-active;
+        }
+
+        /* animation lifecycle hooks */
+        &.opening,
+        &.closing {
+            box-shadow:
+                rgba(0, 0, 0, 0.25) 0px 14px 28px,
+                rgba(0, 0, 0, 0.22) 0px 20px 20px;
+        }
+    }
+
+    /* ==================================================
+     * Card inner layout
+     * ================================================== */
+
+    .slide-nav-inner {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        height: 100%;
+
+        overflow-y: auto;
+        margin: 0;
+    }
+
+    /* ==================================================
+     * Lists & items
+     * ================================================== */
+    .slide-nav-list {
+        display: flex;
+        flex-direction: column;
+
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        height: 100%;
+    }
+
+    .slide-nav-item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .slide-nav-item-back {
+        margin-bottom: 1rem;
+    }
+
+    /* ==================================================
+     * Links & buttons
+     * ================================================== */
+    .slide-nav-link,
+    .slide-nav-back,
+    .slide-nav-next {
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+    }
+}

package/package.json

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

package/readme.md

@@ -1,7 +1,7 @@
 #  @madj2k/fe-frontend-kit
 Reusable frontend toolkit including SCSS mixins and menu components (JS/SCSS).
 
-# #  Installation
+##  Installation
 ```
 npm install @madj2k/fe-frontend-kit
 ```
@@ -71,7 +71,7 @@ CSS:
              id="nav-mobile"
              data-position-ref="siteheader">
             <div class="flyout-container js-flyout-container">
-                <div class="nav-mobile-inner js-flyout-inner">
+                <div class="flyout-inner js-flyout-inner">
                     CONTENT HERE
                 </div>
             </div>
@@ -118,25 +118,27 @@ Otherwise in the opened menu the scrolling won't work.
 
 ### Height & Size Behavior
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| heightMode | 'full' \| 'maxContent' | 'full' | Determines height behavior of the flyout. |
-| animationDuration | number | 500 | Animation duration in milliseconds. |
+| Option | Type | Default | Description                                                               |
+|--------|------|---------|---------------------------------------------------------------------------|
+| animationDuration | number | 500 | Animation duration in milliseconds.                                       |
+| heightMode | 'full' \| 'maxContent' | 'full' | Determines height behavior of the flyout.                                 |
+| heightModeClassPrefix  | string | 'height-mode' | Prefix of class that is added to the DOM to indicate the used heightMode. |
 
 ### Padding & Layout Behavior
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| paddingBehavior | number | 0 | Controls dynamic horizontal padding. |
-| paddingViewPortMinWidth | number | 0 | Minimum viewport width required before padding applies. |
-| scrollHelper | boolean | true | Creates additional wrapper structure to enable scroll-locking. |
-
+| Option                  | Type                 | Default       | Description                                                               |
+|-------------------------|----------------------|---------------|---------------------------------------------------------------------------|
+| paddingBehavior         | number               | 0             | Controls dynamic horizontal padding.                                      |
+| paddingViewPortMinWidth | number               | 0             | Minimum viewport width required before padding applies.                   |
+| scrollHelper            | boolean              | true          | Creates additional wrapper structure to enable scroll-locking.            |
+| scrollMode              | 'default' \| 'inner' | 'default'      | If set to 'inner' the inner-DIV of the flyout is scrollable.              |
+| scrollModeClassPrefix  | string               | 'scroll-mode' | Prefix of class that is added to the DOM to indicate the used ccrollMode. |
 
 ### Event Handling
 
-| Option | Type | Default | Description |
-|--------|------|-------------|
-| `eventMode` | `string` | `'click'` | Default event used for toggling the menu. Can be set to `click` or `mouseover`. |
+| Option                | Type | Default | Description |
+|-----------------------|------|---------|-------------|
+| eventMode             | string | 'click'`| Default event used for toggling the menu. Can be set to `click` or `mouseover`. |
 
 
 ## Special: blur/gray effect for background
@@ -280,6 +282,301 @@ These are automatically detected:
 | **toggleElement** | The trigger element passed to the constructor. |
 
 
+# Slide-Navigation
+
+A card-based, multi-level slide menu for mobile and off-canvas navigation.
+The menu is generated dynamically from a JSON structure and HTML templates.
+
+Features:
+- Unlimited menu depth
+- Card-based sliding navigation
+- Keyboard navigation & full accessibility (WAI-ARIA)
+- Focus trapping and scroll locking
+- No jQuery required (Vanilla JS)
+- CMS-friendly (TYPO3 / dynamic content)
+
+## Usage
+Integrate the CSS- and JS-file into your project.
+Then initialize the menu on a toggle element:
+
+```js
+import { Madj2kSlideMenu } from '@madj2k/fe-frontend-kit/menus/slide-menu';
+
+document.querySelectorAll('.js-slide-nav-toggle').forEach((el) => {
+    new Madj2kSlideMenu(el, {
+        menuItemsJson: slideNavItems
+    });
+});
+```
+
+Optional: automatically close the slide menu on resize:
+
+```js
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
+
+document.addEventListener('madj2k-better-resize-event', () => {
+    document.dispatchEvent(new CustomEvent('madj2k-slidemenu-close'));
+});
+```
+
+CSS:
+```scss
+@use '@madj2k/fe-frontend-kit/menus/slide-menu' as *;
+```
+
+## Basic HTML
+
+### Toggle element
+The toggle element opens and closes the slide menu.
+It MUST define an aria-controls attribute pointing to the menu container.
+
+```html
+<button class="nav-iconlink js-slide-nav-toggle"
+        aria-label="Open Menu"
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-controls="slide-nav">
+    <span>Open Menu</span>
+</button>
+```
+
+### Menu container
+The menu container is initially empty and will be filled dynamically.
+
+```html
+<nav class="slide-nav"
+     id="slide-nav"
+     data-position-ref="navbar-wrap"></nav>
+```
+**Note:**
+If data-position-ref is set, the menu will be positioned below that element (referenced by id).
+Otherwise, it is positioned relative to the toggle.
+
+### Content wrapper
+To prevent background scrolling while the menu is open, the main content
+should be wrapped in an element with the configured contentSectionClass
+(default: js-main-content).
+
+```html
+<div class="page-main js-main-content">
+    ...
+</div>
+```
+
+
+## HTML Templates
+The slide menu is rendered from <template> elements that must exist in the DOM.
+These templates are not rendered by default and therefore do not duplicate
+navigation markup for search engines.
+
+**Note: There are example files for a TYPO3 CMS extension available.**
+
+### menuWrap
+```html
+<template class="js-slide-nav-tmpl" data-type="menuWrap">
+    <div class="slide-nav-container js-slide-nav-container">
+        <div class="slide-nav-card js-slide-nav-card %levelClass%" id="slide-card-%uid%">
+            <div class="slide-nav-inner">
+                <ul class="slide-nav-list">
+                    %menuItems%
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+```
+
+### menuItem
+```html
+<template class="js-slide-nav-tmpl" data-type="menuItem">
+    <li class="slide-nav-item %activeClass% %hasChildrenClass%">
+
+        <!-- normal link that opens the menu-item -->
+        %ifHasNoChildrenStart%
+        <a href="%link%"
+           title="%titleRaw%"
+           role="menuitem"
+           class="slide-nav-link arrow-listing-link %activeClass% %hasChildrenClass%"
+           target="%target%"
+           aria-current="%ariaCurrent%">
+            <span>%title%</span>
+        </a>
+        %ifHasNoChildrenEnd%
+
+        <!-- link that opens next card -->
+        %ifHasChildrenStart%
+        <a class="slide-nav-link slide-nav-next arrow-listing-link js-slide-nav-next animation-hover %activeClass% %hasChildrenClass%"
+           href="#"
+           role="button"
+           title="Open Submenu"
+           aria-label="Open Submenu"
+           aria-haspopup="true"
+           aria-expanded="%ariaExpanded%"
+           aria-controls="slide-card-%uid%">
+            <span>%title%</span><span class="icon-arrow-right icon"></span>
+        </a>
+        %ifHasChildrenEnd%
+        %submenu%
+    </li>
+</template>
+```
+
+### subMenuWrap
+
+```html
+<template class="js-slide-nav-tmpl" data-type="subMenuWrap">
+    <a class="slide-nav-next js-slide-nav-next"
+       href="#"
+       role="button"
+       title="Open Submenu"
+       aria-label="Open Submenu"
+       aria-haspopup="true"
+       aria-expanded="%ariaExpanded%"
+       aria-controls="slide-card-%uid%">&gt;</a>
+
+    <div class="slide-nav-card js-slide-nav-card %activeClass% %levelClass%"
+         id="slide-card-%uid%">
+        <div class="slide-nav-inner">
+            <ul class="slide-nav-list">
+                <li class="slide-nav-item-back" role="none">>
+                    <button class="slide-nav-back js-slide-nav-back"
+                            aria-label="One Level Up"
+                            aria-controls="slide-card-%uid%"
+                            data-parent-card="slide-card-%parentUid%">
+                        &lt;<span class="slide-nav-back-label">Back</span>
+                    </button>
+                </li>
+
+                <li class="slide-nav-headline %levelClass%" role="none">
+
+                    <!-- normal parent -->
+                    %ifIsNotLinkedStart%
+                    <span class="slide-nav-headline-text %currentClass% %isLinkedClass%">%title%</span>
+                    %ifIsNotLinkedEnd%
+
+                    <!-- linked parent -->
+                    %ifIsLinkedStart%
+                    <a href="%link%"
+                       title="%titleRaw%"
+                       role="menuitem"
+                       class="slide-nav-headline-link %currentClass% %hasChildrenClass% %isLinkedClass%"
+                       target="%target%"
+                       aria-current="%ariaCurrent%">
+                        <span>%title%</span>
+                    </a>
+                    %ifIsLinkedEnd%
+                </li>
+
+                %menuItems%
+            </ul>
+        </div>
+    </div>
+</template>
+```
+## Menu Data (menuItemsJson)
+
+The menu structure is defined as a hierarchical JSON array.
+
+### Example
+```js
+const slideNavItems = [
+    {
+        data: { uid: 2, pid: 1 },
+        title: 'Main Item',
+        link: '/main',
+        target: '_self',
+        active: 1,
+        current: 0,
+        hasSubpages: 1,
+        children: [
+            {
+                data: { uid: 3, pid: 2 },
+                title: 'Sub Item',
+                link: '/main/sub',
+                target: '_self',
+                active: 0,
+                current: 0,
+                hasSubpages: 0,
+                children: []
+            }
+        ]
+    },
+    {
+        data: { uid: 4, pid: 1 },
+        title: 'Second Item',
+        link: '/second',
+        target: '_self',
+        active: 0,
+        current: 0,
+        hasSubpages: 0,
+        children: []
+    }
+];
+```
+
+### Important fields
+
+| Property | Description |
+|--------|-------------|
+| data.uid | Unique identifier of the menu item |
+| data.pid | Parent identifier |
+| title | Display title |
+| link | URL |
+| target | Link target |
+| active | Marks active navigation path |
+| current | Marks current page |
+| hasSubpages | Indicates submenu existence |
+| children | Array of child items |
+
+---
+
+## Options Reference
+
+### State & Animation Classes
+
+| Option | Type | Default | Description |
+|------|------|---------|-------------|
+| openStatusClass | string | 'open' | Applied to toggle and menu when open |
+| openCardStatusClass | string | 'show' | Marks the visible card |
+| activeStatusClass | string | 'active' | Marks active navigation path |
+| currentStatusClass | string | 'current' | Marks current page |
+| animationOpenStatusClass | string | 'opening' | Applied during opening animation |
+| animationCloseStatusClass | string | 'closing' | Applied during closing animation |
+
+### Structural Classes
+
+| Option | Type | Default | Description |
+|------|------|---------|-------------|
+| menuToggleClass | string | 'js-slide-nav-toggle' | Toggle element |
+| menuWrapClass | string | 'js-slide-nav-container' | Menu container |
+| menuCardClass | string | 'js-slide-nav-card' | Card element |
+| nextCardToggleClass | string | 'js-slide-nav-next' | Submenu toggle |
+| lastCardToggleClass | string | 'js-slide-nav-back' | Back button |
+| contentSectionClass | string | 'js-main-content' | Scroll-lock wrapper |
+
+### Behavior
+
+| Option | Type | Default | Description |
+|------|------|---------|-------------|
+| animationDuration | number | 500 | Animation duration in ms |
+| loadOnOpen | boolean | true | Build menu on first open |
+| startOnHome | boolean | false | Always start on first level |
+| scrollHelper            | boolean              | true          | Creates additional wrapper structure to enable scroll-locking.            |
+
+---
+
+## Events
+
+The component dispatches the following custom events on `document`:
+
+- madj2k-slidemenu-opening
+- madj2k-slidemenu-opened
+- madj2k-slidemenu-closing
+- madj2k-slidemenu-closed
+- madj2k-slidemenu-next-opened
+- madj2k-slidemenu-previous-opened
+
+
 # JS: Banner
 A lightweight class to show a full-page overlay (banner, popup, hint or cookie layer),
 with opening and closing animation and optional cookie persistence.

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

@@ -10,15 +10,16 @@
 /// @param {Map} $map - A Sass map of color names and values (e.g. `("primary": #005fcc, "secondary": #999)`). Defaults to `$color-map`.
 ///
 /// @example scss
-///   @include background-color-classes((
-///     "primary": #005fcc,
-///     "secondary": #999,
-///     "light": #f5f5f5
-///   ));
+///   .bg-color {
+///         @include background-color-classes((
+///             "primary": #005fcc,
+///             "secondary": #999,
+///         ));
+///   }
 ///
 /// @example css
-///   .bg-primary { background-color: #005fcc; }
-///   .bg-secondary { background-color: #999; }
+///   .bg-color-primary { background-color: #005fcc; }
+///   .bg-color-secondary { background-color: #999; }
 ///
 /// @author Steffen Kroggel <developer@steffenkroggel>
 /// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
@@ -43,6 +44,46 @@
     }
 }
 
+/// Generates utility classes
+/// that set the CSS variable `--background-color` from a color map.
+///
+/// @group Utilities
+///
+/// @param {Map} $map - Sass map of color names and values.
+///
+/// @example scss
+///   .bg-color {
+///         @include background-color-variable-classes(
+///             "primary": #005fcc,
+///             "secondary": #999,
+///         ));
+///   }
+///
+/// @example css
+///   .bg-color-primary { --background-color: #005fcc; }
+///   .bg-color-secondary { --background-color: #999; }
+///
+///
+@mixin background-color-variable-classes($map) {
+    @each $key, $value in $map {
+        &-#{$key} {
+            --background-color: #{$value};
+        }
+
+        @each $breakpoint, $size in $grid-breakpoints {
+            @media (min-width: $size) {
+                &-#{$breakpoint}-#{$key} {
+                    --background-color: #{$value};
+                }
+
+                &-#{$breakpoint}-none {
+                    --background-color: transparent;
+                }
+            }
+        }
+    }
+}
+
 /// Generates utility classes for text color based on a Sass map.
 ///
 /// For each key–value pair in the provided map, a class with a suffix of `-<key>`
@@ -55,14 +96,16 @@
 /// @param {Map} $map - A Sass map of color names and values. Defaults to `$color-map`.
 ///
 /// @example scss
-///   @include font-color-classes((
-///     "danger": #e00,
-///     "success": #0a0
-///   ));
+///   .font-color {
+///         @include font-color-classes((
+///             "primary": #005fcc,
+///             "secondary": #999,
+///         ));
+///   }
 ///
 /// @example css
-///   .text-danger { color: #e00 !important; }
-///   .text-danger > * { color: #e00 !important; }
+///   .font-color-primary { color: #005fcc !important; }
+///   .font-color-secondary > * { color: #999 !important;}
 ///
 /// @author Steffen Kroggel <developer@steffenkroggel>
 /// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
@@ -97,3 +140,54 @@
         }
     }
 }
+
+/// Generates utility classes
+/// that set the CSS variable `--font-color` from a color map.
+///
+/// @group Utilities
+///
+/// @param {Map} $map - Sass map of color names and values.
+///
+/// @example scss
+///   .font-color {
+///         @include font-color-variable-classes((
+///             "primary": #005fcc,
+///             "secondary": #999,
+///         ));
+///   }
+///
+/// @example css
+///   .font-color-primary { --color: #005fcc  }
+///   .font-color-secondary > * { --color: #999 }
+///
+///
+@mixin font-color-variable-classes($map) {
+    @each $key, $value in $map {
+        &-#{$key} {
+            --color: #{$value};
+
+            & > * {
+                --color: #{$value};
+            }
+        }
+        @each $breakpoint, $size in $grid-breakpoints {
+            @media (min-width: $size) {
+                &-#{$breakpoint}-#{$key} {
+                    --color: #{$value};
+
+                    & > * {
+                        --color: #{$value};
+                    }
+                }
+
+                &-#{$breakpoint}-none {
+                    --color: inherit;
+
+                    & > * {
+                        --color: inherit;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -45,10 +45,6 @@
             align-items: center;
             text-decoration: none;
 
-            &:hover {
-                text-decoration: none;
-            }
-
             span.icon:first-child:not(span.icon:last-child) {
                 margin-right: rem-calc($margin);
             }