@unlk/keymaster 1.4.6 → 1.4.8

package/js/accordion-scroll.js

@@ -0,0 +1,43 @@
+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 = 'accordionScroll';
+const EVENT_SHOWN = 'shown.bs.collapse';
+const SELECTOR_ACCORDION = '.accordion';
+const SELECTOR_ITEM = '.accordion-item';
+const SELECTOR_HEADER = '.accordion-header';
+
+class AccordionScroll extends BaseComponent {
+  _onShown(e) {
+    const item = e.target.closest(SELECTOR_ITEM);
+    if (!item) return;
+
+    const header = SelectorEngine.findOne(SELECTOR_HEADER, item);
+    if (!header) return;
+
+    const rect = header.getBoundingClientRect();
+    if (rect.top < 0) {
+      header.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      AccordionScroll.getOrCreateInstance(this, config);
+    });
+  }
+}
+
+EventHandler.on(document, EVENT_SHOWN, SELECTOR_ACCORDION, function (e) {
+  AccordionScroll.getOrCreateInstance(this)._onShown(e);
+});
+
+defineJQueryPlugin(AccordionScroll);
+
+export default AccordionScroll;

package/js/bootstrap.js

@@ -14,3 +14,4 @@ export { default as Datepicker } from './datepicker';
 export { default as CarouselCaption } from './carousel-caption';
 export { default as CarouselHeight } from './carousel-height';
 export { default as VideoModal } from './video-modal';
+export { default as AccordionScroll } from './accordion-scroll';

package/js/video-modal.js

@@ -84,6 +84,13 @@ class VideoModal extends BaseComponent {
       this._element.dataset.vimeoId = String(vimeoId);
       this._element.__unlkVimeoPlayer = this._vimeoPlayer;
 
+      this._element.dispatchEvent(
+        new CustomEvent('videomodal.ready', {
+          bubbles: true,
+          detail: { provider: 'vimeo', player: this._vimeoPlayer, videoId: vimeoId }
+        })
+      );
+
       return;
     }
 
@@ -99,6 +106,13 @@ class VideoModal extends BaseComponent {
 
       this._element.dataset.ytId = youtubeId;
       this._element.__unlkYtPlayer = this._youtubePlayer;
+
+      this._element.dispatchEvent(
+        new CustomEvent('videomodal.ready', {
+          bubbles: true,
+          detail: { provider: 'youtube', player: this._youtubePlayer, videoId: youtubeId }
+        })
+      );
     }
   }
 

package/package.json

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

package/react/index.js

@@ -2,3 +2,4 @@ export { useDatepicker } from './use-datepicker.js';
 export { useCarouselCaption } from './use-carousel-caption.js';
 export { useCarouselHeight } from './use-carousel-height.js';
 export { useVideoModal } from './use-video-modal.js';
+export { useAccordionScroll } from './use-accordion-scroll.js';

package/react/use-accordion-scroll.js

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+/**
+ * Replicates accordion-scroll.js behaviour in React.
+ *
+ * After an accordion panel finishes opening, scrolls its header into view
+ * if it has been pushed above the viewport, replacing the Bootstrap
+ * shown.bs.collapse event listener.
+ *
+ * Usage:
+ *   const { onEntered } = useAccordionScroll();
+ *   <Accordion>
+ *     <Accordion.Item eventKey="0">
+ *       <Accordion.Header>Header</Accordion.Header>
+ *       <Accordion.Collapse eventKey="0" onEntered={onEntered}>
+ *         <Accordion.Body>Content</Accordion.Body>
+ *       </Accordion.Collapse>
+ *     </Accordion.Item>
+ *   </Accordion>
+ */
+export function useAccordionScroll() {
+  const onEntered = useCallback((node) => {
+    const item = node.closest('.accordion-item');
+    if (!item) return;
+
+    const header = item.querySelector('.accordion-header');
+    if (!header) return;
+
+    const rect = header.getBoundingClientRect();
+    if (rect.top < 0) {
+      header.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, []);
+
+  return { onEntered };
+}

package/react/use-video-modal.js

@@ -73,8 +73,9 @@ function getVimeoId(url) {
  * show.bs.modal / hidden.bs.modal event listeners.
  *
  * @param {object} options
- * @param {string} [options.youtubeSrc]  - YouTube video URL
- * @param {string} [options.vimeoUrl]   - Vimeo video URL
+ * @param {string}   [options.youtubeSrc] - YouTube video URL
+ * @param {string}   [options.vimeoUrl]   - Vimeo video URL
+ * @param {function} [options.onReady]    - Called with { provider, player, videoId } when the player is ready
  *
  * Usage:
  *   const { containerRef, onShow, onHide } = useVideoModal({ youtubeSrc: '...' });
@@ -84,7 +85,7 @@ function getVimeoId(url) {
  *     </div>
  *   </Modal>
  */
-export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
+export function useVideoModal({ youtubeSrc, vimeoUrl, onReady } = {}) {
   const containerRef = useRef(null);
   const players = useRef({ youtube: null, vimeo: null });
 
@@ -95,26 +96,36 @@ export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
 
     if (vimeoUrl) {
       await loadVimeoAPI();
+      const vimeoId = getVimeoId(vimeoUrl);
 
       players.current.vimeo = new globalThis.Vimeo.Player(container, {
-        id: getVimeoId(vimeoUrl),
+        id: vimeoId,
         autoplay: true,
       });
 
+      if (onReady) {
+        onReady({ provider: 'vimeo', player: players.current.vimeo, videoId: vimeoId });
+      }
+
       return;
     }
 
     if (youtubeSrc) {
       await loadYouTubeAPI();
+      const youtubeId = getYouTubeId(youtubeSrc);
 
       const playerDiv = container.querySelector('[data-yt-player]');
 
       players.current.youtube = new globalThis.YT.Player(playerDiv, {
-        videoId: getYouTubeId(youtubeSrc),
+        videoId: youtubeId,
         playerVars: { autoplay: 1, rel: 0 },
       });
+
+      if (onReady) {
+        onReady({ provider: 'youtube', player: players.current.youtube, videoId: youtubeId });
+      }
     }
-  }, [youtubeSrc, vimeoUrl]);
+  }, [youtubeSrc, vimeoUrl, onReady]);
 
   const onHide = useCallback(() => {
     if (players.current.vimeo) {

package/scss/theme/_accordion.scss

@@ -1,17 +1,38 @@
 .accordion {
-  --#{$prefix}accordion-box-shadow: #{$accordion-box-shadow};
   @include border-radius(var(--#{$prefix}accordion-border-radius));
-  @include box-shadow(var(--#{$prefix}accordion-box-shadow));
-  .accordion-button,
+  border: 0;
+  .accordion-button {
+    font-weight: $font-weight-medium;
+    &:not(.collapsed) {
+      box-shadow: none;
+    }
+  }
   .accordion-body {
-    @extend .fs-1;
+    padding-top: 0;
+    @extend .fs-4;
+  }
+  .accordion-item {
+    border-top: 0;
+    border-right: 0;
+    border-left: 0;
+  }
+  :not(.accordion-alt) .accordion-item:last-child {
+    border-bottom: 0;
   }
 }
 
+.accordion-flush {
+  --#{$prefix}accordion-box-shadow: #{$accordion-box-shadow};
+  @include box-shadow(var(--#{$prefix}accordion-box-shadow));
+  @include padding(0 $spacer 0);
+  @include border-radius($border-radius);
+}
+
 .accordion-alt {
   --#{$prefix}accordion-alt-bg: #{$accordion-alt-bg};
   --#{$prefix}accordion-alt-btn-bg: #{$accordion-alt-button-bg};
   --#{$prefix}accordion-alt-border-width: #{$accordion-alt-border-width};
+  --#{$prefix}accordion-alt-border-active-width: #{$accordion-alt-border-active-width};
   --#{$prefix}accordion-alt-border-color: #{$accordion-alt-border-color};
   --#{$prefix}accordion-alt-border-radius: #{$accordion-alt-border-radius};
   --#{$prefix}accordion-alt-btn-icon-width: #{$accordion-alt-icon-width};
@@ -23,7 +44,7 @@
 
   .accordion-button {
     margin-bottom: 0;
-    background-color: var(--#{$prefix}accordion-alt-btn-bg);
+    background-color: transparent;
     @include box-shadow(none);
 
     i {
@@ -34,7 +55,6 @@
 
     &:not(.collapsed) {
       @include box-shadow(none);
-      color: var(--#{$prefix}accordion-alt-active-color);
 
       &::after {
         background-image: var(--#{$prefix}accordion-alt-btn-active-icon);
@@ -51,8 +71,19 @@
 
   > .accordion-item {
     background-color: var(--#{$prefix}accordion-alt-bg);
-    border: var(--#{$prefix}accordion-alt-border-width) solid var(--#{$prefix}accordion-alt-border-color);
+    border: var(--#{$prefix}accordion-alt-border-width) solid transparent;
     @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
+    @include transition(var(--#{$prefix}accordion-transition));
+    &:hover {
+      border-color: var(--#{$prefix}accordion-alt-border-color);
+    }
+    &:has(.accordion-collapse.show),
+    &:has(.accordion-collapse.collapsing) {
+      background-color: $white;
+      border-color: var(--#{$prefix}accordion-alt-border-color);
+      //stylelint-disable-next-line function-disallowed-list
+      box-shadow: 0 0 0 calc(var(--#{$prefix}accordion-alt-border-active-width) - var(--#{$prefix}accordion-alt-border-width)) var(--#{$prefix}accordion-alt-border-color);
+    }
 
     &:not(:last-child) {
       @include margin-bottom($spacer);

package/scss/theme/_variables-overrides.scss

@@ -393,15 +393,17 @@ $border-radius-xxl: 1.5rem !default;
 $blockquote-font-size: $font-size-base * 3.5 !default;
 
 // Accordion
-$accordion-bg: $action-25 !default;
-$accordion-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$accordion-button-bg: var(--#{$prefix}body-bg) !default;
-$accordion-button-active-bg: var(--#{$prefix}foundation) !default;
-$accordion-button-active-color: var(--#{$prefix}light) !default;
-$accordion-icon-color: $body-color !default;
-$accordion-icon-active-color: $light !default;
-$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>") !default;
-$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>") !default;
+$accordion-bg: transparent !default;
+$accordion-border-width: .0625rem !default;
+$accordion-border-radius: 0 !default;
+$accordion-button-bg: transparent !default;
+$accordion-button-active-bg: transparent !default;
+$accordion-button-active-color: $body-color !default;
+$accordion-icon-color: $action !default;
+$accordion-icon-active-color: $action !default;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='#{$accordion-icon-color}'><path d='M12.6923 1.69231C12.6923 0.75625 11.9361 0 11 0C10.0639 0 9.30769 0.75625 9.30769 1.69231V9.30769H1.69231C0.75625 9.30769 0 10.0639 0 11C0 11.9361 0.75625 12.6923 1.69231 12.6923H9.30769V20.3077C9.30769 21.2438 10.0639 22 11 22C11.9361 22 12.6923 21.2438 12.6923 20.3077V12.6923H20.3077C21.2438 12.6923 22 11.9361 22 11C22 10.0639 21.2438 9.30769 20.3077 9.30769H12.6923V1.69231Z'/></svg>") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 25' fill='#{$accordion-icon-color}'><path d='M21.2143 12.5C21.2143 13.3643 20.512 14.0625 19.6428 14.0625H2.35713C1.48794 14.0625 0.785706 13.3643 0.785706 12.5C0.785706 11.6357 1.48794 10.9375 2.35713 10.9375H19.6428C20.512 10.9375 21.2143 11.6357 21.2143 12.5Z'/></svg>") !default;
+$accordion-icon-width: 1rem !default;
 $accordion-button-focus-box-shadow: none !default;
 
 // Badges

package/scss/theme/_variables.scss

@@ -8,13 +8,14 @@ $border-radius-xs: rfs-value(4px) !default;
 
 // scss-docs-start accordion-variables
 $accordion-box-shadow: $box-shadow !default;
-$accordion-alt-bg: $gray-100 !default;
-$accordion-alt-border-width: .125rem !default;
-$accordion-alt-border-color: $gray-200 !default;
-$accordion-alt-button-bg: $gray-100 !default;
-$accordion-alt-icon-width: 1.375rem !default;
+$accordion-alt-bg: $action-50 !default;
+$accordion-alt-border-width: .09375rem !default;
+$accordion-alt-border-active-width: .125rem !default;
+$accordion-alt-border-color: $action !default;
+$accordion-alt-button-bg: $action-50 !default;
+$accordion-alt-icon-width: 1rem !default;
 $accordion-alt-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$accordion-alt-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
+$accordion-alt-button-active-color: var(--#{$prefix}action) !default;
 $accordion-alt-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='#{$accordion-icon-color}'><path d='M12.6923 1.69231C12.6923 0.75625 11.9361 0 11 0C10.0639 0 9.30769 0.75625 9.30769 1.69231V9.30769H1.69231C0.75625 9.30769 0 10.0639 0 11C0 11.9361 0.75625 12.6923 1.69231 12.6923H9.30769V20.3077C9.30769 21.2438 10.0639 22 11 22C11.9361 22 12.6923 21.2438 12.6923 20.3077V12.6923H20.3077C21.2438 12.6923 22 11.9361 22 11C22 10.0639 21.2438 9.30769 20.3077 9.30769H12.6923V1.69231Z'/></svg>") !default;
 $accordion-alt-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 25' fill='#{$accordion-icon-color}'><path d='M21.2143 12.5C21.2143 13.3643 20.512 14.0625 19.6428 14.0625H2.35713C1.48794 14.0625 0.785706 13.3643 0.785706 12.5C0.785706 11.6357 1.48794 10.9375 2.35713 10.9375H19.6428C20.512 10.9375 21.2143 11.6357 21.2143 12.5Z'/></svg>") !default;
 // scss-docs-end accordion-variables

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.4.6" !default;
+$km-version: "1.4.8" !default;