@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/toggle/toggle.js

@@ -2,7 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
+import { createLegacyFormController } from "../../utils/forms/index";
+import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { hapticSelection } from "../../utils/native/haptic";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -24,6 +26,8 @@ export class Toggle {
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
+        // This flag ensures we log the deprecation warning at most once.
+        this.hasLoggedDeprecationWarning = false;
         this.setupGesture = async () => {
             const { toggleTrack } = this;
             if (toggleTrack) {
@@ -69,10 +73,12 @@ export class Toggle {
         this.value = 'on';
         this.enableOnOffLabels = config.get('toggleOnOffLabels');
         this.labelPlacement = 'start';
+        this.legacy = undefined;
         this.justify = 'space-between';
         this.alignment = 'center';
     }
     disabledChanged() {
+        this.emitStyle();
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
@@ -87,6 +93,7 @@ export class Toggle {
         });
     }
     async connectedCallback() {
+        this.legacyFormController = createLegacyFormController(this.el);
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
@@ -108,7 +115,19 @@ export class Toggle {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.emitStyle();
+        if (!this.legacyFormController.hasLegacyControl()) {
+            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        }
+    }
+    emitStyle() {
+        if (this.legacyFormController.hasLegacyControl()) {
+            this.ionStyle.emit({
+                'interactive-disabled': this.disabled,
+                // TODO(FW-2990): remove this
+                legacy: !!this.legacy,
+            });
+        }
     }
     onStart() {
         this.activated = true;
@@ -152,12 +171,16 @@ export class Toggle {
         return this.el.textContent !== '';
     }
     render() {
+        const { legacyFormController } = this;
+        return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();
+    }
+    renderToggle() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '1ff490557ae9f695646fab73f4e8eb5479c39194', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +190,42 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '9ef2ac21e677ef8e06e6265578e84c65268e2f73', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'c39eb29126454211a99be4fad6e421dcdebdae71', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '379d33ef5714e1d69aa7dd4a6fd2576647e768ad', class: {
+            }) }, h("label", { class: "toggle-wrapper" }, h("input", Object.assign({ type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '7dc7e14558361468d5d842e4235b18e09bdd3805' })), h("div", { key: 'ac1cd965163dff435d76db51c69b2285770a1ea0', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, this.renderToggleControl()))));
+    }
+    renderLegacyToggle() {
+        if (!this.hasLoggedDeprecationWarning) {
+            printIonWarning(`ion-toggle now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
+
+Example: <ion-toggle>Email</ion-toggle>
+Example with aria-label: <ion-toggle aria-label="Email"></ion-toggle>
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
+            if (this.legacy) {
+                printIonWarning(`ion-toggle is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+
+Developers can dismiss this warning by removing their usage of the "legacy" property and using the new toggle syntax.`, this.el);
+            }
+            this.hasLoggedDeprecationWarning = true;
+        }
+        const { activated, color, checked, disabled, el, inputId, name } = this;
+        const mode = getIonMode(this);
+        const { label, labelId, labelText } = getAriaLabel(el, inputId);
+        const value = this.getValue();
+        const rtl = isRTL(el) ? 'rtl' : 'ltr';
+        renderHiddenInput(true, el, name, checked ? value : '', disabled);
+        return (h(Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "switch", class: createColorClasses(color, {
+                [mode]: true,
+                'in-item': hostContext('ion-item', el),
+                'toggle-activated': activated,
+                'toggle-checked': checked,
+                'toggle-disabled': disabled,
+                'legacy-toggle': true,
+                interactive: true,
+                [`toggle-${rtl}`]: true,
+            }) }, this.renderToggleControl(), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", role: "switch", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -319,6 +374,23 @@ export class Toggle {
                 "reflect": false,
                 "defaultValue": "'start'"
             },
+            "legacy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
+                },
+                "attribute": "legacy",
+                "reflect": false
+            },
             "justify": {
                 "type": "string",
                 "mutable": false,
@@ -414,6 +486,30 @@ export class Toggle {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "ionStyle",
+                "name": "ionStyle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the styles change."
+                },
+                "complexType": {
+                    "original": "StyleEventDetail",
+                    "resolved": "StyleEventDetail",
+                    "references": {
+                        "StyleEventDetail": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::StyleEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/toggle/toggle.md.css

@@ -81,7 +81,7 @@
   z-index: 2;
 }
 
-:host(.in-item) {
+:host(.in-item:not(.legacy-toggle)) {
   width: 100%;
   height: 100%;
 }
@@ -92,11 +92,16 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]),
-:host([slot=end]) {
+:host([slot=start]:not(.legacy-toggle)),
+:host([slot=end]:not(.legacy-toggle)) {
   width: auto;
 }
 
+:host(.legacy-toggle) {
+  contain: content;
+  touch-action: none;
+}
+
 :host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
@@ -105,6 +110,51 @@
   pointer-events: none;
 }
 
+:host(.legacy-toggle) label {
+  top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+}
+@supports (inset-inline-start: 0) {
+  :host(.legacy-toggle) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-toggle) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-toggle:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
+}
+:host(.legacy-toggle) label::-moz-focus-inner {
+  border: 0;
+}
+
 input {
   position: absolute;
   top: 0;
@@ -139,7 +189,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item) .label-text-wrapper {
+:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -482,10 +532,10 @@ input {
  */
 :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);
+  --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);
   --border-radius: 14px;
   --handle-background: #ffffff;
-  --handle-background-checked: var(--ion-color-primary, #0054e9);
+  --handle-background-checked: var(--ion-color-primary, #3880ff);
   --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;
@@ -495,6 +545,18 @@ input {
   --handle-transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+:host(.legacy-toggle) {
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  width: 36px;
+  height: 14px;
+  contain: strict;
+}
+
 .native-wrapper .toggle-icon {
   width: 36px;
   height: 14px;
@@ -537,4 +599,27 @@ input {
 
 :host(.toggle-disabled) {
   opacity: 0.38;
+}
+
+:host(.in-item.legacy-toggle) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+:host(.in-item.legacy-toggle[slot=start]) {
+  -webkit-padding-start: 2px;
+  padding-inline-start: 2px;
+  -webkit-padding-end: 18px;
+  padding-inline-end: 18px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }

package/dist/collection/components/toolbar/toolbar.ios.css

@@ -198,9 +198,9 @@
  * }
  */
 :host {
-  --background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
+  --background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
   --padding-top: 3px;
   --padding-bottom: 3px;
   --padding-start: 4px;

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'da75d7f5702b0afe180387f65ce9e7f9c8309ccc', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '9c443426f88e2f9be54267ed47f4383c4dfeec7b', class: "toolbar-background" }), h("div", { key: '7c316762df2b307121d6dc596cb3cde9e38242dd', class: "toolbar-container" }, h("slot", { key: '96d29f9768ef136c5f60f69e669e19c44ef9cc05', name: "start" }), h("slot", { key: '5192bf9c9b4c4e4d2025a0e10708360514d42d2b', name: "secondary" }), h("div", { key: '7ba4288f9a2fb6c4e31b22ff9c385252a2827abf', class: "toolbar-content" }, h("slot", { key: 'ad4ffe0ef333456b1369f57952a367b786d9e148' })), h("slot", { key: '633735d0fb620d828e98b1c1eebfd0985a09db6c', name: "primary" }), h("slot", { key: '91af4b9c44e897ecc974a8cc2725791e1939367f', name: "end" }))));
+            })) }, h("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), h("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, h("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), h("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), h("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, h("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), h("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), h("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.md.css

@@ -200,7 +200,7 @@
 :host {
   --background: var(--ion-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)));
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 0;

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../utils/test/playwright/index";
 configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
@@ -31,20 +30,3 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
         });
     });
 });
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
-    test.describe(title('typography: a11y'), () => {
-        test('should not have accessibility violations for anchor tags', async ({ page }) => {
-            /**
-             * All page content should be contained by landmarks (main, nav, etc.)
-             * By containing the badge in a main element, we can avoid this violation.
-             */
-            await page.setContent(`
-        <main>
-          <a href="#">Link</a>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});

package/dist/collection/utils/gesture/button-active.js

@@ -12,7 +12,7 @@ export const createButtonActiveGesture = (el, isButton) => {
             return;
         }
         const target = document.elementFromPoint(x, y);
-        if (!target || !isButton(target) || target.disabled) {
+        if (!target || !isButton(target)) {
             clearActiveButton();
             return;
         }

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

@@ -189,5 +189,5 @@ class BlockerDelegate {
         this.ctrl = undefined;
     }
 }
-export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/native/status-bar.js

@@ -16,6 +16,17 @@ export const StatusBar = {
         }
         return undefined;
     },
+    // TODO FW-4696 Remove supportDefaultStatusBarStyle in Ionic v8
+    supportsDefaultStatusBarStyle() {
+        const capacitor = getCapacitor();
+        /**
+         * The 'DEFAULT' status bar style was added
+         * to the @capacitor/status-bar plugin in Capacitor 3.
+         * PluginHeaders is only supported in Capacitor 3+,
+         * so we can use this to detect Capacitor 3.
+         */
+        return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.PluginHeaders);
+    },
     setStyle(options) {
         const engine = this.getEngine();
         if (!engine) {

package/dist/collection/utils/overlays.js

@@ -6,7 +6,6 @@ import { shoudUseCloseWatcher } from "./hardware-back-button";
 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, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -30,10 +29,7 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
+export const pickerController = /*@__PURE__*/ createController('ion-picker');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -143,7 +139,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -347,7 +343,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -413,7 +409,6 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
-    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -476,14 +471,12 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     if (!overlay.presented) {
         return false;
     }
-    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (lastOverlay) {
+    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
         setRootAriaHidden(false);
-        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {

package/dist/collection/utils/test/aria.spec.js

@@ -6,8 +6,7 @@ import { Item } from "../../components/item/item";
 import { Label } from "../../components/label/label";
 import { Toggle } from "../../components/toggle/toggle";
 import { getAriaLabel } from "../helpers";
-// TODO FW-5969
-describe.skip('getAriaLabel()', () => {
+describe('getAriaLabel()', () => {
     it('should correctly link component to label', async () => {
         const page = await newSpecPage({
             components: [Item, Label, Toggle],

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

@@ -72,5 +72,4 @@ const DEFAULT_THEMES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,
-    themes: DEFAULT_THEMES,
 };

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

@@ -39,7 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
+        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>