@ionic/core 8.6.0 → 8.6.1-dev.11749483665.140e610d

package/components/ion-toggle.js

@@ -4,16 +4,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, e as renderHiddenInput } from './helpers.js';
 import { d as hapticSelection } from './haptic.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global.js';
+import { a as isPlatform, b as getIonTheme } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { w as checkmarkOutline, x as removeOutline, y as ellipseOutline } from './index6.js';
 import { c as config } from './index4.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px;-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}";
+const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjkuNjYsNzcuNjZsLTEyOCwxMjhhOCw4LDAsMCwxLTExLjMyLDBsLTU2LTU2YTgsOCwwLDAsMSwxMS4zMi0xMS4zMkw5NiwxODguNjksMjE4LjM0LDY2LjM0YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiLz48L3N2Zz4=';
 
-const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.toggle-disabled){opacity:0.38}";
+const minusSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjQsMTI4YTgsOCwwLDAsMS04LDhINDBhOCw4LDAsMCwxLDAtMTZIMjE2QTgsOCwwLDAsMSwyMjQsMTI4WiIvPjwvc3ZnPg==';
+
+const toggleIonicCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:var(--ion-primitives-neutral-800, #626262);--track-background-checked:var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));--border-radius:var(--ion-border-radius-full, 999px);--focus-ring-color:var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--ion-border-size-050, var(--ion-scale-050, 2px));--handle-background:var(--ion-primitives-base-white, #ffffff);--handle-background-checked:var(--ion-primitives-base-white, #ffffff);--handle-border-radius:var(--ion-border-radius-full, 999px);--handle-height:var(--ion-scale-500, 20px);--handle-max-height:var(--ion-scale-500, 20px);--handle-width:var(--ion-scale-500, 20px);--handle-spacing:var(--ion-space-050, var(--ion-scale-050, 2px));--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,\n    right 110ms ease-in-out 80ms;font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none;width:100%;z-index:2}.toggle-wrapper{-ms-flex-align:center;align-items:center;min-height:var(--ion-scale-1200, 48px)}.native-wrapper .toggle-icon{width:var(--ion-scale-1100, 44px);height:var(--ion-scale-600, 24px);overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}.toggle-bottom{font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none}.toggle-bottom .error-text{color:var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222))}.toggle-bottom .helper-text{color:var(--ion-primitives-neutral-800, #626262)}:host(.ion-focused) .toggle-icon{outline:var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}:host(.ion-activated) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-press, rgba(36, 36, 36, 0.08));content:\"\"}:host(.toggle-disabled) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--ion-primitives-neutral-1200, #242424)}.toggle-inner .toggle-switch-icon{width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-end:var(--ion-space-400, var(--ion-scale-400, 16px));color:var(--ion-primitives-neutral-1200, #242424)}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-start:var(--ion-space-400, var(--ion-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0}";
+
+const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.toggle-bottom{padding-top:4px;font-size:0.75rem}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px}.toggle-switch-icon-checked-default{-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}";
+
+const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.toggle-bottom{padding-top:4px;font-size:0.75rem}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.toggle-disabled){opacity:0.38}";
 
 const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
     constructor() {
@@ -122,11 +128,8 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (mode, checked) => {
-            if (mode === 'md') {
-                return checked ? checkmarkOutline : removeOutline;
-            }
-            return checked ? removeOutline : ellipseOutline;
+        this.getSwitchLabelIcon = (checked) => {
+            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
         };
     }
     disabledChanged() {
@@ -193,18 +196,68 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
             this.focusEl.focus();
         }
     }
-    renderOnOffSwitchLabels(mode, checked) {
-        const icon = this.getSwitchLabelIcon(mode, checked);
+    get toggleDefaultCheckedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: removeOutline,
+            ionic: checkSvg,
+            md: checkmarkOutline,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the default icon
+        return defaultIcon;
+    }
+    /**
+     * Get the icon to use for the checked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleCheckedIcon() {
+        return config.get('toggleCheckedIcon', this.toggleDefaultCheckedIcon);
+    }
+    /**
+     * Get the icon to use for the unchecked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleUncheckedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: ellipseOutline,
+            ionic: minusSvg,
+            md: removeOutline,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured toggle unchecked icon or the default icon
+        return config.get('toggleUncheckedIcon', defaultIcon);
+    }
+    renderOnOffSwitchLabels(checked) {
+        const icon = this.getSwitchLabelIcon(checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
+                /**
+                 * The default checked icon is being modified with
+                 * styling that causes it to rotate by 90 degrees
+                 * when the theme is `ios`.
+                 *
+                 * To prevent any rotation on a custom icon that is
+                 * set through the config, we need to apply a class
+                 * that handles the styling only when the default
+                 * checked icon is being used.
+                 */
+                'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
+            theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && (theme === 'md' || theme === 'ionic') && this.renderOnOffSwitchLabels(checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -237,12 +290,13 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
     }
     render() {
         const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
+        const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '21037ea2e8326f58c84becadde475f007f931924', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '956aeee2151b8cc8239edeaa935475e3019a7b5f', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -251,16 +305,19 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '4d153679d118d01286f6633d1c19558a97745ff6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '0dfcd4df15b8d41bec5ff5f8912503afbb7bec53', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'ffed3a07ba2ab70e5b232e6041bc3b6b34be8331', class: {
+                'ion-activatable': isIonicTheme,
+                'ion-focusable': isIonicTheme,
+            }) }, h("label", { key: '4aa309eac4fe94639f96d08ae9d09a65fedb271f', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4057524d70ca25e0df76d726d85656f16df655ca', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '3b0a476f62f1e183d4b4cbc823c749140ba27d4d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd88e1e3dcdd8293f6b61f237cd7a0511dcbce300' }), this.renderHintText()), h("div", { key: '0e924225f5f0caf3c88738acb6c557bd8c1b68f6', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '75a6ccef569eabf17b3d3fba165d8110960832af' }), this.renderHintText()), h("div", { key: 'e2bc757d81ecc56ac40450586d1bc9f87e0ea726', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
         "disabled": ["disabledChanged"]
     }; }
     static get style() { return {
+        ionic: toggleIonicCss,
         ios: toggleIosCss,
         md: toggleMdCss
     }; }

package/components/ionic-global.js

@@ -1,8 +1,128 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { setMode, getMode } from '@stencil/core/internal/client';
-import { c as config, b as configFromSession, d as configFromURL, s as saveConfig, p as printIonWarning } from './index4.js';
+import { setMode, Build, getMode, getElement } from '@stencil/core/internal/client';
+import { c as config, a as printIonError, b as configFromSession, d as configFromURL, s as saveConfig, p as printIonWarning } from './index4.js';
+
+const win = typeof window !== 'undefined' ? window : undefined;
+const doc = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
+/**
+ * When hardwareBackButton: false in config,
+ * we need to make sure we also block the default
+ * webview behavior. If we don't then it will be
+ * possible for users to navigate backward while
+ * an overlay is still open. Additionally, it will
+ * give the appearance that the hardwareBackButton
+ * config is not working as the page transition
+ * will still happen.
+ */
+const blockHardwareBackButton = () => {
+    document.addEventListener('backbutton', () => { }); // eslint-disable-line
+};
+const startHardwareBackButton = () => {
+    const doc = document;
+    let busy = false;
+    const backButtonCallback = () => {
+        if (busy) {
+            return;
+        }
+        let index = 0;
+        let handlers = [];
+        const ev = new CustomEvent('ionBackButton', {
+            bubbles: false,
+            detail: {
+                register(priority, handler) {
+                    handlers.push({ priority, handler, id: index++ });
+                },
+            },
+        });
+        doc.dispatchEvent(ev);
+        const executeAction = async (handlerRegister) => {
+            try {
+                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
+                    const result = handlerRegister.handler(processHandlers);
+                    if (result != null) {
+                        await result;
+                    }
+                }
+            }
+            catch (e) {
+                printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+            }
+        };
+        const processHandlers = () => {
+            if (handlers.length > 0) {
+                let selectedHandler = {
+                    priority: Number.MIN_SAFE_INTEGER,
+                    handler: () => undefined,
+                    id: -1,
+                };
+                handlers.forEach((handler) => {
+                    if (handler.priority >= selectedHandler.priority) {
+                        selectedHandler = handler;
+                    }
+                });
+                busy = true;
+                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
+                executeAction(selectedHandler).then(() => (busy = false));
+            }
+        };
+        processHandlers();
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shouldUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new win.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
+};
+const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
+
+var hardwareBackButton = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MENU_BACK_BUTTON_PRIORITY: MENU_BACK_BUTTON_PRIORITY,
+    OVERLAY_BACK_BUTTON_PRIORITY: OVERLAY_BACK_BUTTON_PRIORITY,
+    blockHardwareBackButton: blockHardwareBackButton,
+    shouldUseCloseWatcher: shouldUseCloseWatcher,
+    startHardwareBackButton: startHardwareBackButton
+});
 
 const getPlatforms = (win) => setupPlatforms(win);
 const isPlatform = (winOrPlatform, platform) => {
@@ -93,10 +213,143 @@ const PLATFORMS_MAP = {
     hybrid: isHybrid,
 };
 
-// TODO(FW-2832): types
 let defaultMode;
-const getIonMode = (ref) => {
-    return (ref && getMode(ref)) || defaultMode;
+let defaultTheme = 'md';
+/**
+ * Prints a warning message to the developer to inform them of
+ * an invalid configuration of mode and theme.
+ * @param mode The invalid mode configuration.
+ * @param theme The invalid theme configuration.
+ */
+const printInvalidModeWarning = (mode, theme, ref) => {
+    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
+};
+/**
+ * Validates if a mode is accepted for a theme configuration.
+ * @param mode The mode to validate.
+ * @param theme The theme the mode is being used with.
+ * @returns `true` if the mode is valid for the theme, `false` if invalid.
+ */
+const isModeValidForTheme = (mode, theme) => {
+    if (mode === 'md') {
+        return theme === 'md' || theme === 'ionic';
+    }
+    else if (mode === 'ios') {
+        return theme === 'ios' || theme === 'ionic';
+    }
+    return false;
+};
+/**
+ * Returns the default mode for a specified theme.
+ * @param theme The theme to return a default mode for.
+ * @returns The default mode, either `ios` or `md`.
+ */
+const getDefaultModeForTheme = (theme) => {
+    if (theme === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+/**
+ * Returns the default theme for a specified mode.
+ * @param mode The mode to return a default theme for.
+ * @returns The default theme.
+ */
+const getDefaultThemeForMode = (mode) => {
+    if (mode === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
+const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
+const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+/**
+ * Returns the mode value of the element reference or the closest
+ * parent with a valid mode.
+ * @param ref The element reference to look up the mode for.
+ * @param theme Optionally can provide the theme to avoid an additional look-up.
+ * @returns The mode value for the element reference.
+ */
+const getIonMode = (ref, theme = getIonTheme(ref)) => {
+    var _a;
+    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : ref.mode, theme)) {
+        /**
+         * If the reference already has a mode configuration,
+         * use it instead of performing a look-up.
+         */
+        return ref.mode;
+    }
+    else {
+        const el = getElement(ref);
+        const mode = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
+        if (isModeValidForTheme(mode, theme)) {
+            /**
+             * The mode configuration is supported for the configured theme.
+             */
+            return mode;
+        }
+        else {
+            printInvalidModeWarning(mode, theme, ref);
+        }
+    }
+    return getDefaultModeForTheme(theme);
+};
+/**
+ * Returns the theme value of the element reference or the closest
+ * parent with a valid theme.
+ *
+ * @param ref The element reference to look up the theme for.
+ * @returns The theme value for the element reference, defaults to
+ * the default theme if it cannot be determined.
+ */
+const getIonTheme = (ref) => {
+    var _a, _b;
+    const theme = ref && getMode(ref);
+    if (theme) {
+        return theme;
+    }
+    /**
+     * If the theme cannot be detected, then fallback to using
+     * the `mode` attribute to determine the style sheets to use.
+     */
+    const el = getElement(ref);
+    const mode = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.getAttribute('mode');
+    if (mode) {
+        return getDefaultThemeForMode(mode);
+    }
+    /**
+     * If a mode is not detected, then fallback to using the
+     * default theme.
+     */
+    return defaultTheme;
+};
+const rIC = (callback) => {
+    if ('requestIdleCallback' in window) {
+        window.requestIdleCallback(callback);
+    }
+    else {
+        setTimeout(callback, 32);
+    }
+};
+const needInputShims = () => {
+    /**
+     * iOS always needs input shims
+     */
+    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+    if (needsShimsIOS) {
+        return true;
+    }
+    /**
+     * Android only needs input shims when running
+     * in the browser and only if the browser is using the
+     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+     */
+    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+    if (isAndroidMobileWeb) {
+        return true;
+    }
+    return false;
 };
 const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -114,34 +367,115 @@ const initialize = (userConfig = {}) => {
     }
     // Setup platforms
     setupPlatforms(win);
-    // first see if the mode was set as an attribute on <html>
-    // which could have been set by the user, or by pre-rendering
-    // otherwise get the mode via config settings, and fallback to md
     Ionic.config = config;
+    /**
+     * Check if the mode was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the mode via config settings, and fallback to md.
+     */
     Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
+    /**
+     * Check if the theme was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the theme via config settings, and fallback to md.
+     */
+    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
+    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
+        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
+        defaultMode = getDefaultModeForTheme(defaultTheme);
+    }
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
+    config.set('theme', defaultTheme);
+    doc.documentElement.setAttribute('theme', defaultTheme);
+    doc.documentElement.classList.add(defaultTheme);
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
-    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
-    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
+        /**
+         * Iterate over all the element nodes, to both validate and
+         * set the "mode" that is used for determining the styles to
+         * apply to the element.
+         *
+         * setMode refers to Stencil's internal metadata for "mode",
+         * which is used to set the correct styleUrl for the component.
+         *
+         * If the "theme" attribute or property is set, then use it
+         * to determine the style sheets to use.
+         *
+         * If the "mode" attribute or property is set, then use it
+         * to determine the style sheets to use. This is fallback
+         * behavior for applications that are not setting the "theme".
+         */
         while (elm) {
-            const elmMode = elm.mode || elm.getAttribute('mode');
+            const theme = elm.getAttribute('theme');
+            if (theme) {
+                if (isThemeSupported(theme)) {
+                    return theme;
+                }
+                else if (isIonicElement(elm)) {
+                    printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
+                }
+            }
+            /**
+             * If a theme is not detected, then fallback to using the
+             * `mode` attribute to determine the style sheets to use.
+             */
+            const elmMode = elm.getAttribute('mode');
             if (elmMode) {
-                if (isAllowedIonicModeValue(elmMode)) {
+                if (isModeSupported(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultMode;
+        return defaultTheme;
     });
+    // `IonApp` code
+    // ----------------------------------------------
+    if (Build.isBrowser) {
+        rIC(async () => {
+            const isHybrid = isPlatform(window, 'hybrid');
+            if (!config.getBoolean('_testing')) {
+                import('./index8.js').then((module) => module.startTapClick(config));
+            }
+            if (config.getBoolean('statusTap', isHybrid)) {
+                import('./status-tap.js').then((module) => module.startStatusTap());
+            }
+            if (config.getBoolean('inputShims', needInputShims())) {
+                /**
+                 * needInputShims() ensures that only iOS and Android
+                 * platforms proceed into this block.
+                 */
+                const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+                import('./input-shims.js').then((module) => module.startInputShims(config, platform));
+            }
+            const hardwareBackButtonModule = await Promise.resolve().then(function () { return hardwareBackButton; });
+            const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
+            if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+                hardwareBackButtonModule.startHardwareBackButton();
+            }
+            else {
+                /**
+                 * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                 * then the close watcher will not be used.
+                 */
+                if (shouldUseCloseWatcher()) {
+                    printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                }
+                hardwareBackButtonModule.blockHardwareBackButton();
+            }
+            if (typeof window !== 'undefined') {
+                import('./keyboard.js').then((module) => module.startKeyboardAssist(window));
+            }
+            import('./focus-visible.js').then((module) => module.getOrInitFocusVisibleUtility());
+        });
+    }
 };
 
-export { isPlatform as a, getIonMode as b, getPlatforms as g, initialize as i };
+export { MENU_BACK_BUTTON_PRIORITY as M, OVERLAY_BACK_BUTTON_PRIORITY as O, isPlatform as a, getIonTheme as b, getIonMode as c, doc as d, getPlatforms as g, initialize as i, shouldUseCloseWatcher as s, win as w };

package/components/ios.transition.js

@@ -192,6 +192,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
     clonedBackButtonEl.text = backButtonEl.text;
     clonedBackButtonEl.mode = backButtonEl.mode;
+    clonedBackButtonEl.theme = backButtonEl.theme;
     clonedBackButtonEl.icon = backButtonEl.icon;
     clonedBackButtonEl.color = backButtonEl.color;
     clonedBackButtonEl.disabled = backButtonEl.disabled;