@madj2k/fe-frontend-kit 2.0.13 → 2.0.16

package/package.json

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

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

@@ -30,21 +30,38 @@
 ///
 @mixin accessibility-outline($color: var(--bs-primary), $width: 3px, $selector: null) {
 
+    // remove outline
     &:focus,
     &:focus-within {
         outline: 0;
     }
 
-    &:has(input:focus-visible),
-    &:focus-visible {
-        @if $selector == null {
+    // default behavior
+    @if $selector == null {
+
+        &:has(input:focus-visible),
+        &:focus-visible {
             outline: rem-calc($width) solid $color;
-        } @else if str-slice($selector, 1, 2) == '::' {
-            #{&}#{$selector} {
+        }
+    }
+    @else {
+
+        // if we have a pseudo-element selector
+        // we need to add a space before the pseudo-element
+        // to prevent the pseudo-element from being removed
+        // when the selector is parsed
+        @if str-slice($selector, 1, 2) == '::' {
+            &:has(input:focus-visible)#{$selector},
+            &:focus-visible#{$selector} {
                 outline: rem-calc($width) solid $color;
             }
-        } @else {
-            #{$selector} {
+        }
+
+        // if we have normal selector
+        // we can just add the selector
+        @else {
+            &:has(input:focus-visible) #{$selector},
+            &:focus-visible #{$selector} {
                 outline: rem-calc($width) solid $color;
             }
         }

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

@@ -60,8 +60,6 @@ $color-primary: #ff0000 !default; // Fallback
         opacity: 0;
     }
 
-    @include accessibility-outline();
-
     &::before {
         content: "";
         position: absolute;

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

@@ -301,9 +301,6 @@
     margin: 0;
     padding: 0;
 
-    // accessibility
-    @include accessibility-outline();
-
     &:has(.nav-toggle-icon) {
         display: flex;
         align-items: center;

package/tools/owl-thumbnail/owl-thumbnail-2.0.js

@@ -22,7 +22,11 @@
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
  * @example:
- * const owlThumbnail = new Madj2kOwlThumbnail('.js-main-carousel', '.js-thumbs-carousel', {
+ * $('.js-highlight-slider-container').each(function () {
+ *  const owlThumbnail = new Madj2kOwlThumbnail(
+ *    '.js-main-carousel',
+ *    '.js-thumbs-carousel',
+ *    {
  *     main: {
  *       items: 1,
  *       margin: 20,
@@ -40,7 +44,9 @@
  *     resizeEvent: 'custom.resize',
  *     equalizeThumbHeights: true,
  *     noStageOffset: true
- *     }
+ *     },
+ *     false,
+ *     this
  *   });
  * HTML example without data attributes:
  * <div class="js-main-carousel owl-carousel">
@@ -68,10 +74,20 @@
  *
  */
 class Madj2kOwlThumbnail {
-  constructor(mainSelector, thumbSelector, options = {}, debug = false) {
+  /**
+   * Creates a new OwlThumbnail instance
+   * @param {string} mainSelector - CSS selector for main carousel element
+   * @param {string} thumbSelector - CSS selector for thumbnail carousel element
+   * @param {Object} options - Configuration options
+   * @param {boolean} debug - Enables debug logging
+   * @param {Document} container - DOM container to use for event listeners
+   */
+  constructor(mainSelector, thumbSelector, options = {}, debug = false, container = document) {
     this.debug = debug;
-    this.$main = $(mainSelector);
-    this.$thumbs = $(thumbSelector);
+
+    this.$context = $(container);
+    this.$main = this.$context.find(mainSelector);
+    this.$thumbs = this.$context.find(thumbSelector);
     this.options = options;
     this.syncing = false;