primevue 3.34.0 → 3.35.0

package/galleria/BaseGalleria.vue

@@ -3,287 +3,289 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-.p-galleria-content {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-galleria-item-wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.p-galleria-item-container {
-    position: relative;
-    display: flex;
-    height: 100%;
-}
-
-.p-galleria-item-nav {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.p-galleria-item-prev {
-    left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-galleria-item-next {
-    right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-galleria-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-nav {
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
-    pointer-events: all;
-    opacity: 1;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
-    pointer-events: none;
-}
-
-.p-galleria-caption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-}
-
-/* Thumbnails */
-.p-galleria-thumbnail-wrapper {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex-shrink: 0;
-}
-
-.p-galleria-thumbnail-prev,
-.p-galleria-thumbnail-next {
-    align-self: center;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-galleria-thumbnail-prev span,
-.p-galleria-thumbnail-next span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-galleria-thumbnail-container {
-    display: flex;
-    flex-direction: row;
-}
-
-.p-galleria-thumbnail-items-container {
-    overflow: hidden;
-    width: 100%;
-}
-
-.p-galleria-thumbnail-items {
-    display: flex;
-}
-
-.p-galleria-thumbnail-item {
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0.5;
-}
-
-.p-galleria-thumbnail-item:hover {
-    opacity: 1;
-    transition: opacity 0.3s;
-}
-
-.p-galleria-thumbnail-item-current {
-    opacity: 1;
-}
-
-/* Positions */
-/* Thumbnails */
-.p-galleria-thumbnails-left .p-galleria-content,
-.p-galleria-thumbnails-right .p-galleria-content {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-item-wrapper,
-.p-galleria-thumbnails-right .p-galleria-item-wrapper {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-item-wrapper,
-.p-galleria-thumbnails-top .p-galleria-item-wrapper {
-    order: 2;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
-.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
-    order: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
-    flex-direction: column;
-    flex-grow: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
-    flex-direction: column;
-    height: 100%;
-}
-
-/* Indicators */
-.p-galleria-indicators {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-galleria-indicator > button {
-    display: inline-flex;
-    align-items: center;
-}
-
-.p-galleria-indicators-left .p-galleria-item-wrapper,
-.p-galleria-indicators-right .p-galleria-item-wrapper {
-    flex-direction: row;
-    align-items: center;
-}
-
-.p-galleria-indicators-left .p-galleria-item-container,
-.p-galleria-indicators-top .p-galleria-item-container {
-    order: 2;
-}
-
-.p-galleria-indicators-left .p-galleria-indicators,
-.p-galleria-indicators-top .p-galleria-indicators {
-    order: 1;
-}
-
-.p-galleria-indicators-left .p-galleria-indicators,
-.p-galleria-indicators-right .p-galleria-indicators {
-    flex-direction: column;
-}
-
-.p-galleria-indicator-onitem .p-galleria-indicators {
-    position: absolute;
-    display: flex;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
-    top: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-start;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
-    right: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
-    left: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-start;
-}
-
-/* FullScreen */
-.p-galleria-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-galleria-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.p-galleria-mask .p-galleria-item-nav {
-    position: fixed;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-/* Animation */
-.p-galleria-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-galleria-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.p-galleria-enter-from,
-.p-galleria-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-.p-galleria-enter-active .p-galleria-item-nav {
-    opacity: 0;
-}
-
-/* Keyboard Support */
-.p-items-hidden .p-galleria-thumbnail-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-    visibility: visible;
+@layer primevue {
+    .p-galleria-content {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .p-galleria-item-wrapper {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    
+    .p-galleria-item-container {
+        position: relative;
+        display: flex;
+        height: 100%;
+    }
+    
+    .p-galleria-item-nav {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+    
+    .p-galleria-item-prev {
+        left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    
+    .p-galleria-item-next {
+        right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    
+    .p-galleria-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-nav {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+        pointer-events: all;
+        opacity: 1;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+        pointer-events: none;
+    }
+    
+    .p-galleria-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+    
+    /* Thumbnails */
+    .p-galleria-thumbnail-wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        flex-shrink: 0;
+    }
+    
+    .p-galleria-thumbnail-prev,
+    .p-galleria-thumbnail-next {
+        align-self: center;
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-galleria-thumbnail-prev span,
+    .p-galleria-thumbnail-next span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .p-galleria-thumbnail-container {
+        display: flex;
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnail-items-container {
+        overflow: hidden;
+        width: 100%;
+    }
+    
+    .p-galleria-thumbnail-items {
+        display: flex;
+    }
+    
+    .p-galleria-thumbnail-item {
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0.5;
+    }
+    
+    .p-galleria-thumbnail-item:hover {
+        opacity: 1;
+        transition: opacity 0.3s;
+    }
+    
+    .p-galleria-thumbnail-item-current {
+        opacity: 1;
+    }
+    
+    /* Positions */
+    /* Thumbnails */
+    .p-galleria-thumbnails-left .p-galleria-content,
+    .p-galleria-thumbnails-right .p-galleria-content {
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-right .p-galleria-item-wrapper {
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-item-wrapper {
+        order: 2;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
+        order: 1;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
+        flex-direction: column;
+        flex-grow: 1;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+        flex-direction: column;
+        height: 100%;
+    }
+    
+    /* Indicators */
+    .p-galleria-indicators {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-galleria-indicator > button {
+        display: inline-flex;
+        align-items: center;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-item-wrapper,
+    .p-galleria-indicators-right .p-galleria-item-wrapper {
+        flex-direction: row;
+        align-items: center;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-item-container,
+    .p-galleria-indicators-top .p-galleria-item-container {
+        order: 2;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-top .p-galleria-indicators {
+        order: 1;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-right .p-galleria-indicators {
+        flex-direction: column;
+    }
+    
+    .p-galleria-indicator-onitem .p-galleria-indicators {
+        position: absolute;
+        display: flex;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
+        top: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-start;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+        right: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-end;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-end;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
+        left: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-start;
+    }
+    
+    /* FullScreen */
+    .p-galleria-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-galleria-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+    
+    .p-galleria-mask .p-galleria-item-nav {
+        position: fixed;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+    
+    /* Animation */
+    .p-galleria-enter-active {
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    
+    .p-galleria-leave-active {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .p-galleria-enter-from,
+    .p-galleria-leave-to {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    
+    .p-galleria-enter-active .p-galleria-item-nav {
+        opacity: 0;
+    }
+    
+    /* Keyboard Support */
+    .p-items-hidden .p-galleria-thumbnail-item {
+        visibility: hidden;
+    }
+    
+    .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+        visibility: visible;
+    }
 }
 `;
 

package/galleria/Galleria.vue

@@ -36,6 +36,7 @@ export default {
     beforeUnmount() {
         if (this.fullScreen) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            document.body.style.removeProperty('--scrollbar-width');
         }
 
         this.mask = null;
@@ -52,6 +53,7 @@ export default {
         onEnter(el) {
             this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
             DomHandler.addClass(document.body, 'p-overflow-hidden');
+            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             this.focus();
         },
         onBeforeLeave() {
@@ -61,6 +63,7 @@ export default {
             ZIndexUtils.clear(el);
             this.containerVisible = false;
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            document.body.style.removeProperty('--scrollbar-width');
         },
         onActiveItemChange(index) {
             if (this.activeIndex !== index) {

package/galleria/galleria.cjs.js

@@ -25,7 +25,7 @@ var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightI
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
 
-var styles = "\n.p-galleria-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.p-galleria-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.p-galleria-item-container {\n    position: relative;\n    display: flex;\n    height: 100%;\n}\n\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-galleria-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n}\n\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n}\n\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex-shrink: 0;\n}\n\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    align-self: center;\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.p-galleria-thumbnail-container {\n    display: flex;\n    flex-direction: row;\n}\n\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n    width: 100%;\n}\n\n.p-galleria-thumbnail-items {\n    display: flex;\n}\n\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    transition: opacity 0.3s;\n}\n\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    flex-direction: row;\n}\n\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    flex-direction: row;\n}\n\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    order: 2;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    order: 1;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-galleria-indicator > button {\n    display: inline-flex;\n    align-items: center;\n}\n\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    flex-direction: row;\n    align-items: center;\n}\n\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    order: 2;\n}\n\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    order: 1;\n}\n\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    flex-direction: column;\n}\n\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: flex;\n}\n\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-start;\n}\n\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-end;\n}\n\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-end;\n}\n\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-galleria-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
+var styles = "\n@layer primevue {\n    .p-galleria-content {\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .p-galleria-item-wrapper {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n    }\n    \n    .p-galleria-item-container {\n        position: relative;\n        display: flex;\n        height: 100%;\n    }\n    \n    .p-galleria-item-nav {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n    }\n    \n    .p-galleria-item-prev {\n        left: 0;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n    \n    .p-galleria-item-next {\n        right: 0;\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n    \n    .p-galleria-item {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n        width: 100%;\n    }\n    \n    .p-galleria-item-nav-onhover .p-galleria-item-nav {\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 0.2s ease-in-out;\n    }\n    \n    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n        pointer-events: all;\n        opacity: 1;\n    }\n    \n    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n        pointer-events: none;\n    }\n    \n    .p-galleria-caption {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n    }\n    \n    /* Thumbnails */\n    .p-galleria-thumbnail-wrapper {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n        flex-shrink: 0;\n    }\n    \n    .p-galleria-thumbnail-prev,\n    .p-galleria-thumbnail-next {\n        align-self: center;\n        flex: 0 0 auto;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-galleria-thumbnail-prev span,\n    .p-galleria-thumbnail-next span {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    \n    .p-galleria-thumbnail-container {\n        display: flex;\n        flex-direction: row;\n    }\n    \n    .p-galleria-thumbnail-items-container {\n        overflow: hidden;\n        width: 100%;\n    }\n    \n    .p-galleria-thumbnail-items {\n        display: flex;\n    }\n    \n    .p-galleria-thumbnail-item {\n        overflow: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        opacity: 0.5;\n    }\n    \n    .p-galleria-thumbnail-item:hover {\n        opacity: 1;\n        transition: opacity 0.3s;\n    }\n    \n    .p-galleria-thumbnail-item-current {\n        opacity: 1;\n    }\n    \n    /* Positions */\n    /* Thumbnails */\n    .p-galleria-thumbnails-left .p-galleria-content,\n    .p-galleria-thumbnails-right .p-galleria-content {\n        flex-direction: row;\n    }\n    \n    .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n    .p-galleria-thumbnails-right .p-galleria-item-wrapper {\n        flex-direction: row;\n    }\n    \n    .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n    .p-galleria-thumbnails-top .p-galleria-item-wrapper {\n        order: 2;\n    }\n    \n    .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n    .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n        order: 1;\n    }\n    \n    .p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n    .p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n        flex-direction: column;\n        flex-grow: 1;\n    }\n    \n    .p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n    .p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    /* Indicators */\n    .p-galleria-indicators {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-galleria-indicator > button {\n        display: inline-flex;\n        align-items: center;\n    }\n    \n    .p-galleria-indicators-left .p-galleria-item-wrapper,\n    .p-galleria-indicators-right .p-galleria-item-wrapper {\n        flex-direction: row;\n        align-items: center;\n    }\n    \n    .p-galleria-indicators-left .p-galleria-item-container,\n    .p-galleria-indicators-top .p-galleria-item-container {\n        order: 2;\n    }\n    \n    .p-galleria-indicators-left .p-galleria-indicators,\n    .p-galleria-indicators-top .p-galleria-indicators {\n        order: 1;\n    }\n    \n    .p-galleria-indicators-left .p-galleria-indicators,\n    .p-galleria-indicators-right .p-galleria-indicators {\n        flex-direction: column;\n    }\n    \n    .p-galleria-indicator-onitem .p-galleria-indicators {\n        position: absolute;\n        display: flex;\n    }\n    \n    .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n        top: 0;\n        left: 0;\n        width: 100%;\n        align-items: flex-start;\n    }\n    \n    .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n        right: 0;\n        top: 0;\n        height: 100%;\n        align-items: flex-end;\n    }\n    \n    .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        align-items: flex-end;\n    }\n    \n    .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n        left: 0;\n        top: 0;\n        height: 100%;\n        align-items: flex-start;\n    }\n    \n    /* FullScreen */\n    .p-galleria-mask {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-galleria-close {\n        position: absolute;\n        top: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n    }\n    \n    .p-galleria-mask .p-galleria-item-nav {\n        position: fixed;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    /* Animation */\n    .p-galleria-enter-active {\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-galleria-leave-active {\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    .p-galleria-enter-from,\n    .p-galleria-leave-to {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-galleria-enter-active .p-galleria-item-nav {\n        opacity: 0;\n    }\n    \n    /* Keyboard Support */\n    .p-items-hidden .p-galleria-thumbnail-item {\n        visibility: hidden;\n    }\n    \n    .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n        visibility: visible;\n    }\n}\n";
 var classes = {
   mask: function mask(_ref) {
     var instance = _ref.instance;
@@ -1189,6 +1189,7 @@ var script = {
   beforeUnmount: function beforeUnmount() {
     if (this.fullScreen) {
       utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+      document.body.style.removeProperty('--scrollbar-width');
     }
     this.mask = null;
     if (this.container) {
@@ -1203,6 +1204,7 @@ var script = {
     onEnter: function onEnter(el) {
       this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
       utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+      document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
       this.focus();
     },
     onBeforeLeave: function onBeforeLeave() {
@@ -1212,6 +1214,7 @@ var script = {
       utils.ZIndexUtils.clear(el);
       this.containerVisible = false;
       utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+      document.body.style.removeProperty('--scrollbar-width');
     },
     onActiveItemChange: function onActiveItemChange(index) {
       if (this.activeIndex !== index) {