@ionic/core 8.5.5-dev.11744728652.115947e1 → 8.5.5-dev.11744821352.11e7a84f

package/dist/collection/index.js

@@ -10,7 +10,6 @@ export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
 export { createGesture } from './utils/gesture';
 export { initialize } from './global/ionic-global';
 export { componentOnReady } from './utils/helpers';
-export { LogLevel } from './utils/logging';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';

package/dist/collection/utils/animation/animation.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonError } from "../logging/index";
 import { win } from "../browser";
 import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
@@ -346,7 +345,7 @@ export const createAnimation = (animationId) => {
                 }
             }
             else {
-                printIonError('createAnimation - Invalid addElement value.');
+                console.error('Invalid addElement value');
             }
         }
         return ani;

package/dist/collection/utils/focus-visible.js

@@ -17,6 +17,28 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
+let focusVisibleUtility = null;
+export const getOrInitFocusVisibleUtility = () => {
+    if (!focusVisibleUtility) {
+        focusVisibleUtility = startFocusVisible();
+    }
+    return focusVisibleUtility;
+};
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+export const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;

package/dist/collection/utils/framework-delegate.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { config } from "../global/config";
 import { componentOnReady } from "./helpers";
 // TODO(FW-2832): types
 export const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
@@ -101,7 +102,8 @@ export const CoreDelegate = () => {
          * Get the root of the app and
          * add the overlay there.
          */
-        const app = document.querySelector('ion-app') || document.body;
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = document.querySelector(appRootSelector) || document.body;
         /**
          * Create a placeholder comment so that
          * we can return this component to where

package/dist/collection/utils/hardware-back-button.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "./browser/index";
-import { printIonError } from "./logging/index";
 import { config } from "../global/config";
 /**
  * CloseWatcher is a newer API that lets
@@ -58,7 +57,7 @@ export const startHardwareBackButton = () => {
                 }
             }
             catch (e) {
-                printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+                console.error(e);
             }
         };
         const processHandlers = () => {

package/dist/collection/utils/helpers.js

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonError } from "./logging/index";
+import { focusElements } from "./focus-visible";
+import { config } from "../global/config";
 export const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
         transitionEnd(el, expectedDuration, resolve);
@@ -203,6 +204,17 @@ export const raf = (h) => {
 export const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
+/**
+ * Focuses a given element while ensuring proper focus management
+ * within the Ionic framework. If the element is marked as `ion-focusable`,
+ * this function will delegate focus handling to `ion-app` or manually
+ * apply focus when a custom app root is used.
+ *
+ * This function helps maintain accessibility and expected focus behavior
+ * in both standard and custom root environments.
+ *
+ * @param el - The element to focus.
+ */
 export const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -214,9 +226,36 @@ export const focusVisibleElement = (el) => {
      * which will let us explicitly set the elements to focus.
      */
     if (el.classList.contains('ion-focusable')) {
-        const app = el.closest('ion-app');
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = el.closest(appRootSelector);
         if (app) {
-            app.setFocus([el]);
+            if (appRootSelector === 'ion-app') {
+                /**
+                 * If the app root is the default, then it will be
+                 * in charge of setting focus. This is because the
+                 * focus-visible utility is attached to the app root
+                 * and will handle setting focus on the correct element.
+                 */
+                app.setFocus([el]);
+            }
+            else {
+                /**
+                 * When using a custom app root selector, the focus-visible
+                 * utility is not available to manage focus automatically.
+                 * If we set focus immediately, the element may not be fully
+                 * rendered or interactive, especially if it was just added
+                 * to the DOM. Using requestAnimationFrame ensures that focus
+                 * is applied on the next frame, allowing the DOM to settle
+                 * before changing focus.
+                 */
+                requestAnimationFrame(() => {
+                    /**
+                     * The focus-visible utility is used to set focus on an
+                     * element that uses `ion-focusable`.
+                     */
+                    focusElements([el]);
+                });
+            }
         }
     }
 };
@@ -252,7 +291,7 @@ export const clamp = (min, n, max) => {
 export const assert = (actual, reason) => {
     if (!actual) {
         const message = 'ASSERT: ' + reason;
-        printIonError(message);
+        console.error(message);
         debugger; // eslint-disable-line
         throw new Error(message);
     }

package/dist/collection/utils/keyboard/keyboard-controller.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc, win } from "../browser/index";
+import { config } from "../../global/config";
 import { Keyboard, KeyboardResize } from "../native/keyboard";
 /**
  * The element that resizes when the keyboard opens
@@ -25,7 +26,8 @@ const getResizeContainer = (resizeMode) => {
      * on that. In the event `ion-app` is not available then
      * we can fall back to `body`.
      */
-    const ionApp = doc.querySelector('ion-app');
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const ionApp = doc.querySelector(appRootSelector);
     return ionApp !== null && ionApp !== void 0 ? ionApp : doc.body;
 };
 /**

package/dist/collection/utils/logging/index.js

@@ -2,12 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { config } from "../../global/config";
-export var LogLevel;
-(function (LogLevel) {
-    LogLevel["OFF"] = "OFF";
-    LogLevel["ERROR"] = "ERROR";
-    LogLevel["WARN"] = "WARN";
-})(LogLevel || (LogLevel = {}));
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -15,8 +9,8 @@ export var LogLevel;
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', LogLevel.WARN);
-    if ([LogLevel.WARN].includes(logLevel)) {
+    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
+    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
         return console.warn(`[Ionic Warning]: ${message}`, ...params);
     }
 };
@@ -28,8 +22,8 @@ export const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 export const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', LogLevel.ERROR);
-    if ([LogLevel.ERROR, LogLevel.WARN].includes(logLevel)) {
+    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
+    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
         return console.error(`[Ionic Error]: ${message}`, ...params);
     }
 };

package/dist/collection/utils/menu-controller/animations/overlay.js

@@ -27,8 +27,8 @@ export const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIos = mode === 'ios';
-    const opacity = isIos ? 0.2 : 0.25;
+    const isIOS = mode === 'ios';
+    const opacity = isIOS ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/push.js

@@ -14,6 +14,7 @@ export const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
+    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -29,5 +30,5 @@ export const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/reveal.js

@@ -11,9 +11,10 @@ import { baseAnimation } from "./base";
  */
 export const menuRevealAnimation = (menu) => {
     const mode = getIonMode(menu);
+    const isIOS = mode === 'ios';
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+    return baseAnimation(isIOS).addAnimation(contentOpen);
 };

package/dist/collection/utils/overlays.js

@@ -4,13 +4,13 @@
 import { doc } from "./browser/index";
 import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from "./focus-trap";
 import { shouldUseCloseWatcher } from "./hardware-back-button";
-import { printIonError, printIonWarning } from "./logging/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
 import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
+import { printIonWarning } from "./logging";
 import { isPlatform } from "./platform";
 let lastOverlayIndex = 0;
 let lastId = 0;
@@ -544,7 +544,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     }
     const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
     /**
-     * For accessibility, toasts lack focus traps and don't receive
+     * For accessibility, toasts lack focus traps and don’t receive
      * `aria-hidden` on the root element when presented.
      *
      * All other overlays use focus traps to keep keyboard focus
@@ -607,14 +607,15 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         }
     }
     catch (err) {
-        printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
+        console.error(err);
     }
     overlay.el.remove();
     revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden
@@ -787,7 +788,7 @@ export const createTriggerController = () => {
         removeClickListener();
         const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
         if (!triggerEl) {
-            printIonWarning(`[${el.tagName.toLowerCase()}] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
+            printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
             return;
         }
         const configureTriggerInteraction = (targetEl, overlayEl) => {

package/dist/collection/utils/sanitization/index.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonError } from "../logging/index";
 /**
  * Does a simple sanitization of all elements
  * in an untrusted string
@@ -76,7 +75,7 @@ export const sanitizeDOMString = (untrustedString) => {
         return getInnerDiv !== null ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
     }
     catch (err) {
-        printIonError('sanitizeDOMString', err);
+        console.error(err);
         return '';
     }
 };

package/dist/collection/utils/test/playwright/generator.js

@@ -8,34 +8,56 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction, palette } = config;
-    if (palette === 'light') {
-        /**
-         * Ionic has many existing tests that existed prior to
-         * the introduction of palette testing. To maintain backwards
-         * compatibility, we will not include the palette in the test
-         * title if the palette is set to light.
-         */
-        return `${title} - ${mode}/${direction}`;
+    const { direction, palette, mode, theme } = config;
+    /**
+     * The iOS theme can only be used with the iOS mode,
+     * and the MD theme can only be used with the MD mode.
+     *
+     * This logic enables the fallback behavior for existing tests,
+     * where we only tested against a mode, which accounted for both
+     * the theme and mode.
+     */
+    if (theme === 'ios' || theme === 'md') {
+        if (palette === 'light') {
+            /**
+             * Ionic has many existing tests that existed prior to
+             * the introduction of theme testing. To maintain backwards
+             * compatibility, we will not include the theme in the test
+             * title if the theme is set to light.
+             */
+            return `${title} - ${mode}/${direction}`;
+        }
+        return `${title} - ${mode}/${direction}/${palette}`;
     }
-    return `${title} - ${mode}/${direction}/${palette}`;
+    return `${title} - ${theme}/${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { mode, direction, palette } = config;
-    if (palette === 'light') {
-        /**
-         * Ionic has many existing tests that existed prior to
-         * the introduction of palette testing. To maintain backwards
-         * compatibility, we will not include the palette in the screenshot
-         * name if the palette is set to light.
-         */
-        return `${fileName}-${mode}-${direction}.png`;
+    const { direction, palette, mode, theme } = config;
+    /**
+     * The iOS theme can only be used with the iOS mode,
+     * and the MD theme can only be used with the MD mode.
+     *
+     * This logic enables the fallback behavior for existing tests,
+     * where we only tested against a mode, which accounted for both
+     * the theme and mode.
+     */
+    if (theme === 'ios' || theme === 'md') {
+        if (palette === 'light') {
+            /**
+             * Ionic has many existing tests that existed prior to
+             * the introduction of theme testing. To maintain backwards
+             * compatibility, we will not include the theme in the screenshot
+             * name if the theme is set to light.
+             */
+            return `${fileName}-${mode}-${direction}.png`;
+        }
+        return `${fileName}-${mode}-${direction}-${palette}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${palette}.png`;
+    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -48,13 +70,16 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      * If certain options are not provided,
      * fall back to the defaults.
      */
-    const processedMode = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
+    const processedModes = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
     const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : DEFAULT_PALETTES;
-    processedMode.forEach((mode) => {
+    processedModes.forEach((mode) => {
+        const [themeOrCombinedMode, modeName] = mode.split('-');
+        const parsedTheme = themeOrCombinedMode;
+        const parsedMode = modeName !== null && modeName !== void 0 ? modeName : themeOrCombinedMode;
         processedDirection.forEach((direction) => {
             processedPalette.forEach((palette) => {
-                configs.push({ mode, direction, palette });
+                configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
             });
         });
     });

package/dist/collection/utils/test/playwright/page/utils/goto.js

@@ -9,7 +9,7 @@
  * to be hydrated before proceeding with the test.
  */
 export const goto = async (page, url, testInfo, originalFn, options) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (options === undefined && testInfo.project.metadata.mode === undefined) {
         throw new Error(`
 A config must be passed to page.goto to use a generator test:
@@ -21,15 +21,18 @@ configs().forEach(({ config, title }) => {
 });`);
     }
     let mode;
+    let theme;
     let direction;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
+        theme = testInfo.project.metadata.theme;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
+        theme = options.theme;
         direction = options.direction;
         palette = options.palette;
     }
@@ -42,13 +45,15 @@ configs().forEach(({ config, title }) => {
      */
     const urlToParams = new URLSearchParams(paramsString);
     const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
-    const formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
-    const formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
-    const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : true;
+    const formattedTheme = (_b = urlToParams.get('ionic:theme')) !== null && _b !== void 0 ? _b : theme;
+    const formattedRtl = (_c = urlToParams.get('rtl')) !== null && _c !== void 0 ? _c : rtlString;
+    const formattedPalette = (_d = urlToParams.get('palette')) !== null && _d !== void 0 ? _d : palette;
+    const ionicTesting = (_e = urlToParams.get('ionic:_testing')) !== null && _e !== void 0 ? _e : true;
     /**
      * Pass through other custom query params
      */
     urlToParams.delete('ionic:mode');
+    urlToParams.delete('ionic:theme');
     urlToParams.delete('rtl');
     urlToParams.delete('palette');
     urlToParams.delete('ionic:_testing');
@@ -59,11 +64,15 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
     testInfo.annotations.push({
         type: 'mode',
         description: formattedMode,
     });
+    testInfo.annotations.push({
+        type: 'theme',
+        description: formattedTheme,
+    });
     testInfo.annotations.push({
         type: 'direction',
         description: formattedRtl === 'true' ? 'rtl' : 'ltr',

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -18,15 +18,18 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
+    let theme;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+        theme = testInfo.project.metadata.theme;
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
+        theme = options.theme;
         palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
@@ -37,7 +40,9 @@ export const setContent = async (page, html, testInfo, options) => {
         <title>Ionic Playwright Test</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-        <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
+        ${theme === 'ionic'
+        ? `<link href="${baseUrl}/css/ionic/bundle.ionic.css" rel="stylesheet" />`
+        : `<link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />`}
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
         ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
@@ -45,7 +50,8 @@ export const setContent = async (page, html, testInfo, options) => {
         <script>
           window.Ionic = {
             config: {
-              mode: '${mode}'
+              mode: '${mode}',
+              theme: '${theme}'
             }
           }
         </script>
@@ -55,10 +61,18 @@ export const setContent = async (page, html, testInfo, options) => {
       </body>
     </html>
   `;
+    testInfo.annotations.push({
+        type: 'mode',
+        description: mode,
+    });
     testInfo.annotations.push({
         type: 'palette',
         description: palette,
     });
+    testInfo.annotations.push({
+        type: 'theme',
+        description: theme,
+    });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {
             if (route.request().url() === `${baseUrl}/`) {

package/dist/collection/utils/transition/ios.transition.js

@@ -191,6 +191,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;