framework7 8.3.3 → 9.0.0-beta.1

package/components/panel/panel.js

@@ -39,28 +39,19 @@ export default {
         create(params) {
           return new Panel(app, params);
         },
-        get(el) {
-          if (el === void 0) {
-            el = '.panel';
-          }
+        get(el = '.panel') {
           if (el instanceof Panel) return el;
           if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
           const $el = $(el);
           if ($el.length === 0 || $el.length > 1) return undefined;
           return $el[0].f7Panel;
         },
-        destroy(el) {
-          if (el === void 0) {
-            el = '.panel';
-          }
+        destroy(el = '.panel') {
           const panel = app.panel.get(el);
           if (panel && panel.destroy) return panel.destroy();
           return undefined;
         },
-        open(el, animate) {
-          if (el === void 0) {
-            el = '.panel';
-          }
+        open(el = '.panel', animate) {
           if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
           let panel = app.panel.get(el);
           if (panel && panel.open) return panel.open(animate);
@@ -72,10 +63,7 @@ export default {
           }
           return undefined;
         },
-        close(el, animate) {
-          if (el === void 0) {
-            el = '.panel-in';
-          }
+        close(el = '.panel-in', animate) {
           if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
           let panel = app.panel.get(el);
           if (panel && panel.open) return panel.close(animate);
@@ -87,10 +75,7 @@ export default {
           }
           return undefined;
         },
-        toggle(el, animate) {
-          if (el === void 0) {
-            el = '.panel';
-          }
+        toggle(el = '.panel', animate) {
           if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
           let panel = app.panel.get(el);
           if (panel && panel.toggle) return panel.toggle(animate);
@@ -151,24 +136,15 @@ export default {
     }
   },
   clicks: {
-    '.panel-open': function open(clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.panel-open': function open(clickedEl, data = {}) {
       const app = this;
       app.panel.open(data.panel, data.animate);
     },
-    '.panel-close': function close(clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.panel-close': function close(clickedEl, data = {}) {
       const app = this;
       app.panel.close(data.panel, data.animate);
     },
-    '.panel-toggle': function close(clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.panel-toggle': function close(clickedEl, data = {}) {
       const app = this;
       app.panel.toggle(data.panel, data.animate);
     },

package/components/panel/panel.less

@@ -81,7 +81,7 @@
 }
 .panel-floating {
   overflow: hidden;
-  border-radius: 16px;
+  border-radius: var(--f7-panel-floating-border-radius);
   height: auto;
   top: calc(8px + var(--f7-safe-area-top, 0px));
   bottom: calc(8px + var(--f7-safe-area-bottom, 0px));
@@ -334,22 +334,22 @@ html {
   }
 }
 
-html.with-modal-popup-push .framework7-root,
-html.with-modal-popup-push-closing .framework7-root {
+html:has(.popup-push-in) .framework7-root,
+html:has(.popup-push-closing) .framework7-root {
   --f7-panelPushScale: var(--f7-popup-push-scale);
   --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
   --f7-panelPushTransitionTimingFunction: var(--f7-popup-transition-timing-function);
   --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
 }
-html.with-modal-sheet-push .framework7-root,
-html.with-modal-sheet-push-closing .framework7-root {
+html:has(.sheet-modal-push-in) .framework7-root,
+html:has(.sheet-modal-push-closing) .framework7-root {
   --f7-panelPushScale: var(--f7-sheet-push-scale);
   --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
   --f7-panelPushTransitionTimingFunction: var(--f7-sheet-transition-timing-function);
   --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
 }
-html.with-modal-popup-push .framework7-root,
-html.with-modal-sheet-push .framework7-root {
+html:has(.popup-push-in) .framework7-root,
+html:has(.sheet-modal-push-in) .framework7-root {
   > .panel-in,
   > .panel-out {
     transition-duration: var(--f7-panelPushTransitionDuration);
@@ -381,8 +381,8 @@ html.with-modal-sheet-push .framework7-root {
     }
   }
 }
-html.with-modal-popup-push-closing .framework7-root > .panel-in,
-html.with-modal-sheet-push-closing .framework7-root > .panel-in {
+html:has(.popup-push-closing) .framework7-root > .panel-in,
+html:has(.sheet-modal-push-closing) .framework7-root > .panel-in {
   transition-duration: var(--f7-panelPushTransitionDuration);
   transition-timing-function: var(--f7-panelPushTransitionTimingFunction);
   &.panel-reveal.panel-left,

package/components/panel/resizable-panel.js

@@ -1,9 +1,7 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextFrame } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 function resizablePanel(panel) {
   const app = panel.app;
-  const support = getSupport();
   if (panel.resizableInitialized) return;
   extend(panel, {
     resizable: true,
@@ -139,9 +137,9 @@ function resizablePanel(panel) {
   $el.addClass('panel-resizable');
 
   // Add Events
-  const passive = support.passiveListener ? {
+  const passive = {
     passive: true
-  } : false;
+  };
   panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);
   app.on('touchmove:active', handleTouchMove);
   app.on('touchend:passive', handleTouchEnd);

package/components/photo-browser/photo-browser-class.js

@@ -6,10 +6,7 @@ import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class PhotoBrowser extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const pb = this;
     pb.app = app;
@@ -166,11 +163,11 @@ class PhotoBrowser extends Framework7Class {
     const renderNavbarCount = typeof pb.params.navbarShowCount === 'undefined' ? pb.params.photos.length > 1 : pb.params.navbarShowCount;
     const isPopup = pb.params.type !== 'page';
     return $jsx("div", {
-      class: `navbar navbar-photo-browser ${pb.params.theme === 'dark' ? 'navbar-photo-browser-dark' : ''}`
+      class: `navbar navbar-photo-browser`
     }, $jsx("div", {
       class: "navbar-bg"
     }), $jsx("div", {
-      class: "navbar-inner navbar-inner-centered-title sliding"
+      class: "navbar-inner navbar-inner-centered-title"
     }, !isPopup && $jsx("div", {
       class: "left"
     }, $jsx("a", {
@@ -185,31 +182,14 @@ class PhotoBrowser extends Framework7Class {
       class: "photo-browser-of"
     }, pb.params.navbarOfText), $jsx("span", {
       class: "photo-browser-total"
-    })), isPopup && (pb.params.popupCloseLinkText || pb.params.popupCloseLinkIcon) && $jsx("div", {
+    })), isPopup && $jsx("div", {
       class: "right"
     }, $jsx("a", {
       class: "link popup-close",
       "data-popup": ".photo-browser-popup"
-    }, pb.params.popupCloseLinkIcon && pb.app.theme === 'ios' && $jsx("i", null, $jsx("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "56",
-      height: "56",
-      viewBox: "0 0 56 56"
-    }, $jsx("path", {
-      fill: "currentColor",
-      d: "M 10.0234 43.0234 C 9.2266 43.8203 9.2031 45.1797 10.0234 45.9766 C 10.8438 46.7734 12.1797 46.7734 13.0000 45.9766 L 28.0000 30.9766 L 43.0000 45.9766 C 43.7969 46.7734 45.1563 46.7969 45.9766 45.9766 C 46.7734 45.1562 46.7734 43.8203 45.9766 43.0234 L 30.9531 28.0000 L 45.9766 13.0000 C 46.7734 12.2031 46.7969 10.8437 45.9766 10.0469 C 45.1328 9.2266 43.7969 9.2266 43.0000 10.0469 L 28.0000 25.0469 L 13.0000 10.0469 C 12.1797 9.2266 10.8203 9.2031 10.0234 10.0469 C 9.2266 10.8672 9.2266 12.2031 10.0234 13.0000 L 25.0234 28.0000 Z"
-    }))), pb.params.popupCloseLinkIcon && pb.app.theme === 'md' && $jsx("i", null, $jsx("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: "24px",
-      viewBox: "0 0 24 24",
-      width: "24px",
-      fill: "currentColor"
-    }, $jsx("path", {
-      d: "M0 0h24v24H0V0z",
-      fill: "none"
-    }), $jsx("path", {
-      d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-    }))), pb.params.popupCloseLinkText && $jsx("span", null, pb.params.popupCloseLinkText)))));
+    }, $jsx("i", {
+      class: "icon icon-close"
+    }), pb.params.popupCloseLinkText ? $jsx("span", null, pb.params.popupCloseLinkText) : ''))));
   }
   renderToolbar() {
     const pb = this;
@@ -386,7 +366,7 @@ class PhotoBrowser extends Framework7Class {
           pb.emit('local::doubleTap', e);
           pb.emit('local::doubleClick', e);
         },
-        slideChange() {
+        slideChange(...args) {
           const swiper = this;
           if (hasThumbs && pb.thumbsSwiper && !preventMainSlide) {
             preventThumbsSlide = true;
@@ -396,35 +376,20 @@ class PhotoBrowser extends Framework7Class {
             });
           }
           pb.onSlideChange(swiper);
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
           pb.emit('local::slideChange', ...args);
         },
-        transitionStart() {
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
+        transitionStart(...args) {
           pb.emit('local::transitionStart', ...args);
         },
-        transitionEnd() {
-          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-            args[_key3] = arguments[_key3];
-          }
+        transitionEnd(...args) {
           pb.emit('local::transitionEnd', ...args);
         },
-        slideChangeTransitionStart() {
+        slideChangeTransitionStart(...args) {
           const swiper = this;
           pb.onSlideChange(swiper);
-          for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-            args[_key4] = arguments[_key4];
-          }
           pb.emit('local::slideChangeTransitionStart', ...args);
         },
-        slideChangeTransitionEnd() {
-          for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-            args[_key5] = arguments[_key5];
-          }
+        slideChangeTransitionEnd(...args) {
           pb.emit('local::slideChangeTransitionEnd', ...args);
         }
       }

package/components/photo-browser/photo-browser-rtl.css

@@ -1 +1 @@
-:root{--f7-photobrowser-bg-color:#fff;--f7-photobrowser-bars-bg-color:rgba(var(--f7-bars-bg-color-rgb), 0.95);--f7-photobrowser-bars-text-color:var(--f7-bars-text-color);--f7-photobrowser-bars-link-color:var(--f7-bars-link-color);--f7-photobrowser-caption-font-size:13px;--f7-photobrowser-caption-font-weight:500;--f7-photobrowser-caption-light-text-color:#000;--f7-photobrowser-caption-dark-text-color:#fff;--f7-photobrowser-exposed-bg-color:#000;--f7-photobrowser-dark-bg-color:#000;--f7-photobrowser-dark-bars-bg-color:rgba(27, 27, 27, 0.8);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition-duration:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.toolbar.photo-browser-thumbs{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.page~.photo-browser-page:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-popup:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-standalone:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs{height:var(--f7-toolbar-height)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs{transform:translate3d(0,calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom,0)),0)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.navbar+.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.toolbar~.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) * 2 + var(--f7-safe-area-bottom))}.toolbar~.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-thumbs{transition-property:transform,background-color,color}.photo-browser-thumbs .swiper{width:100%;height:100%}.photo-browser-thumbs .swiper-slide{width:auto;display:flex;align-items:center;justify-content:center}.photo-browser-thumbs img{width:auto;height:75%;display:block;border-radius:2px;min-width:4px}.photo-browser-thumbs .swiper-slide img{transform:translateX(-4px);transition-duration:150ms}.photo-browser-thumbs .swiper-slide-active img{transform:scale(1.2)}.photo-browser-thumbs .swiper-slide-active~.swiper-slide img{transform:translateX(4px)}.photo-browser-caption{box-sizing:border-box;transition-duration:.4s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size);font-weight:var(--f7-photobrowser-caption-font-weight)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .photo-browser-caption{-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-captions-light .photo-browser-caption{color:var(--f7-photobrowser-caption-light-text-color)}.dark .photo-browser-caption,.photo-browser-captions-dark .photo-browser-caption{color:var(--f7-photobrowser-caption-dark-text-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color;touch-action:none}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .right .link i,.navbar-photo-browser .right .link svg{width:24px;height:24px;display:block}.navbar-photo-browser .navbar-bg,.photo-browser-caption,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95))}.photo-browser-page{touch-action:none}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition-duration:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar:not(.photo-browser-thumbs){opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar:not(.photo-browser-thumbs)~.photo-browser-captions,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs~.photo-browser-captions{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-exposed .photo-browser-swiper-container{background:var(--f7-photobrowser-exposed-bg-color)}.photo-browser-dark .photo-browser-thumbs,.photo-browser-dark .toolbar,.photo-browser-exposed .photo-browser-thumbs,.photo-browser-exposed .toolbar{background-color:var(--f7-photobrowser-dark-bars-bg-color)}.photo-browser-dark .photo-browser-caption,.photo-browser-exposed .photo-browser-caption{color:var(--f7-photobrowser-caption-dark-text-color);background-color:var(--f7-photobrowser-dark-bars-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.photo-browser-page .toolbar:after,.photo-browser-page .toolbar:before{display:none!important}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}
+:root{--f7-photobrowser-caption-font-size:13px;--f7-photobrowser-caption-font-weight:500;--f7-photobrowser-exposed-bg-color:#000;--f7-photobrowser-bg-color:#fff;--f7-photobrowser-caption-text-color:#000}:root .dark,:root.dark{--f7-photobrowser-bg-color:#000;--f7-photobrowser-caption-text-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition-duration:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.toolbar.photo-browser-thumbs{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.page~.photo-browser-page:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-popup:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-standalone:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs{height:var(--f7-toolbar-height)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs{transform:translate3d(0,calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom,0)),0)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.navbar+.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.toolbar~.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) * 2 + var(--f7-safe-area-bottom))}.toolbar~.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,var(--f7-toolbar-height),0)}.toolbar:has(+ .photo-browser-thumbs)::after,.toolbar:has(+ .photo-browser-thumbs)::before{top:calc(-16px - var(--f7-toolbar-height))!important}.photo-browser-thumbs{transition-property:transform,background-color,color}.photo-browser-thumbs::after,.photo-browser-thumbs::before{display:none}.photo-browser-thumbs .swiper{width:100%;height:100%}.photo-browser-thumbs .swiper-slide{width:auto;display:flex;align-items:center;justify-content:center}.photo-browser-thumbs img{width:auto;height:75%;display:block;border-radius:8px;min-width:4px}.photo-browser-thumbs .swiper-slide img{transform:translateX(-4px);transition-duration:150ms}.photo-browser-thumbs .swiper-slide-active img{transform:scale(1.2)}.photo-browser-thumbs .swiper-slide-active~.swiper-slide img{transform:translateX(4px)}.photo-browser-caption{box-sizing:border-box;color:var(--f7-photobrowser-caption-text-color);transition-duration:.4s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size);font-weight:var(--f7-photobrowser-caption-font-weight)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color;touch-action:none}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.photo-browser-page{touch-action:none}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition-duration:.4s}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar:not(.photo-browser-thumbs){opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar:not(.photo-browser-thumbs)~.photo-browser-captions,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs~.photo-browser-captions{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-exposed .photo-browser-swiper-container{background:var(--f7-photobrowser-exposed-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}

package/components/photo-browser/photo-browser-vars.less

@@ -1,16 +1,14 @@
 :root {
-  --f7-photobrowser-bg-color: #fff;
-  --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
-  --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
-  --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
   --f7-photobrowser-caption-font-size: 13px;
   --f7-photobrowser-caption-font-weight: 500;
-  --f7-photobrowser-caption-light-text-color: #000;
-  --f7-photobrowser-caption-dark-text-color: #fff;
   --f7-photobrowser-exposed-bg-color: #000;
 
-  --f7-photobrowser-dark-bg-color: #000;
-  --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
-  --f7-photobrowser-dark-bars-text-color: #fff;
-  --f7-photobrowser-dark-bars-link-color: #fff;
+  .light-vars({
+    --f7-photobrowser-bg-color: #fff;
+    --f7-photobrowser-caption-text-color: #000;
+  });
+  .dark-vars({
+    --f7-photobrowser-bg-color: #000;
+    --f7-photobrowser-caption-text-color: #fff;
+  });
 }

package/components/photo-browser/photo-browser.css

@@ -1 +1 @@
-:root{--f7-photobrowser-bg-color:#fff;--f7-photobrowser-bars-bg-color:rgba(var(--f7-bars-bg-color-rgb), 0.95);--f7-photobrowser-bars-text-color:var(--f7-bars-text-color);--f7-photobrowser-bars-link-color:var(--f7-bars-link-color);--f7-photobrowser-caption-font-size:13px;--f7-photobrowser-caption-font-weight:500;--f7-photobrowser-caption-light-text-color:#000;--f7-photobrowser-caption-dark-text-color:#fff;--f7-photobrowser-exposed-bg-color:#000;--f7-photobrowser-dark-bg-color:#000;--f7-photobrowser-dark-bars-bg-color:rgba(27, 27, 27, 0.8);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition-duration:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.toolbar.photo-browser-thumbs{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.page~.photo-browser-page:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-popup:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-standalone:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs{height:var(--f7-toolbar-height)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs{transform:translate3d(0,calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom,0)),0)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.navbar+.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.toolbar~.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) * 2 + var(--f7-safe-area-bottom))}.toolbar~.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-thumbs{transition-property:transform,background-color,color}.photo-browser-thumbs .swiper{width:100%;height:100%}.photo-browser-thumbs .swiper-slide{width:auto;display:flex;align-items:center;justify-content:center}.photo-browser-thumbs img{width:auto;height:75%;display:block;border-radius:2px;min-width:4px}.photo-browser-thumbs .swiper-slide img{transform:translateX(-4px);transition-duration:150ms}.photo-browser-thumbs .swiper-slide-active img{transform:scale(1.2)}.photo-browser-thumbs .swiper-slide-active~.swiper-slide img{transform:translateX(4px)}.photo-browser-caption{box-sizing:border-box;transition-duration:.4s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size);font-weight:var(--f7-photobrowser-caption-font-weight)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .photo-browser-caption{-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-captions-light .photo-browser-caption{color:var(--f7-photobrowser-caption-light-text-color)}.dark .photo-browser-caption,.photo-browser-captions-dark .photo-browser-caption{color:var(--f7-photobrowser-caption-dark-text-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color;touch-action:none}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .right .link i,.navbar-photo-browser .right .link svg{width:24px;height:24px;display:block}.navbar-photo-browser .navbar-bg,.photo-browser-caption,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95))}.photo-browser-page{touch-action:none}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition-duration:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar:not(.photo-browser-thumbs){opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar:not(.photo-browser-thumbs)~.photo-browser-captions,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs~.photo-browser-captions{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-exposed .photo-browser-swiper-container{background:var(--f7-photobrowser-exposed-bg-color)}.photo-browser-dark .photo-browser-thumbs,.photo-browser-dark .toolbar,.photo-browser-exposed .photo-browser-thumbs,.photo-browser-exposed .toolbar{background-color:var(--f7-photobrowser-dark-bars-bg-color)}.photo-browser-dark .photo-browser-caption,.photo-browser-exposed .photo-browser-caption{color:var(--f7-photobrowser-caption-dark-text-color);background-color:var(--f7-photobrowser-dark-bars-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.photo-browser-page .toolbar:after,.photo-browser-page .toolbar:before{display:none!important}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}
+:root{--f7-photobrowser-caption-font-size:13px;--f7-photobrowser-caption-font-weight:500;--f7-photobrowser-exposed-bg-color:#000;--f7-photobrowser-bg-color:#fff;--f7-photobrowser-caption-text-color:#000}:root .dark,:root.dark{--f7-photobrowser-bg-color:#000;--f7-photobrowser-caption-text-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition-duration:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.toolbar.photo-browser-thumbs{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.page~.photo-browser-page:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-popup:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-standalone:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs{height:var(--f7-toolbar-height)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs{transform:translate3d(0,calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom,0)),0)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.navbar+.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom,0))}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.toolbar~.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) * 2 + var(--f7-safe-area-bottom))}.toolbar~.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,var(--f7-toolbar-height),0)}.toolbar:has(+ .photo-browser-thumbs)::after,.toolbar:has(+ .photo-browser-thumbs)::before{top:calc(-16px - var(--f7-toolbar-height))!important}.photo-browser-thumbs{transition-property:transform,background-color,color}.photo-browser-thumbs::after,.photo-browser-thumbs::before{display:none}.photo-browser-thumbs .swiper{width:100%;height:100%}.photo-browser-thumbs .swiper-slide{width:auto;display:flex;align-items:center;justify-content:center}.photo-browser-thumbs img{width:auto;height:75%;display:block;border-radius:8px;min-width:4px}.photo-browser-thumbs .swiper-slide img{transform:translateX(-4px);transition-duration:150ms}.photo-browser-thumbs .swiper-slide-active img{transform:scale(1.2)}.photo-browser-thumbs .swiper-slide-active~.swiper-slide img{transform:translateX(4px)}.photo-browser-caption{box-sizing:border-box;color:var(--f7-photobrowser-caption-text-color);transition-duration:.4s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size);font-weight:var(--f7-photobrowser-caption-font-weight)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color;touch-action:none}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.photo-browser-page{touch-action:none}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition-duration:.4s}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar:not(.photo-browser-thumbs){opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar:not(.photo-browser-thumbs)~.photo-browser-captions,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs~.photo-browser-captions{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-exposed .photo-browser-swiper-container{background:var(--f7-photobrowser-exposed-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}

package/components/photo-browser/photo-browser.d.ts

@@ -44,11 +44,9 @@ export namespace PhotoBrowser {
     navbar?: boolean;
     /** Set to false to remove Photo Browser's Toolbar (default true) */
     toolbar?: boolean;
-    /** Text on back link in Photo Browser's navbar (default "Back") */
+    /** Text on back link in Photo Browser's navbar (default "") */
     pageBackLinkText?: string;
-    /** Close icon (x mark) in Photo Browser's navbar when opened in Popup or as Standalone (default true) */
-    popupCloseLinkIcon?: boolean;
-    /** Text on close link in Photo Browser's navbar when opened in Popup or as Standalone (default undefined) */
+    /** Popup close link text (default '') */
     popupCloseLinkText?: string;
     /** Text of "of" in photos counter: "3 of 5" (default "of") */
     navbarOfText?: string;

package/components/photo-browser/photo-browser.js

@@ -16,9 +16,7 @@ export default {
       iconsColor: undefined,
       popupPush: false,
       swipeToClose: true,
-      pageBackLinkText: 'Back',
-      popupCloseLinkText: undefined,
-      popupCloseLinkIcon: true,
+      pageBackLinkText: '',
       navbarOfText: 'of',
       navbarShowCount: undefined,
       view: undefined,

package/components/photo-browser/photo-browser.less

@@ -100,8 +100,18 @@
     transform: translate3d(0, var(--f7-toolbar-height), 0);
   }
 }
+.toolbar:has(+ .photo-browser-thumbs) {
+  &::before,
+  &::after {
+    top: calc(-16px - var(--f7-toolbar-height)) !important;
+  }
+}
 .photo-browser-thumbs {
   transition-property: transform, background-color, color;
+  &::before,
+  &::after {
+    display: none;
+  }
   .swiper {
     width: 100%;
     height: 100%;
@@ -116,7 +126,7 @@
     width: auto;
     height: 75%;
     display: block;
-    border-radius: 2px;
+    border-radius: 8px;
     min-width: 4px;
   }
   .swiper-slide img {
@@ -132,6 +142,8 @@
 }
 .photo-browser-caption {
   box-sizing: border-box;
+  color: var(--f7-photobrowser-caption-text-color);
+
   transition-duration: 400ms;
   position: absolute;
   bottom: 0;
@@ -142,11 +154,6 @@
   text-align: center;
   font-size: var(--f7-photobrowser-caption-font-size);
   font-weight: var(--f7-photobrowser-caption-font-weight);
-  .ios-translucent-bars & {
-    @supports (backdrop-filter: blur(20px)) {
-      backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
-    }
-  }
 
   &:empty {
     display: none;
@@ -154,13 +161,6 @@
   &.photo-browser-caption-active {
     opacity: 1;
   }
-  .photo-browser-captions-light & {
-    color: var(--f7-photobrowser-caption-light-text-color);
-  }
-  .photo-browser-captions-dark &,
-  .dark & {
-    color: var(--f7-photobrowser-caption-dark-text-color);
-  }
 }
 
 .photo-browser-swiper-container {
@@ -233,33 +233,13 @@
     top: 50%;
   }
 }
-.navbar-photo-browser .right .link {
-  svg,
-  i {
-    width: 24px;
-    height: 24px;
-    display: block;
-  }
-}
-.photo-browser-page .navbar-bg,
-.navbar-photo-browser .navbar-bg,
-.photo-browser-page .toolbar,
-.photo-browser-caption {
-  background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
-}
+
 .photo-browser-page {
   touch-action: none;
   .navbar,
   .toolbar {
     transform: translate3d(0, 0, 0);
     transition-duration: 400ms;
-    color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
-    a {
-      color: var(
-        --f7-photobrowser-bars-link-color,
-        var(--f7-bars-link-color, var(--f7-theme-color))
-      );
-    }
   }
 }
 .photo-browser-exposed {
@@ -277,49 +257,13 @@
     background: var(--f7-photobrowser-exposed-bg-color);
   }
 }
-.photo-browser-exposed,
-.photo-browser-dark {
-  .photo-browser-thumbs,
-  .toolbar {
-    background-color: var(--f7-photobrowser-dark-bars-bg-color);
-  }
-  .photo-browser-caption {
-    color: var(--f7-photobrowser-caption-dark-text-color);
-    background-color: var(--f7-photobrowser-dark-bars-bg-color);
-  }
-}
+
 .view.with-photo-browser-page-exposed {
   .navbar {
     opacity: 0;
     pointer-events: none;
   }
 }
-.photo-browser-page .toolbar {
-  .hairline-remove-top-bottom();
-}
-.photo-browser-page-dark .navbar-bg,
-.navbar-photo-browser-dark .navbar-bg {
-  background: var(--f7-photobrowser-dark-bars-bg-color);
-  .hairline-remove-top-bottom();
-}
-
-.navbar-photo-browser-dark,
-.photo-browser-dark .navbar,
-.photo-browser-dark .toolbar,
-.photo-browser-page-dark .navbar,
-.photo-browser-page-dark .toolbar {
-  color: var(--f7-photobrowser-dark-bars-text-color);
-  a {
-    color: var(--f7-photobrowser-dark-bars-link-color);
-  }
-}
-
-.photo-browser-dark,
-.photo-browser-page-dark {
-  .photo-browser-swiper-container {
-    background: var(--f7-photobrowser-dark-bg-color);
-  }
-}
 
 @keyframes photo-browser-in {
   0% {

package/components/picker/picker-class.js

@@ -8,10 +8,7 @@ import pickerColumn from './picker-column.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class Picker extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const picker = this;
     const device = getDevice();
@@ -254,7 +251,9 @@ class Picker extends Framework7Class {
       class: "right"
     }, $jsx("a", {
       class: "link sheet-close popover-close"
-    }, picker.params.toolbarCloseText))));
+    }, $jsx("i", {
+      class: "icon icon-close"
+    }), picker.params.toolbarCloseText && $jsx("span", null, picker.params.toolbarCloseText)))));
   }
   // eslint-disable-next-line
   renderColumn(col, onlyItems) {

package/components/picker/picker-ios.less

@@ -3,10 +3,15 @@
     left: 16px;
     right: 16px;
     background-color: var(--f7-picker-item-selected-bg-color);
-    border-radius: 8px;
+    border-radius: 16px;
     .popover & {
       left: 8px;
       right: 8px;
     }
   }
+  .picker-popover {
+    .toolbar {
+      position: absolute;
+    }
+  }
 }

package/components/picker/picker-md.less

@@ -1,4 +1,13 @@
 .md {
+  .picker-popover {
+    .toolbar {
+      .hairline-remove(top);
+    }
+    .toolbar + .picker-columns {
+      height: calc(100% - var(--f7-toolbar-height));
+    }
+  }
+
   .picker-center-highlight {
     left: 0;
     right: 0;

package/components/picker/picker-rtl.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;font-size:var(--f7-picker-column-font-size);--f7-picker-mask-bg-color:transparent}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns::after,.picker-columns::before{content:'';position:absolute;left:0;width:100%;height:20%;z-index:100;pointer-events:none}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns::before{top:0;background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),transparent)}.picker-columns::after{bottom:0;background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),transparent)}.picker-column{position:relative;max-height:100%;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px;scrollbar-width:none;scrollbar-color:transparent}.picker-items::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:0px;display:none;opacity:0;background:0 0}.picker-items::-webkit-scrollbar-track{box-shadow:none;background:0 0}.picker-items::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.07);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;font-size:var(--f7-picker-column-font-size);--f7-picker-mask-bg-color:transparent}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns::after,.picker-columns::before{content:'';position:absolute;left:0;width:100%;height:20%;z-index:100;pointer-events:none}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns::before{top:0;background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),transparent)}.picker-columns::after{bottom:0;background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),transparent)}.picker-column{position:relative;max-height:100%;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px;scrollbar-width:none;scrollbar-color:transparent}.picker-items::-webkit-scrollbar{appearance:none;width:0px;display:none;opacity:0;background:0 0}.picker-items::-webkit-scrollbar-track{box-shadow:none;background:0 0}.picker-items::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:16px}.popover .ios .picker-center-highlight{left:8px;right:8px}.ios .picker-popover .toolbar{position:absolute}.md .picker-popover .toolbar:before{display:none!important}.md .picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}

package/components/picker/picker-vars.less

@@ -13,7 +13,7 @@
   --f7-picker-column-font-size: 20px;
   .light-vars({
     --f7-picker-item-selected-text-color: #000;
-    --f7-picker-item-selected-bg-color: rgba(0,0,0,0.12);
+    --f7-picker-item-selected-bg-color: rgba(0,0,0,0.07);
     --f7-picker-divider-text-color: #000;
     --f7-picker-item-text-color: rgba(0,0,0,0.45);
   });