@unlk/keymaster 1.0.5 → 1.0.6

package/js/carousel-caption.js

@@ -1,39 +1,66 @@
-import { Carousel } from 'bootstrap';
+import BaseComponent from 'bootstrap/js/src/base-component.js';
+import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
+import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
-class CarouselCaption {
-  constructor(carouselEl) {
-    if (!carouselEl) {
+const NAME = 'carouselCaption';
+const DATA_KEY = 'bs.carouselCaption';
+const EVENT_SLID = 'slid.bs.carousel';
+const SELECTOR_CAROUSEL = '.carousel';
+const SELECTOR_CAPTION = '.carousel-caption-container p';
+
+class CarouselCaption extends BaseComponent {
+  constructor(element) {
+    super(element);
+
+    this._captionEl = this._findCaptionEl();
+    if (!this._captionEl) {
       return;
     }
 
-    this.carouselEl = carouselEl;
-    this.carousel = Carousel.getOrCreateInstance(carouselEl);
-    this.captionEl = carouselEl
-      .closest('.carousel-wrapper')
-      ?.previousElementSibling?.querySelector('.carousel-caption-container');
-
+    this._updateCaption(); // Initialize
     this._bindEvents();
-    this._updateCaption();
+  }
+
+  dispose() {
+    EventHandler.off(this._element, EVENT_SLID);
+    super.dispose();
   }
 
   _bindEvents() {
-    this.carouselEl.addEventListener('slide.bs.carousel', () => this._updateCaption());
+    EventHandler.on(this._element, EVENT_SLID, () => this._updateCaption());
   }
 
   _updateCaption() {
-    const active = this.carouselEl.querySelector('.carousel-item.active');
-    const captionText = active?.getAttribute('data-caption');
-    if (this.captionEl && captionText) {
-      this.captionEl.querySelector('p').textContent = captionText;
+    const activeItem = SelectorEngine.findOne('.carousel-item.active', this._element);
+    const newCaption = activeItem?.getAttribute('data-caption');
+    if (this._captionEl && newCaption) {
+      this._captionEl.textContent = newCaption;
     }
   }
 
-  static initAll() {
-    for (const el of document.querySelectorAll('.carousel')) {
-      // eslint-disable-next-line no-new
-      new CarouselCaption(el);
-    }
+  _findCaptionEl() {
+    return this._element.querySelector(SELECTOR_CAPTION) || null;
+  }
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      CarouselCaption.getOrCreateInstance(this, config);
+    });
   }
 }
 
+// Auto-init on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', () => {
+  for (const el of SelectorEngine.find(SELECTOR_CAROUSEL)) {
+    CarouselCaption.getOrCreateInstance(el);
+  }
+});
+
+defineJQueryPlugin(CarouselCaption);
+
 export default CarouselCaption;

package/js/video-modal.js

@@ -1,4 +1,15 @@
-// Load YouTube API
+import BaseComponent from 'bootstrap/js/src/base-component.js';
+import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
+import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
+
+const NAME = 'videoModal';
+const DATA_KEY = 'bs.videoModal';
+const EVENT_SHOW = 'show.bs.modal';
+const EVENT_HIDDEN = 'hidden.bs.modal';
+const SELECTOR_DIALOG = '.modal-dialog-media';
+const SELECTOR_RATIO = '.ratio';
+
 // eslint-disable-next-line no-unused-vars
 let youTubeAPIReady = false;
 const youTubeAPIInitPromise = new Promise((resolve) => {
@@ -11,13 +22,12 @@ const youTubeAPIInitPromise = new Promise((resolve) => {
       resolve();
     };
 
-    const ytScript = document.createElement('script');
-    ytScript.src = 'https://www.youtube.com/iframe_api';
-    document.head.append(ytScript);
+    const script = document.createElement('script');
+    script.src = 'https://www.youtube.com/iframe_api';
+    document.head.append(script);
   }
 });
 
-// Load Vimeo API
 // eslint-disable-next-line no-unused-vars
 let vimeoAPIReady = false;
 const vimeoAPIInitPromise = new Promise((resolve) => {
@@ -25,99 +35,112 @@ const vimeoAPIInitPromise = new Promise((resolve) => {
     vimeoAPIReady = true;
     resolve();
   } else {
-    const vimeoScript = document.createElement('script');
-    vimeoScript.src = 'https://player.vimeo.com/api/player.js';
-    vimeoScript.addEventListener('load', () => {
+    const script = document.createElement('script');
+    script.src = 'https://player.vimeo.com/api/player.js';
+    script.addEventListener('load', () => {
       vimeoAPIReady = true;
       resolve();
     });
 
-    document.head.append(vimeoScript);
+    document.head.append(script);
   }
 });
 
-class VideoModal {
-  constructor(modal) {
-    this.modal = modal;
-    this.dialog = modal.querySelector('.modal-dialog-media');
-    this.container = modal.querySelector('.ratio');
-    if (!this.dialog || !this.container) {
+class VideoModal extends BaseComponent {
+  constructor(element) {
+    super(element);
+
+    this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    this._container = SelectorEngine.findOne(SELECTOR_RATIO, this._element);
+
+    if (!this._dialog || !this._container) {
       return;
     }
 
-    this.modalId = modal.id;
-    this.youtubeSrc = this.container.getAttribute('data-src');
-    this.vimeoUrl = this.container.getAttribute('data-vimeo-url');
-    this.vimeoPlayer = null;
-    this.youtubePlayer = null;
+    this._youtubeSrc = this._container.getAttribute('data-src');
+    this._vimeoUrl = this._container.getAttribute('data-vimeo-url');
+    this._youtubePlayer = null;
+    this._vimeoPlayer = null;
+
+    EventHandler.on(this._element, EVENT_SHOW, () => this._onShow());
+    EventHandler.on(this._element, EVENT_HIDDEN, () => this._onHide());
+  }
 
-    modal.addEventListener('show.bs.modal', () => this.onShow());
-    modal.addEventListener('hidden.bs.modal', () => this.onHide());
+  dispose() {
+    this._onHide();
+    super.dispose();
   }
 
-  async onShow() {
-    const playerClass = `${this.modalId}-youtube-player`;
+  async _onShow() {
+    const { id } = this._element;
+    const playerClass = `${id}-youtube-player`;
 
-    if (this.vimeoUrl) {
-      const vimeoId = this.getVimeoId(this.vimeoUrl);
+    if (this._vimeoUrl) {
       await vimeoAPIInitPromise;
-
-      this.vimeoPlayer = new window.Vimeo.Player(this.container, {
+      const vimeoId = this._getVimeoId(this._vimeoUrl);
+      this._vimeoPlayer = new window.Vimeo.Player(this._container, {
         id: vimeoId,
         autoplay: true
       });
     }
 
-    if (this.youtubeSrc) {
-      const youtubeId = this.getYouTubeId(this.youtubeSrc);
+    if (this._youtubeSrc) {
       await youTubeAPIInitPromise;
-
-      // Dynamically insert YouTube div
-      this.container.innerHTML = `<div class="${playerClass} w-100 h-100"></div>`;
-      const playerDiv = this.container.querySelector(`.${playerClass}`);
-
-      // eslint-disable-next-line no-undef
-      this.youtubePlayer = new YT.Player(playerDiv, {
+      const youtubeId = this._getYouTubeId(this._youtubeSrc);
+      this._container.innerHTML = `<div class="${playerClass} w-100 h-100"></div>`;
+      const playerDiv = this._container.querySelector(`.${playerClass}`);
+      this._youtubePlayer = new window.YT.Player(playerDiv, {
         videoId: youtubeId,
         playerVars: { autoplay: 1, rel: 0 }
       });
     }
   }
 
-  onHide() {
-    if (this.vimeoPlayer) {
-      this.vimeoPlayer.unload().catch(() => {});
-      this.vimeoPlayer = null;
+  _onHide() {
+    if (this._vimeoPlayer) {
+      this._vimeoPlayer.unload().catch(() => {});
+      this._vimeoPlayer = null;
     }
 
-    if (this.youtubePlayer) {
-      this.youtubePlayer.destroy();
-      this.youtubePlayer = null;
+    if (this._youtubePlayer) {
+      this._youtubePlayer.destroy();
+      this._youtubePlayer = null;
     }
   }
 
-  getYouTubeId(url) {
+  _getYouTubeId(url) {
     const match = url.match(/(?:v=|youtu\.be\/)([\w-]{11})/);
     return match ? match[1] : '';
   }
 
-  getVimeoId(url) {
+  _getVimeoId(url) {
     const match = url.match(/vimeo\.com\/(\d+)/);
     return match ? match[1] : '';
   }
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      VideoModal.getOrCreateInstance(this, config);
+    });
+  }
 }
 
-// Auto-init for all triggered modals with dialog-media
+// Auto-init
 document.addEventListener('DOMContentLoaded', () => {
-  for (const button of document.querySelectorAll('[data-bs-toggle="modal"][data-bs-target]')) {
-    const targetSelector = button.getAttribute('data-bs-target');
+  const modals = SelectorEngine.find('[data-bs-toggle="modal"][data-bs-target]');
+  for (const btn of modals) {
+    const targetSelector = btn.getAttribute('data-bs-target');
     const modal = document.querySelector(targetSelector);
-
-    if (modal?.querySelector('.modal-dialog-media')) {
-      // eslint-disable-next-line no-new
-      new VideoModal(modal);
+    if (modal?.querySelector(SELECTOR_DIALOG)) {
+      VideoModal.getOrCreateInstance(modal);
     }
   }
 });
 
+defineJQueryPlugin(VideoModal);
+
 export default VideoModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "publishConfig": {
     "access": "public"
   },

package/scss/theme/_accordion.scss

@@ -14,6 +14,7 @@
   .accordion-button {
     margin-bottom: 0;
     background-color: var(--#{$prefix}accordion-alt-btn-bg);
+    @include box-shadow(none);
 
     i {
       width: var(--#{$prefix}accordion-alt-btn-icon-width);
@@ -22,8 +23,8 @@
     }
 
     &:not(.collapsed) {
-      color: var(--#{$prefix}accordion-alt-active-color);
       @include box-shadow(none);
+      color: var(--#{$prefix}accordion-alt-active-color);
 
       &::after {
         background-image: var(--#{$prefix}accordion-alt-btn-active-icon);

package/scss/theme/_alert.scss

@@ -12,14 +12,20 @@
 @each $state, $value in $theme-colors {
   $alert-border: var(--#{$prefix}#{$state}-border-subtle);
   $alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+  $alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
   @if $state == "tertiary" {
     $alert-border: $gray-400;
     $alert-color: $foundation-500;
   }
+  @else if $state == "danger" {
+    $alert-bg: $danger-25;
+  } @else if $state == "success" {
+    $alert-bg: $success-50;
+  }
 
   .alert-#{$state} {
     --#{$prefix}alert-color: #{$alert-color};
-    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-bg: #{$alert-bg};
     --#{$prefix}alert-border-color: #{$alert-border};
     --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
   }

package/scss/theme/_utilities-overrides.scss

@@ -4,12 +4,12 @@
 @import "../assets/bootstrap5/utilities";
 @import "../assets/bootstrap5/vendor/rfs";
 
-$box-shadow-sm: 0 rfs-value(1px) rfs-value(4px) rgba($foundation-500, .1);
-$box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12);
-$box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16);
-$box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .1) inset;
+$box-shadow-sm: 0 rfs-value(1px) rfs-value(4px) rgba($foundation-500, .1) !default;
+$box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12) !default;
+$box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16) !default;
+$box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .1) inset !default;
 
-$all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers);
+$all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers) !default;
 
 $utilities: map-merge(
   $utilities,