@unlk/keymaster 1.0.2 → 1.0.3

package/images/unlock.svg

@@ -0,0 +1,9 @@
+<svg width="54" height="88" viewBox="0 0 54 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.5456 70.7213H53.182L31.9092 42.5022H21.2728L42.5456 70.7213Z" fill="#CBEBF8"/>
+<path d="M42.5456 70.7213H31.9092V88H42.5456V70.7213Z" fill="#CBEBF8"/>
+<path d="M31.9092 70.7213H42.5456L21.2728 42.5022H10.6364L31.9092 70.7213Z" fill="#66CDF3"/>
+<path d="M31.9092 70.7213V88H21.2728V70.7213H31.9092Z" fill="#66CDF3"/>
+<path d="M21.2728 70.7213H31.9092L10.6364 42.5022V21.2728C10.6364 15.4119 15.4119 10.6364 21.2728 10.6364C27.1337 10.6364 31.9092 15.4119 31.9092 21.2728V25.701H42.5456V21.2728C42.5456 9.50765 33.038 0 21.2728 0C9.50765 0 0.0434132 9.50765 0.0434132 21.2294V42.4588L21.2728 70.7213Z" fill="#3A7BBE"/>
+<path d="M21.2728 70.7213V88H16.2802C14.2832 88 12.4164 87.6527 10.6364 87.0015V70.7213H21.2728Z" fill="#3A7BBE"/>
+<path d="M0.0434139 42.5022L21.2728 70.7647H10.6364V87.0449C4.42822 84.744 0 78.7962 0 71.8066V42.4154V42.5022H0.0434139Z" fill="#3E51A2"/>
+</svg>

package/js/bootstrap.js

@@ -12,3 +12,4 @@ export { default as Tab } from 'bootstrap/js/dist/tab';
 export { default as Tooltip } from 'bootstrap/js/dist/tooltip';
 export { default as Datepicker } from './datepicker';
 export { default as CarouselCaption } from './carousel-caption';
+export { default as VideoModal } from './video-modal';

package/js/video-modal.js

@@ -0,0 +1,123 @@
+// Load YouTube API
+// eslint-disable-next-line no-unused-vars
+let youTubeAPIReady = false;
+const youTubeAPIInitPromise = new Promise((resolve) => {
+  if (window.YT?.Player) {
+    youTubeAPIReady = true;
+    resolve();
+  } else {
+    window.onYouTubeIframeAPIReady = () => {
+      youTubeAPIReady = true;
+      resolve();
+    };
+
+    const ytScript = document.createElement('script');
+    ytScript.src = 'https://www.youtube.com/iframe_api';
+    document.head.append(ytScript);
+  }
+});
+
+// Load Vimeo API
+// eslint-disable-next-line no-unused-vars
+let vimeoAPIReady = false;
+const vimeoAPIInitPromise = new Promise((resolve) => {
+  if (window.Vimeo?.Player) {
+    vimeoAPIReady = true;
+    resolve();
+  } else {
+    const vimeoScript = document.createElement('script');
+    vimeoScript.src = 'https://player.vimeo.com/api/player.js';
+    vimeoScript.addEventListener('load', () => {
+      vimeoAPIReady = true;
+      resolve();
+    });
+
+    document.head.append(vimeoScript);
+  }
+});
+
+class VideoModal {
+  constructor(modal) {
+    this.modal = modal;
+    this.dialog = modal.querySelector('.modal-dialog-media');
+    this.container = modal.querySelector('.ratio');
+    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;
+
+    modal.addEventListener('show.bs.modal', () => this.onShow());
+    modal.addEventListener('hidden.bs.modal', () => this.onHide());
+  }
+
+  async onShow() {
+    const playerClass = `${this.modalId}-youtube-player`;
+
+    if (this.vimeoUrl) {
+      const vimeoId = this.getVimeoId(this.vimeoUrl);
+      await vimeoAPIInitPromise;
+
+      this.vimeoPlayer = new window.Vimeo.Player(this.container, {
+        id: vimeoId,
+        autoplay: true
+      });
+    }
+
+    if (this.youtubeSrc) {
+      const youtubeId = this.getYouTubeId(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, {
+        videoId: youtubeId,
+        playerVars: { autoplay: 1, rel: 0 }
+      });
+    }
+  }
+
+  onHide() {
+    if (this.vimeoPlayer) {
+      this.vimeoPlayer.unload().catch(() => {});
+      this.vimeoPlayer = null;
+    }
+
+    if (this.youtubePlayer) {
+      this.youtubePlayer.destroy();
+      this.youtubePlayer = null;
+    }
+  }
+
+  getYouTubeId(url) {
+    const match = url.match(/(?:v=|youtu\.be\/)([\w-]{11})/);
+    return match ? match[1] : '';
+  }
+
+  getVimeoId(url) {
+    const match = url.match(/vimeo\.com\/(\d+)/);
+    return match ? match[1] : '';
+  }
+}
+
+// Auto-init for all triggered modals with dialog-media
+document.addEventListener('DOMContentLoaded', () => {
+  for (const button of document.querySelectorAll('[data-bs-toggle="modal"][data-bs-target]')) {
+    const targetSelector = button.getAttribute('data-bs-target');
+    const modal = document.querySelector(targetSelector);
+
+    if (modal?.querySelector('.modal-dialog-media')) {
+      // eslint-disable-next-line no-new
+      new VideoModal(modal);
+    }
+  }
+});
+
+export default VideoModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,9 @@
     "scss",
     "js",
     "fonts",
-    "CHANGELOG.md"
+    "README.md",
+    "CHANGELOG.md",
+    "images"
   ],
   "engines": {
     "node": ">=14"
@@ -73,7 +75,7 @@
     "postcss": "^8.4.4",
     "postcss-cli": "^9.0.2",
     "rollup": "^2.60.2",
-    "sass": "1.78.0",
+    "sass": "^1.87.0",
     "terser": "^5.10.0"
   },
   "config": {

package/scss/assets/bootstrap5/_accordion.scss

@@ -134,17 +134,12 @@
     &:last-child { border-bottom: 0; }
 
     // stylelint-disable selector-max-class
-    > .accordion-header .accordion-button {
-      &,
-      &.collapsed {
-        @include border-radius(0);
-      }
-    }
-    // stylelint-enable selector-max-class
-
-    > .accordion-collapse {
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
       @include border-radius(0);
     }
+    // stylelint-enable selector-max-class
   }
 }
 

package/scss/assets/bootstrap5/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -135,7 +135,12 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn ~ .btn,
+  // The top radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }

package/scss/assets/bootstrap5/_card.scss

@@ -193,8 +193,7 @@
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
+      flex: 1 0 0;
       margin-bottom: 0;
 
       + .card {

package/scss/assets/bootstrap5/_carousel.scss

@@ -99,6 +99,7 @@
   color: $carousel-control-color;
   text-align: center;
   background: none;
+  filter: var(--#{$prefix}carousel-control-icon-filter);
   border: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
@@ -168,7 +169,7 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
+    background-color: var(--#{$prefix}carousel-indicator-active-bg);
     background-clip: padding-box;
     border: 0;
     // Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -195,42 +196,31 @@
   left: (100% - $carousel-caption-width) * .5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
-  color: $carousel-caption-color;
+  color: var(--#{$prefix}carousel-caption-color);
   text-align: center;
 }
 
 // Dark mode carousel
 
 @mixin carousel-dark() {
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    filter: $carousel-dark-control-icon-filter;
-  }
-
-  .carousel-indicators [data-bs-target] {
-    background-color: $carousel-dark-indicator-active-bg;
-  }
-
-  .carousel-caption {
-    color: $carousel-dark-caption-color;
-  }
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
 }
 
 .carousel-dark {
   @include carousel-dark();
 }
 
+:root,
+[data-bs-theme="light"] {
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    @if $color-mode-type == "media-query" {
-      .carousel {
-        @include carousel-dark();
-      }
-    } @else {
-      .carousel,
-      &.carousel {
-        @include carousel-dark();
-      }
-    }
+  @include color-mode(dark, true) {
+    @include carousel-dark();
   }
 }

package/scss/assets/bootstrap5/_close.scss

@@ -12,7 +12,6 @@
   --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
   --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
-  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
   // scss-docs-end close-css-vars
 
   box-sizing: content-box;
@@ -21,6 +20,7 @@
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: var(--#{$prefix}btn-close-color);
   background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  filter: var(--#{$prefix}btn-close-filter);
   border: 0; // for button elements
   @include border-radius();
   opacity: var(--#{$prefix}btn-close-opacity);
@@ -47,17 +47,20 @@
 }
 
 @mixin btn-close-white() {
-  filter: var(--#{$prefix}btn-close-white-filter);
+  --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
 }
 
 .btn-close-white {
   @include btn-close-white();
 }
 
+:root,
+[data-bs-theme="light"] {
+  --#{$prefix}btn-close-filter: #{$btn-close-filter};
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .btn-close {
-      @include btn-close-white();
-    }
+  @include color-mode(dark, true) {
+    @include btn-close-white();
   }
 }

package/scss/assets/bootstrap5/_functions.scss

@@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }
 
-// Return WCAG2.1 relative luminance
+// Return WCAG2.2 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {

package/scss/assets/bootstrap5/_list-group.scss

@@ -43,31 +43,6 @@
   }
 }
 
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: var(--#{$prefix}list-group-action-color);
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  &:hover,
-  &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: var(--#{$prefix}list-group-action-hover-color);
-    text-decoration: none;
-    background-color: var(--#{$prefix}list-group-action-hover-bg);
-  }
-
-  &:active {
-    color: var(--#{$prefix}list-group-action-active-color);
-    background-color: var(--#{$prefix}list-group-action-active-bg);
-  }
-}
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -115,6 +90,33 @@
   }
 }
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: var(--#{$prefix}list-group-action-color);
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  &:not(.active) {
+    // Hover state
+    &:hover,
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      color: var(--#{$prefix}list-group-action-hover-color);
+      text-decoration: none;
+      background-color: var(--#{$prefix}list-group-action-hover-bg);
+    }
+
+    &:active {
+      color: var(--#{$prefix}list-group-action-active-color);
+      background-color: var(--#{$prefix}list-group-action-active-bg);
+    }
+  }
+}
+
 // Horizontal
 //
 // Change the layout of list group items from vertical (default) to horizontal.

package/scss/assets/bootstrap5/_modal.scss

@@ -59,8 +59,8 @@
 
   // When fading in the modal, animate it to slide down
   .modal.fade & {
-    @include transition($modal-transition);
     transform: $modal-fade-transform;
+    @include transition($modal-transition);
   }
   .modal.show & {
     transform: $modal-show-transform;
@@ -132,7 +132,11 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
+    // Split properties to avoid invalid calc() function if value is 0
+    margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+    margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
+    margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+    margin-left: auto;
   }
 }
 

package/scss/assets/bootstrap5/_nav.scss

@@ -169,8 +169,8 @@
 .nav-justified {
   > .nav-link,
   .nav-item {
-    flex-basis: 0;
     flex-grow: 1;
+    flex-basis: 0;
     text-align: center;
   }
 }

package/scss/assets/bootstrap5/_navbar.scss

@@ -139,8 +139,8 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
-  flex-basis: 100%;
   flex-grow: 1;
+  flex-basis: 100%;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;

package/scss/assets/bootstrap5/_offcanvas.scss

@@ -127,7 +127,11 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
+    // Split properties to avoid invalid calc() function if value is 0
+    margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin-left: auto;
   }
 }
 

package/scss/assets/bootstrap5/_pagination.scss

@@ -75,7 +75,7 @@
     margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
+  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

package/scss/assets/bootstrap5/_progress.scss

@@ -3,7 +3,7 @@
 // scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
-    0% { background-position-x: $progress-height; }
+    0% { background-position-x: var(--#{$prefix}progress-height); }
   }
 }
 // scss-docs-end progress-keyframes

package/scss/assets/bootstrap5/_reboot.scss

@@ -499,9 +499,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
   line-height: inherit;
+  @include font-size($legend-font-size);
 
   + * {
     clear: left; // 2

package/scss/assets/bootstrap5/_type.scss

@@ -34,11 +34,11 @@
 // Type display classes
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
-    @include font-size($font-size);
     font-family: $display-font-family;
     font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
+    @include font-size($font-size);
   }
 }
 

package/scss/assets/bootstrap5/_variables-dark.scss

@@ -82,6 +82,21 @@ $form-invalid-border-color-dark:    $red-300 !default;
 $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
 $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
 
-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 // scss-docs-end sass-dark-mode-vars
+
+
+//
+// Carousel
+//
+
+$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+
+//
+// Close button
+//
+
+$btn-close-filter-dark:             $btn-close-white-filter !default;