cty-mui-core 1.0.10 → 1.0.12

package/components/action-sheet.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, b as present, d as dismiss, e as eventMethod } from './overlays.js';
-import { c as createLockController, g as getClassMap, d as defineCustomElement$2, e as enterAnimation, l as leaveAnimation } from './overlay.js';
+import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, r as removeBodyScrollClass, b as present, d as dismiss, e as eventMethod } from './overlays.js';
+import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers3.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$3 } from './backdrop.js';
+import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
 const actionSheetCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-pos-rel{position:relative}.cty-pos-abs{position:absolute}.cty-pos-fix{position:fixed}.cty-pos-sti{position:-webkit-sticky;position:sticky}.cty-pos-cover{position:absolute;top:0;bottom:0;left:0;right:0}.cty-pos-l-t{position:absolute;left:0;top:0}.cty-pos-l-b{position:absolute;left:0;bottom:0}.cty-pos-r-t{position:absolute;right:0;top:0}.cty-pos-r-b{position:absolute;right:0;bottom:0}.cty-pos-100{position:absolute;left:0;top:0;width:100%;height:100%}.cty-pos-w100{position:absolute;left:0;width:100%}.cty-pos-h100{position:absolute;top:0;height:100%}.cty-pos-c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-pos-c-x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-t{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-b{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-l{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-r{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}.cty-ellipsis[class]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:normal}.cty-ellipsis2[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;word-wrap:break-word}.cty-ellipsis3[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-all;word-wrap:break-word}.cty-ellipsis4[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;word-break:break-all;word-wrap:break-word}ion-button{--background-activated:transparent;--background-focused:transparent;--background-hover:transparent;--box-shadow:none}ion-grid{padding:0}ion-row{padding:0}ion-col{padding:0}ion-item{--padding-bottom:0;--padding-end:0;--padding-start:0;--padding-top:0;--inner-padding-top:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-bottom:0;--inner-border-width:0;--border-width:0;--min-height:0;--background:none;overflow:initial}ion-toast{--width:84%;--height:36px;--color:var(--cty-color-white);--background:rgba(0, 0, 0, 0.7);--border-radius:100px;line-height:1.2;font-size:var(--cty-font-size-base);text-align:center}.plt-hybrid .safe-area-bottom-border{-webkit-box-sizing:content-box;box-sizing:content-box;border-bottom:var(--ion-safe-area-bottom, 0) solid var(--cty-color-white)}.plt-hybrid .safe-area-bottom-border-color{-webkit-box-sizing:content-box;box-sizing:content-box;border-bottom:var(--ion-safe-area-bottom, 0) solid currentColor}.plt-hybrid .safe-area-bottom-padding{padding-bottom:var(--ion-safe-area-bottom, 0)}:host{--cty-action-sheet-overlay-position:fixed;--cty-action-sheet-overlay-z-index:10;--cty-action-sheet-overlay-background:var(--cty-overlay-color);--cty-action-sheet-overlay-width:100vw;--cty-action-sheet-overlay-height:100vh;--cty-action-sheet-background:var(--cty-color-white);--cty-action-sheet-max-height:80%;--cty-action-sheet-padding:0;--cty-action-sheet-border-radius:10px 10px 0 0;--cty-action-sheet-header-border:1px solid var(--cty-border-color-extra-light);--cty-action-sheet-title-color:var(--cty-text-color-primary);--cty-action-sheet-title-size:var(--cty-font-size-medium);--cty-action-sheet-title-line-height:36px;--cty-action-sheet-title-weight:500;--cty-action-sheet-title-align:center;--cty-action-sheet-subtitle-color:var(--cty-text-color-secondary);--cty-action-sheet-subtitle-size:var(--cty-font-size-small);--cty-action-sheet-subtitle-line-height:18px;--cty-action-sheet-subtitle-offset:8px;--cty-action-sheet-subtitle-align:center;--cty-action-sheet-close-top:10px;--cty-action-sheet-close-right:10px;--cty-action-sheet-close-width:24px;--cty-action-sheet-close-height:24px;--cty-action-sheet-close-border-radius:var(--cty-border-radius-circle);--cty-action-sheet-close-border:1px solid var(--cty-text-color-white);--cty-action-sheet-close-color:var(--cty-text-color-secondary);--cty-action-sheet-close-size:18px;--cty-action-sheet-option-border:1px solid var(--cty-border-color-extra-light);--cty-action-sheet-option-padding-bottom:14px;--cty-action-sheet-option-padding-top:14px;--cty-action-sheet-option-text-align:center;--cty-action-sheet-option-text-color:var(--cty-text-color-primary);--cty-action-sheet-option-text-size:var(--cty-font-size-medium);--cty-action-sheet-option-text-line-height:22px;--cty-action-sheet-option-description-offset:8px;--cty-action-sheet-option-description-color:var(--cty-text-color-secondary);--cty-action-sheet-option-description-size:var(--cty-font-size-small);--cty-action-sheet-option-description-line-height:18px;--cty-action-sheet-cancel-background:var(--cty-color-white);--cty-action-sheet-cancel-padding-top:0;--cty-action-sheet-cancel-padding-bottom:0;--cty-action-sheet-cancel-border:8px solid var(--cty-border-color-extra-light);--cty-action-sheet-cancel-color:var(--cty-text-color-primary);--cty-action-sheet-cancel-min-height:48px;--cty-action-sheet-cancel-size:var(--cty-font-size-medium)}:host(.overlay-hidden){display:none}cty-overlay{--cty-overlay-position:var(--cty-action-sheet-overlay-position);--cty-overlay-z-index:var(--cty-action-sheet-overlay-z-index);--cty-overlay-background:var(--cty-action-sheet-overlay-background);--cty-overlay-width:var(--cty-action-sheet-overlay-width);--cty-overlay-height:var(--cty-action-sheet-overlay-height)}.cty-action-sheet{overflow:hidden;width:100%;max-height:var(--cty-action-sheet-max-height);background-color:var(--cty-action-sheet-background);padding:var(--cty-action-sheet-padding);border-radius:var(--cty-action-sheet-border-radius)}.cty-action-sheet__header{position:relative;width:100%;border-bottom:var(--cty-action-sheet-header-border)}.cty-action-sheet__title[class]{color:var(--cty-action-sheet-title-color);font-size:var(--cty-action-sheet-title-size);text-align:var(--cty-action-sheet-title-align);line-height:var(--cty-action-sheet-title-line-height);font-weight:var(--cty-action-sheet-title-weight)}.cty-action-sheet__subtitle{margin-bottom:var(--cty-action-sheet-subtitle-offset);line-height:var(--cty-action-sheet-subtitle-line-height);color:var(--cty-action-sheet-subtitle-color);font-size:var(--cty-action-sheet-subtitle-size);text-align:var(--cty-action-sheet-subtitle-align)}.cty-action-sheet__close{position:absolute;z-index:2;right:var(--cty-action-sheet-close-right);top:var(--cty-action-sheet-close-top);width:var(--cty-action-sheet-close-width);height:var(--cty-action-sheet-close-height);font-size:var(--cty-action-sheet-close-size);color:var(--cty-action-sheet-close-color);border-radius:var(--cty-action-sheet-close-border-radius);border:var(--cty-action-sheet-close-border)}.cty-action-sheet__options{-ms-flex:1 auto;flex:1 auto;overflow-y:auto;width:100%}.cty-action-sheet__option{width:100%;padding-top:var(--cty-action-sheet-option-padding-top);padding-bottom:var(--cty-action-sheet-option-padding-bottom);border-bottom:var(--cty-action-sheet-option-border)}.cty-action-sheet__option[disabled]{cursor:not-allowed;opacity:0.5}.cty-action-sheet__option:last-child{border-bottom:none}.cty-action-sheet__option-content{width:100%;text-align:var(--cty-action-sheet-option-text-align)}.cty-action-sheet__option-text{display:block;line-height:var(--cty-action-sheet-option-text-line-height);font-size:var(--cty-action-sheet-option-text-size);color:var(--cty-action-sheet-option-text-color)}.cty-action-sheet__option-description{display:block;margin-top:var(--cty-action-sheet-option-description-offset);color:var(--cty-action-sheet-option-description-color);line-height:var(--cty-action-sheet-option-description-line-height);font-size:var(--cty-action-sheet-option-description-size)}.cty-action-sheet__cancel{border-top:var(--cty-action-sheet-cancel-border)}.cty-action-sheet__cancel-button{width:100%;min-height:var(--cty-action-sheet-cancel-min-height);background:var(--cty-action-sheet-cancel-background);padding-top:var(--cty-action-sheet-cancel-padding-top);padding-bottom:var(--cty-action-sheet-cancel-padding-bottom);font-size:var(--cty-action-sheet-cancel-size);color:var(--cty-action-sheet-cancel-color)}";
@@ -52,7 +53,7 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
-        // this.presented && this.dismiss();//忘了为什么加这个，disconnectedCallback不止触发一次
+        this.presented && removeBodyScrollClass();
     }
     componentDidLoad() {
         !this.hasController && raf(() => this.present());
@@ -93,9 +94,9 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
         }), h("slot", { name: "options-end" })));
     }
     render() {
-        return (h(Host, { key: '0e4944340ee226375034d529fe82d4808cd5aebf', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-overlay", { key: '8ad470f7f41c5db0f5efc4ea439825153179ed2c', animated: false, position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: '18d2dd95902c4273f63f50cdef8fef2d9492c2b7', class: "cty-action-sheet flex-column safe-area-bottom-border-color", onClick: e => {
+        return (h(Host, { key: '383860f340ee55309221b350b4a1e834f4eb1ec3', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '0637ba27558796a34a6fe760e4e3fdb7bf900755', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'a030f40c7a2f3380541d52b6a9730e2789b196a2', class: "cty-action-sheet flex-column safe-area-bottom-border-color", onClick: e => {
                 e.stopPropagation();
-            } }, h("slot", { key: 'd87ffac93a4b4e042287ae803802c1e2b5e77034', name: "header" }), this.renderHeader(), h("slot", { key: '47b942c7872faf29e3a892b9b6fb72463b84f703', name: "options" }), this.renderOptions(), this.cancelText && (h("div", { key: '5d8812cfe9a121ff3e900796336f0040e5adc85d', class: "cty-action-sheet__cancel" }, h("button", { key: '707d216e4f657ac41c3450eb270e2519969f0d0e', part: "cancel", class: "cty-action-sheet__cancel-button cty-button-native", onClick: () => this.dismiss() }, this.cancelText))), h("slot", { key: 'd03610d01ec280e660edfb7cd1da432b70478d51', name: "cancel" })))));
+            } }, h("slot", { key: 'c82e82e964315d2be98aaaa884ab3eb7920fd014', name: "header" }), this.renderHeader(), h("slot", { key: '67678e0ec5a86493f98003b297c9ffb7bdda9c78', name: "options" }), this.renderOptions(), this.cancelText && (h("div", { key: '9ee984f2178fc9789733a80f3e8ba8d28fb91362', class: "cty-action-sheet__cancel" }, h("button", { key: '9dffda0fce8311e8cb284e518ac456f861af40b1', part: "cancel", class: "cty-action-sheet__cancel-button cty-button-native", onClick: () => this.dismiss() }, this.cancelText))), h("slot", { key: '628354b84c344346fc670a94148c3cbd4d9c1397', name: "cancel" })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -130,19 +131,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-action-sheet", "cty-icon", "cty-overlay", "ion-icon"];
+    const components = ["cty-action-sheet", "cty-backdrop", "cty-icon", "ion-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-action-sheet":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, ActionSheet);
             }
             break;
-        case "cty-icon":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "cty-overlay":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/action-sheet2.js

@@ -3,10 +3,10 @@ import { c as createButtonActiveGesture } from './button-active.js';
 import { r as raf } from './helpers2.js';
 import { c as createLockController } from './lock-controller.js';
 import { c as createDelegateController, a as createTriggerController, B as BACKDROP, i as isCancel, b as present, d as dismiss, e as eventMethod, f as safeCall, p as prepareOverlay, s as setOverlayId } from './overlays2.js';
-import { g as getClassMap } from './theme.js';
+import { g as getClassMap } from './theme2.js';
 import { g as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
-import { d as defineCustomElement$3 } from './backdrop.js';
+import { d as defineCustomElement$3 } from './backdrop2.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 import { d as defineCustomElement$1 } from './ripple-effect.js';
 

package/components/alert.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createLockController, g as getClassMap, s as sanitizeDOMString, d as defineCustomElement$2, e as enterAnimation, l as leaveAnimation } from './overlay.js';
-import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, b as present, d as dismiss, e as eventMethod } from './overlays.js';
+import { s as sanitizeDOMString } from './index4.js';
+import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, r as removeBodyScrollClass, b as present, d as dismiss, e as eventMethod } from './overlays.js';
+import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers3.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$3 } from './backdrop.js';
+import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
 const alertCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-pos-rel{position:relative}.cty-pos-abs{position:absolute}.cty-pos-fix{position:fixed}.cty-pos-sti{position:-webkit-sticky;position:sticky}.cty-pos-cover{position:absolute;top:0;bottom:0;left:0;right:0}.cty-pos-l-t{position:absolute;left:0;top:0}.cty-pos-l-b{position:absolute;left:0;bottom:0}.cty-pos-r-t{position:absolute;right:0;top:0}.cty-pos-r-b{position:absolute;right:0;bottom:0}.cty-pos-100{position:absolute;left:0;top:0;width:100%;height:100%}.cty-pos-w100{position:absolute;left:0;width:100%}.cty-pos-h100{position:absolute;top:0;height:100%}.cty-pos-c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-pos-c-x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-t{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-b{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-l{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-r{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}ion-button{--background-activated:transparent;--background-focused:transparent;--background-hover:transparent;--box-shadow:none}ion-grid{padding:0}ion-row{padding:0}ion-col{padding:0}ion-item{--padding-bottom:0;--padding-end:0;--padding-start:0;--padding-top:0;--inner-padding-top:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-bottom:0;--inner-border-width:0;--border-width:0;--min-height:0;--background:none;overflow:initial}ion-toast{--width:84%;--height:36px;--color:var(--cty-color-white);--background:rgba(0, 0, 0, 0.7);--border-radius:100px;line-height:1.2;font-size:var(--cty-font-size-base);text-align:center}:host{--cty-alert-overlay-position:fixed;--cty-alert-overlay-z-index:10;--cty-alert-overlay-background:var(--cty-overlay-color);--cty-alert-overlay-width:100vw;--cty-alert-overlay-height:100vh;--cty-alert-overflow:initial;--cty-alert-width:80%;--cty-alert-background:var(--cty-color-white);--cty-alert-padding-bottom:15px;--cty-alert-padding-end:15px;--cty-alert-padding-start:15px;--cty-alert-padding-top:15px;--cty-alert-transform:none;--cty-alert-transform-origin:center center;--cty-alert-border-radius:12px;--cty-alert-img-translate-y:0;--cty-alert-img-width:70px;--cty-alert-img-z-index:0;--cty-alert-header-padding:0;--cty-alert-header-margin:0;--cty-alert-title-align:flex-start;--cty-alert-title-color:var(--cty-text-color-primary);--cty-alert-title-size:var(--cty-font-size-medium);--cty-alert-title-weight:600;--cty-alert-title-line-height:20px;--cty-alert-close-top:12px;--cty-alert-close-right:8px;--cty-alert-close-width:24px;--cty-alert-close-height:24px;--cty-alert-close-border-radius:var(--cty-border-radius-circle);--cty-alert-close-border:1px solid var(--cty-text-color-white);--cty-alert-close-size:18px;--cty-alert-close-color:var(--cty-text-color-regular);--cty-alert-content-margin-bottom:20px;--cty-alert-content-margin-top:20px;--cty-alert-content-padding-bottom:0;--cty-alert-content-padding-end:0;--cty-alert-content-padding-start:0;--cty-alert-content-padding-top:0;--cty-alert-content-size:var(--cty-font-size-base);--cty-alert-content-align:justify;--cty-alert-content-text-indent:initial;--cty-alert-content-color:var(--cty-text-color-primary);--cty-alert-content-line-height:20px;--cty-alert-buttons-direction:row;--cty-alert-buttons-justify:center;--cty-alert-buttons-align:center;--cty-alert-buttons-padding:0;--cty-alert-buttons-margin:0;--cty-alert-button-width:100%;--cty-alert-button-min-height:36px;--cty-alert-button-padding:0;--cty-alert-button-offset-top:0;--cty-alert-button-offset-right:15px;--cty-alert-button-radius:var(--cty-border-radius-medium);--cty-alert-button-background:var(--cty-color-white);--cty-alert-button-border:1px solid var(--cty-border-color);--cty-alert-button-color:var(--cty-text-color-primary);--cty-alert-button-size:var(--cty-font-size-base);--cty-alert-button-primary-background:var(--cty-color-primary);--cty-alert-button-primary-color:var(--cty-text-color-white);--cty-alert-button-primary-border-color:var(--cty-color-primary)}:host(.overlay-hidden){display:none}cty-overlay{--cty-overlay-position:var(--cty-alert-overlay-position);--cty-overlay-z-index:var(--cty-alert-overlay-z-index);--cty-overlay-background:var(--cty-alert-overlay-background);--cty-overlay-width:var(--cty-alert-overlay-width);--cty-overlay-height:var(--cty-alert-overlay-height)}.cty-alert{overflow:var(--cty-alert-overflow);position:relative;width:var(--cty-alert-width);background:var(--cty-alert-background);padding:var(--cty-alert-padding-top) var(--cty-alert-padding-end) var(--cty-alert-padding-bottom) var(--cty-alert-padding-start);border-radius:var(--cty-alert-border-radius);-webkit-transform-origin:var(--cty-alert-transform-origin);transform-origin:var(--cty-alert-transform-origin);-webkit-transform:var(--cty-alert-transform);transform:var(--cty-alert-transform)}.cty-alert__img{position:absolute;left:50%;top:0;z-index:var(--cty-alert-img-z-index);width:var(--cty-alert-img-width);-webkit-transform:translate(-50%, var(--cty-alert-img-translate-y));transform:translate(-50%, var(--cty-alert-img-translate-y));pointer-events:none}.cty-alert__close{position:absolute;z-index:calc(var(--cty-alert-img-z-index) + 1);right:var(--cty-alert-close-right);top:var(--cty-alert-close-top);font-size:var(--cty-alert-close-size);color:var(--cty-alert-close-color);border-radius:var(--cty-alert-close-border-radius);border:var(--cty-alert-close-border);width:var(--cty-alert-close-width);height:var(--cty-alert-close-height)}.cty-alert__header{position:relative;-ms-flex-pack:var(--cty-alert-title-align);justify-content:var(--cty-alert-title-align);margin:var(--cty-alert-header-margin);padding:var(--cty-alert-header-padding)}.cty-alert__title{font-size:var(--cty-alert-title-size);font-weight:var(--cty-alert-title-weight);line-height:var(--cty-alert-title-line-height);color:var(--cty-alert-title-color)}.cty-alert__content{position:relative;margin:var(--cty-alert-content-margin-top) 0 var(--cty-alert-content-margin-bottom);padding:var(--cty-alert-content-padding-top) var(--cty-alert-content-padding-end) var(--cty-alert-content-padding-bottom) var(--cty-alert-content-padding-start);font-size:var(--cty-alert-content-size);color:var(--cty-alert-content-color);line-height:var(--cty-alert-content-line-height);text-align:var(--cty-alert-content-align);text-indent:var(--cty-alert-content-text-indent)}.cty-alert__buttons{-ms-flex-direction:var(--cty-alert-buttons-direction);flex-direction:var(--cty-alert-buttons-direction);-ms-flex-pack:var(--cty-alert-buttons-justify);justify-content:var(--cty-alert-buttons-justify);-ms-flex-align:var(--cty-alert-buttons-align);align-items:var(--cty-alert-buttons-align);margin:var(--cty-alert-buttons-margin);padding:var(--cty-alert-buttons-padding)}.cty-alert__button{width:var(--cty-alert-button-width);min-height:var(--cty-alert-button-min-height);padding:var(--cty-alert-button-padding);background:var(--cty-alert-button-background);font-size:var(--cty-alert-button-size);color:var(--cty-alert-button-color);border-radius:var(--cty-alert-button-radius);border:var(--cty-alert-button-border)}.cty-alert__button+.cty-alert__button{margin:var(--cty-alert-button-offset-top) 0 0 var(--cty-alert-button-offset-right)}.cty-alert__button:last-child{color:var(--cty-alert-button-primary-color);background:var(--cty-alert-button-primary-background);border-color:var(--cty-alert-button-primary-border-color)}";
@@ -67,7 +69,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
-        // this.presented && this.dismiss(); //忘了为什么加这个，disconnectedCallback不止触发一次
+        this.presented && removeBodyScrollClass();
     }
     componentDidLoad() {
         !this.hasController && raf(() => this.present());
@@ -101,7 +103,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         }
     }
     render() {
-        return (h(Host, { key: '2693a8a2631d92ad9f323747e425770125752eeb', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-overlay", { key: '9d51c2696ae1d2d4f35dc9a5702336939cf1acb5', animated: false, backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("slot", { key: '86ea129915a6074a8da3ee8d98663ad53c955472', name: "alert" }), h("div", { key: 'b2929ce71ade71befde4310bfc058424ab237779', class: "cty-alert", onClick: (e) => e.stopPropagation() }, this.img && h("img", { key: '95ce34363462fed18d917db284cf97781d594c5b', src: this.img, class: "cty-alert__img" }), this.closeable && h("slot", { key: '8a3621bbd1cff88112d1077a4f569cc72ce0f2f8', name: "close" }, h("button", { key: '4e6c9a680fc855722c713184d2c26bf49c08234d', class: "cty-alert__close cty-button-native", onClick: () => this.dismiss() }, h("cty-icon", { key: '05882dcbeed8a699e14c5de51c0df0abcc3b6aa8', name: "cty-close2" }))), h("slot", { key: '525bf2cc9482eaca2b3d9effa94bb46010521d1e', name: "header" }), h("div", { key: 'e9f0bddc5b523d9e4d28db7e8b1248b17d472ed9', class: "cty-alert__header flex-align-center", part: "header" }, h("slot", { key: '95fa202c9c3dd08bfe59237371f16d5c6efc989b', name: "title-start" }), h("h3", { key: '0fd533376b7c15f4918437deec7ee0f7ddff4a49', class: "cty-alert__title" }, this.title), h("slot", { key: '6cfc14da3b4ebfa5e10bc17bb1a5b4d172c7170d', name: "title-end" })), h("slot", { key: 'dc96a08610c050bd3f97eb9fd70ebadce430c6c9', name: "content" }), this.content && h("div", { key: 'c2a524ee6de82e40a1d62b03ee28b34e489cf825', part: "content", class: "cty-alert__content", innerHTML: sanitizeDOMString(this.content) }), h("slot", { key: '67452e3d6f3aed243b7c6b3b16d126252a14d1a6', name: "buttons" }), !!this._buttonList.length && h("div", { key: 'c8c02c750469a601b742d436a2cddf459f6fe376', class: "cty-alert__buttons flex", part: "buttons" }, this._buttonList.map((ele, idx) => h("button", { part: "button button" + idx, onClick: () => this._buttonClick(ele, idx), class: { 'cty-alert__button cty-button-native': true } }, ele.text))), h("slot", { key: '72e9bbfd40d495878f7bf0ba950d5a7bf110c7a7', name: "bottom" })))));
+        return (h(Host, { key: '443a4e7c55a60252ebcae085abe850e02aad8dc6', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '662f4df9ac4be1e45bad735d68f04f12eadf6b1d', backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("slot", { key: 'd53c95bca14031e3de77a52aa40a5fe84d1f970a', name: "alert" }), h("div", { key: '683df4c95868a61dd50a85b5134a0621b1abdafa', class: "cty-alert", onClick: (e) => e.stopPropagation() }, this.img && h("img", { key: '90f1ff5785e3a034fd7a644897fce5c444f3a447', src: this.img, class: "cty-alert__img" }), this.closeable && h("slot", { key: '3baf2dbef135f783d667315e776fd8f6bde4de1d', name: "close" }, h("button", { key: '2e1ace1514d712c5495f58fcc1d143d962c5410a', class: "cty-alert__close cty-button-native", onClick: () => this.dismiss() }, h("cty-icon", { key: '0fe2233dfd9b40f0486e28ef5a872aef695a2178', name: "cty-close2" }))), h("slot", { key: '047d10bf31388e9c2310cbe6492b5accb8a13ca3', name: "header" }), h("div", { key: '4822d9eec8badd56e74e9863429e93137909ae92', class: "cty-alert__header flex-align-center", part: "header" }, h("slot", { key: 'ecf730782187c55ea3e435fc765d4281c83bcedb', name: "title-start" }), h("h3", { key: 'bae1eac0d8ccfa443ad3bfb92f537152751f424e', class: "cty-alert__title" }, this.title), h("slot", { key: '843534c328dd14ab00c1995759ccb6cce89a1297', name: "title-end" })), h("slot", { key: 'addcba4a68e391a7dc4202454475e00f6c464832', name: "content" }), this.content && h("div", { key: 'e14b059da275c0aa78bf39e9f9ce47add3772038', part: "content", class: "cty-alert__content", innerHTML: sanitizeDOMString(this.content) }), h("slot", { key: '3b92b7f67f071851df3909228c07c699d7ca5368', name: "buttons" }), !!this._buttonList.length && h("div", { key: 'eadf4c3c9a83e5a32de7df5a01daf51cbead8764', class: "cty-alert__buttons flex", part: "buttons" }, this._buttonList.map((ele, idx) => h("button", { part: "button button" + idx, onClick: () => this._buttonClick(ele, idx), class: { 'cty-alert__button cty-button-native': true } }, ele.text))), h("slot", { key: 'fcb8ac669c54944b1219e3c57125085a8987efa3', name: "bottom" })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -137,19 +139,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-alert", "cty-icon", "cty-overlay", "ion-icon"];
+    const components = ["cty-alert", "cty-backdrop", "cty-icon", "ion-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-alert":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Alert);
             }
             break;
-        case "cty-icon":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "cty-overlay":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/alert2.js

@@ -4,11 +4,11 @@ import { c as createButtonActiveGesture } from './button-active.js';
 import { r as raf } from './helpers2.js';
 import { c as createLockController } from './lock-controller.js';
 import { c as createDelegateController, a as createTriggerController, B as BACKDROP, i as isCancel, p as prepareOverlay, s as setOverlayId, b as present, d as dismiss, e as eventMethod, f as safeCall } from './overlays2.js';
-import { g as getClassMap } from './theme.js';
+import { g as getClassMap } from './theme2.js';
 import { b as config } from './platform.js';
 import { g as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
-import { d as defineCustomElement$2 } from './backdrop.js';
+import { d as defineCustomElement$2 } from './backdrop2.js';
 import { d as defineCustomElement$1 } from './ripple-effect.js';
 
 /*!

package/components/backdrop.js

@@ -1,70 +1,40 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
-import { g as getIonMode } from './ionic-global.js';
+import { s as sanitizeDOMString } from './index4.js';
 
-const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
-const IonBackdropIosStyle0 = backdropIosCss;
-
-const backdropMdCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
-const IonBackdropMdStyle0 = backdropMdCss;
+const backdropCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-pos-rel{position:relative}.cty-pos-abs{position:absolute}.cty-pos-fix{position:fixed}.cty-pos-sti{position:-webkit-sticky;position:sticky}.cty-pos-cover{position:absolute;top:0;bottom:0;left:0;right:0}.cty-pos-l-t{position:absolute;left:0;top:0}.cty-pos-l-b{position:absolute;left:0;bottom:0}.cty-pos-r-t{position:absolute;right:0;top:0}.cty-pos-r-b{position:absolute;right:0;bottom:0}.cty-pos-100{position:absolute;left:0;top:0;width:100%;height:100%}.cty-pos-w100{position:absolute;left:0;width:100%}.cty-pos-h100{position:absolute;top:0;height:100%}.cty-pos-c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-pos-c-x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-t{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-b{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-l{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-r{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host{position:fixed;left:0;top:0;width:100vw;height:100vh;background:var(--cty-overlay-color);z-index:10}.cty-backdrop__slot{width:100%}";
+const CtyBackdropStyle0 = backdropCss;
 
 const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
-        this.blocker = GESTURE_CONTROLLER.createBlocker({
-            disableScroll: true,
-        });
-        this.visible = true;
-        this.tappable = true;
-        this.stopPropagation = true;
-    }
-    connectedCallback() {
-        if (this.stopPropagation) {
-            this.blocker.block();
-        }
-    }
-    disconnectedCallback() {
-        this.blocker.unblock();
-    }
-    onMouseDown(ev) {
-        this.emitTap(ev);
+        this.ctyDismiss = createEvent(this, "ctyDismiss", 7);
+        this.backdropDismiss = true;
+        this.position = 'middle';
+        this.html = '';
     }
-    emitTap(ev) {
-        if (this.stopPropagation) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-        if (this.tappable) {
-            this.ionBackdropTap.emit();
-        }
+    dismiss() {
+        this.ctyDismiss.emit();
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '16b1328f4a058b8d3752e58dc56c44bed556c425', tabindex: "-1", "aria-hidden": "true", class: {
-                [mode]: true,
-                'backdrop-hide': !this.visible,
-                'backdrop-no-tappable': !this.tappable,
-            } }));
+        const { position } = this;
+        const positionClass = position === 'top' ? 'flex-justify-center' : position === 'bottom' ? 'flex-align-end-center' : 'flex-center';
+        return (h(Host, { key: 'a3ee5633e4943e398b06e6291ad0894b653e99b0', onClick: () => this.backdropDismiss && this.dismiss(), class: { 'cty-backdrop': true, [positionClass]: true } }, h("slot", { key: '32fc726480c8be3fad79dd48aaba64c523770a9d' }), this.html && h("div", { key: 'dd6fc6f89b2f43463a4d38e352b4c0f51f150e6a', innerHTML: sanitizeDOMString(this.html), onClick: (e) => e.stopPropagation() })));
     }
-    static get style() { return {
-        ios: IonBackdropIosStyle0,
-        md: IonBackdropMdStyle0
-    }; }
-}, [33, "ion-backdrop", {
-        "visible": [4],
-        "tappable": [4],
-        "stopPropagation": [4, "stop-propagation"]
-    }, [[2, "click", "onMouseDown"]]]);
+    static get style() { return CtyBackdropStyle0; }
+}, [1, "cty-backdrop", {
+        "backdropDismiss": [4, "backdrop-dismiss"],
+        "position": [1],
+        "html": [1]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ion-backdrop"];
+    const components = ["cty-backdrop"];
     components.forEach(tagName => { switch (tagName) {
-        case "ion-backdrop":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Backdrop);
             }

package/components/backdrop2.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
+import { g as getIonMode } from './ionic-global.js';
+
+const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
+const IonBackdropIosStyle0 = backdropIosCss;
+
+const backdropMdCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
+const IonBackdropMdStyle0 = backdropMdCss;
+
+const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
+        this.blocker = GESTURE_CONTROLLER.createBlocker({
+            disableScroll: true,
+        });
+        this.visible = true;
+        this.tappable = true;
+        this.stopPropagation = true;
+    }
+    connectedCallback() {
+        if (this.stopPropagation) {
+            this.blocker.block();
+        }
+    }
+    disconnectedCallback() {
+        this.blocker.unblock();
+    }
+    onMouseDown(ev) {
+        this.emitTap(ev);
+    }
+    emitTap(ev) {
+        if (this.stopPropagation) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        if (this.tappable) {
+            this.ionBackdropTap.emit();
+        }
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '16b1328f4a058b8d3752e58dc56c44bed556c425', tabindex: "-1", "aria-hidden": "true", class: {
+                [mode]: true,
+                'backdrop-hide': !this.visible,
+                'backdrop-no-tappable': !this.tappable,
+            } }));
+    }
+    static get style() { return {
+        ios: IonBackdropIosStyle0,
+        md: IonBackdropMdStyle0
+    }; }
+}, [33, "ion-backdrop", {
+        "visible": [4],
+        "tappable": [4],
+        "stopPropagation": [4, "stop-propagation"]
+    }, [[2, "click", "onMouseDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-backdrop"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-backdrop":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Backdrop);
+            }
+            break;
+    } });
+}
+
+export { Backdrop as B, defineCustomElement as d };

package/components/banner.js

@@ -60,7 +60,7 @@ const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement
             indicator,
             touchable
         };
-        return (h(Host, { key: 'c8fc6e5308ddff650870f7b9cd69c95180f4ff46', class: "cty-banner" }, h("cty-swipe", Object.assign({ key: '80020a2b65ed9e067d6e345d2962ac7880a38fc5', class: "cty-banner__swipe" }, attrs, { onCtyChange: (e) => this.handleChange(e), ref: (el) => this.swipeEl = el }), this._banners.map((item, index) => (h("cty-swipe-item", { class: "cty-banner__swipe-item", onClick: (e) => { this.handleTap(e, item, index); } }, item[this.props.pic] && h("img", { class: "cty-banner__img", src: item[this.props.pic], alt: item[this.props.alt || ''] }), h("slot", { name: index + '' })))), h("slot", { key: 'f929374df6ae7db99663cbf311ad3e30e8864114', slot: "start", name: "start" }), h("slot", { key: 'e03ec41fa220c6d4347cffbdee37a58519e58f03', slot: "end", name: "end" }))));
+        return (h(Host, { key: '1d9440abcc601572875e5fe29e483a4470fc7b35', class: "cty-banner" }, h("cty-swipe", Object.assign({ key: '1344e122c375dc8729695124667877d3159988fd', class: "cty-banner__swipe" }, attrs, { onCtyChange: (e) => this.handleChange(e), ref: (el) => this.swipeEl = el }), this._banners.map((item, index) => (h("cty-swipe-item", { class: "cty-banner__swipe-item", onClick: (e) => { this.handleTap(e, item, index); } }, item[this.props.pic] && h("img", { class: "cty-banner__img", src: item[this.props.pic], alt: item[this.props.alt || ''] }), h("slot", { name: index + '' })))), h("slot", { key: '750ea85d7cfc70b1b0ff88d533cd5c9a2292a218', slot: "start", name: "start" }), h("slot", { key: '1158047f4ed9b6dce78bd94634b395013b209176', slot: "end", name: "end" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/button-active.js

@@ -1,6 +1,6 @@
 import { writeTask } from '@stencil/core/internal/client';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic.js';
-import { createGesture } from './index7.js';
+import { createGesture } from './index8.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License

package/components/button.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as hasShadowDom, i as inheritAriaAttributes } from './helpers2.js';
-import { p as printIonWarning } from './index6.js';
-import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
+import { p as printIonWarning } from './index7.js';
+import { o as openURL, c as createColorClasses, h as hostContext } from './theme2.js';
 import { g as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$1 } from './ripple-effect.js';
 

package/components/checkbox.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createLegacyFormController } from './form-controller.js';
 import { i as inheritAriaAttributes, a as renderHiddenInput, g as getAriaLabel } from './helpers2.js';
-import { p as printIonWarning } from './index6.js';
-import { c as createColorClasses, h as hostContext } from './theme.js';
+import { p as printIonWarning } from './index7.js';
+import { c as createColorClasses, h as hostContext } from './theme2.js';
 import { g as getIonMode } from './ionic-global.js';
 
 const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.0625rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.625rem, 65.988px)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";

package/components/circle.js

@@ -59,11 +59,11 @@ const Circle = /*@__PURE__*/ proxyCustomElement(class Circle extends HTMLElement
         return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
     }
     render() {
-        return (h(Host, { key: '4615a36df5463b4f9e9f9f7220ae5937507b21f0', class: "cty-circle" }, h("svg", { key: 'f5ba1507ff597461d60255efc244ff29ddd5ebb4', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '86b909985b37195fe2cd68b57e97958ae89d100e' }, h("linearGradient", { key: '3f39de431f271a55b73f79be5cce5fb0cb2d8113', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%" }, this.colors.map(() => (h("stop", null))))), h("path", { key: 'ffa514538439ec99972e8b5c39a5792e5926f987', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: { 'stroke-width': this.width + 'px' } }), h("path", { key: 'c1b5dd07c9b2c94f95c984b0cdd359d0b2799539', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+        return (h(Host, { key: 'b4b628b9e6f6a754feb5f9cf05c050964b062196', class: "cty-circle" }, h("svg", { key: '839766ffd2f6990573e2d33a4e2de2da2df05f66', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '2d1952dddfd77dc54e458c16c42efd892b851625' }, h("linearGradient", { key: 'db042f67a28d6bc9cbbd8564a6370af1205d287e', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%" }, this.colors.map(() => (h("stop", null))))), h("path", { key: '1b0aacbd3c47558781618e0fbfee3b5ccecaac6f', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: { 'stroke-width': this.width + 'px' } }), h("path", { key: '50376596b6c43d6f1ce58da045c7d6d5a9edf646', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
                 'stroke': this.rate <= 0 && this.zeroTransparent ? 'transparent' : this.needDefs ? 'url(#' + this.gradientId + ')' : this.color,
                 'stroke-width': +this.width + 1 + 'px',
                 'strokeDasharray': (this.rate / 100 * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } })), this.text !== '' && h("div", { key: 'fb130dcdcafb4e61cb7e988613d43e0bcfc23dbc', class: "cty-circle__text" }, this.text), h("slot", { key: 'cf12711e75c472c21b7242559132497bdf78132f' })));
+            } })), this.text !== '' && h("div", { key: 'd79d8165e7157e7d27969fba9848421b9b6f7abf', class: "cty-circle__text" }, this.text), h("slot", { key: 'b8386ac80180cd40f0ec0f8046c8cbfa6681c0fd' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/crop-image.js

@@ -209,7 +209,7 @@ const CropImage = /*@__PURE__*/ proxyCustomElement(class CropImage extends HTMLE
         return (h("div", { class: "cty-crop-image__buttons flex-center-between safe-area-bottom-border-color" }, this.cancelText && cancelCmp, this.confirmText && confirmCmp));
     }
     render() {
-        return (h(Host, { key: '188bc6a88e6b45cbd7b96fc4969ac0f4bcfc6d32', class: "cty-crop-image", onMouseDown: (e) => this.doTouchStart(e), onTouchStart: (e) => this.doTouchStart(e), onTouchMove: (e) => this.doTouchMove(e), onTouchEnd: () => this.doTouchEnd() }, h("slot", { key: '1fd8366eceecef4740ac06a86118dbd318df4efe', name: "header" }), h("div", { key: '5f6315fa7b4684dff0b3d5273bf836a79274c780', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: 'eac5e99cf3ed23aa5dda6ad784463e5f3dc51902', src: this.url, class: "cty-crop-image__image" })), h("div", { key: '042df69d9a69af60af0fdbe47a19ab25866ea0fe', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: '6bf8feeadf7f9679c5b1a8405514b13b6fda4590', name: "clip" }), this.renderButtons(), h("slot", { key: 'c7615d81bcf106c0ef2f38fde394874a0b802cda', name: "footer" })));
+        return (h(Host, { key: '8e25163b347d4b6e2da03d539b1ef9a4da6296c9', class: "cty-crop-image", onMouseDown: (e) => this.doTouchStart(e), onTouchStart: (e) => this.doTouchStart(e), onTouchMove: (e) => this.doTouchMove(e), onTouchEnd: () => this.doTouchEnd() }, h("slot", { key: '585c4814a98755bea7cdf4d67567869152ddebf1', name: "header" }), h("div", { key: '117bafcb8a542f040f230e5f2f598241a6606feb', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '59385fd29231c7e947fb95dc436206b1e637c854', src: this.url, class: "cty-crop-image__image" })), h("div", { key: 'a97f89e4e224cfd8f63cc7467fbe4d54506350ce', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: '28631d662e210da629b38eb3cafdde1606bded2c', name: "clip" }), this.renderButtons(), h("slot", { key: '41cf5003b6a762c9baf6e0bd5f1c84e4638d47cc', name: "footer" })));
     }
     get el() { return this; }
     static get style() { return CtyCropImageStyle0; }

package/components/cty-agree.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkbox, a as checkmarkCircle, s as squareOutline, r as radioButtonOff } from './index4.js';
+import { c as checkbox, a as checkmarkCircle, s as squareOutline, r as radioButtonOff } from './index5.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 

package/components/cty-audio.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
 import { n as network } from './network.js';
-import { a as checkmarkCircle, b as radioButtonOffOutline } from './index4.js';
+import { a as checkmarkCircle, b as radioButtonOffOutline } from './index5.js';
 import { d as defineCustomElement$8 } from './action-sheet.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './overlay.js';
+import { d as defineCustomElement$7 } from './backdrop.js';
+import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './icon2.js';
 import { d as defineCustomElement$4 } from './range.js';
 import { d as defineCustomElement$3 } from './ripple-effect.js';
@@ -290,7 +290,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-audio", "cty-action-sheet", "cty-icon", "cty-overlay", "ion-icon", "ion-range", "ion-ripple-effect", "ion-toast"];
+    const components = ["cty-audio", "cty-action-sheet", "cty-backdrop", "cty-icon", "ion-icon", "ion-range", "ion-ripple-effect", "ion-toast"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-audio":
             if (!customElements.get(tagName)) {
@@ -302,12 +302,12 @@ function defineCustomElement$1() {
                 defineCustomElement$8();
             }
             break;
-        case "cty-icon":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "cty-overlay":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/components/cty-backdrop.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface CtyBackdrop extends Components.CtyBackdrop, HTMLElement {}
+export const CtyBackdrop: {
+    prototype: CtyBackdrop;
+    new (): CtyBackdrop;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/cty-backdrop.js

@@ -0,0 +1,6 @@
+import { B as Backdrop, d as defineCustomElement$1 } from './backdrop.js';
+
+const CtyBackdrop = Backdrop;
+const defineCustomElement = defineCustomElement$1;
+
+export { CtyBackdrop, defineCustomElement };

package/components/cty-camera-photo.js

@@ -3,12 +3,13 @@ import { d as deviceInfo, f as formatLocalPreview } from './device-info.js';
 import { s as sanitizeDOMString } from './index2.js';
 import { d as deviceInfo$1 } from './device-info2.js';
 import { c as checkAppPermission } from './utils.js';
-import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, b as present, d as dismiss, e as eventMethod } from './overlays.js';
-import { c as createLockController, g as getClassMap, d as defineCustomElement$4, e as enterAnimation, l as leaveAnimation } from './overlay.js';
+import { c as createDelegateController, a as createTriggerController, p as prepareOverlay, r as removeBodyScrollClass, b as present, d as dismiss, e as eventMethod } from './overlays.js';
+import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers3.js';
 import { d as defineCustomElement$7 } from './action-sheet.js';
-import { d as defineCustomElement$6 } from './crop-image.js';
-import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$6 } from './backdrop.js';
+import { d as defineCustomElement$5 } from './crop-image.js';
+import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './permission-purpose.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 
@@ -300,7 +301,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
-        //this.presented && this.dismiss();//忘了为什么加这个，disconnectedCallback不止触发一次
+        this.presented && removeBodyScrollClass();
     }
     componentDidLoad() {
         !this.hasController && raf(() => this.present());
@@ -407,7 +408,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.ctyTap.emit({ index, imageList });
     }
     render() {
-        return (h(Host, { key: '8c7f1d5a4b16fd591de7ff1f82830e4ad6381230', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: 'badb995c2e5198b1a64c75f3e8a33fc94d52bd12', animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-overlay", { key: '36b4365c3b082fb4628edf7273e2fdd56ad7af47', animated: false, backdropDismiss: false }, h("cty-crop-image", { key: '4d5d442966f50e937c37c754504ad43b0593f0b8', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '263297537bcaf5636696183d4a5755d13bc7b4bd', description: this.permissionDescription })));
+        return (h(Host, { key: '4994ab89e969ab4f135e61d465ce4fcd34739b0b', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: 'deef5fb5f31944b226bcb22e0df2bafb685bedbd', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: 'e264d6caf8b866f83f5d1b9bc46bf8ede10f3420', backdropDismiss: false }, h("cty-crop-image", { key: '3d3068238520a825596c106be9bcea7c88d8ea4c', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '924373b5916aa0abd717e5c35e041f82b6b73bb0', description: this.permissionDescription })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -457,7 +458,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-camera-photo", "cty-action-sheet", "cty-crop-image", "cty-icon", "cty-overlay", "cty-permission-purpose", "ion-icon"];
+    const components = ["cty-camera-photo", "cty-action-sheet", "cty-backdrop", "cty-crop-image", "cty-icon", "cty-permission-purpose", "ion-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-camera-photo":
             if (!customElements.get(tagName)) {
@@ -469,17 +470,17 @@ function defineCustomElement$1() {
                 defineCustomElement$7();
             }
             break;
-        case "cty-crop-image":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "cty-icon":
+        case "cty-crop-image":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "cty-overlay":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }