@ionic/core 7.6.7-dev.11706551842.118ce6e0 → 7.6.7-dev.11706565090.179aa5a7

package/dist/collection/components/input/test/a11y/input.e2e.js

@@ -4,52 +4,14 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-input label="Label" placeholder="Placeholder"></ion-input>
-          <ion-input placeholder="Placeholder">
-            <div slot="label">Label"></div>
-          </ion-input>
-          <ion-input label="Label" value="My Text"></ion-input>
-          <ion-input aria-label="Label"></ion-input>
-          <ion-input label="Email" fill="solid" value="hi@ionic.io">
-            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-            <ion-button slot="end" aria-label="button">
-              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-            </ion-button>
-          </ion-input>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('focused state should not have accessibility violations', async ({ page }) => {
-            /**
-             * The primary color against the focus background
-             * when using fill="solid" does not meet AA
-             * contrast guidelines so it excluded from the test.
-             * The contrast here is a significant improvement
-             * over what Ionic has had in the past, so the team
-             * has decided that this tradeoff is acceptable since
-             * the scope of the problem is limited to the focus
-             * state with the primary color when fill="solid".
-             */
-            await page.setContent(`
-        <main>
-          <ion-input class="has-focus" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-input>
-        </main>
-      `, config);
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/input/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
-});
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

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

@@ -700,9 +700,9 @@ ion-ripple-effect {
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --highlight-height: 0px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }

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

@@ -800,9 +800,9 @@ ion-ripple-effect {
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
   --highlight-height: 1px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
@@ -1100,7 +1100,7 @@ ion-ripple-effect {
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.ion-color) {

package/dist/collection/components/item-option/item-option.ios.css

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);
@@ -234,7 +234,7 @@
 }
 
 :host(.ion-activated) {
-  background: var(--ion-color-primary-shade, #004acd);
+  background: var(--ion-color-primary-shade, #3171e0);
 }
 
 :host(.ion-color.ion-activated) {

package/dist/collection/components/item-option/item-option.md.css

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);

package/dist/collection/components/item-sliding/test/a11y/item-sliding.e2e.js

@@ -1,36 +1,8 @@
 /*!
  * (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";
 import { testSlidingItem } from "../test.utils";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('item-sliding: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-item-sliding id="axe">
-            <ion-item>
-              <ion-label>Sliding Item with End Options</ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option class="ion-activated">Activated</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </main>
-      `, config);
-            await page.locator(`#axe`).evaluate(async (el) => {
-                await el.open('end');
-            });
-            await page.waitForChanges();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 /**
  * This behavior does not vary across directions
  */

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

@@ -348,7 +348,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),

package/dist/collection/components/label/test/a11y/label.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'] }).forEach(({ title, screenshot, config }) => {
@@ -65,25 +64,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('label: a11y for ion-color()'), () => {
-        test('should not have accessibility violations when focused', 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>
-            <div class="ion-focused">
-              <ion-label position="stacked">Default Label</ion-label>
-            </div>
-          </main>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('label: text wrapping in item'), () => {
         test('long text should not cause label to expand infinitely', async ({ page }) => {

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

@@ -173,7 +173,7 @@ ion-spinner {
   --background: var(--ion-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-primary, #0054e9);
+  --spinner-color: var(--ion-color-primary, #3880ff);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
   color: var(--ion-color-step-850, #262626);
   font-size: 0.875rem;

package/dist/collection/components/loading/test/a11y/loading.e2e.js

@@ -4,36 +4,20 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.message = 'Loading';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-message-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
         test('should set aria-labelledby with a label', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading aria-label="Loading"></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.spinner = 'bubbles';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-label-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);

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

@@ -295,49 +295,10 @@ ion-backdrop {
   cursor: pointer;
 }
 
-/**
- * The split pane styles for menu are defined
- * in the menu stylesheets instead in the split pane
- * stylesheets with ::slotted to allow for menus
- * to be wrapped in custom components.
- * If we used ::slotted to target the menu
- * then menus wrapped in components would never
- * receive these styles because they are not
- * children of the split pane.
- */
-/**
- * Do not pass CSS Variables down on larger
- * screens as we want them to affect the outer
- * `ion-menu` rather than the inner content
- */
 :host(.menu-pane-visible) {
-  flex: 0 1 auto;
-  width: var(--side-width, var(--width));
-  min-width: var(--side-min-width, var(--min-width));
-  max-width: var(--side-max-width, var(--max-width));
-}
-
-:host(.menu-pane-visible.split-pane-side) {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: relative;
-  box-shadow: none;
-  z-index: 0;
-}
-
-:host(.menu-pane-visible.split-pane-side.menu-enabled) {
-  display: flex;
-  flex-shrink: 0;
-}
-
-:host(.menu-pane-visible.split-pane-side) {
-  order: -1;
-}
-
-:host(.menu-pane-visible.split-pane-side[side=end]) {
-  order: 1;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
 }
 
 :host(.menu-pane-visible) .menu-inner {
@@ -353,28 +314,6 @@ ion-backdrop {
   display: hidden !important;
 }
 
-:host(.menu-pane-visible.split-pane-side) {
-  -webkit-border-start: 0;
-  border-inline-start: 0;
-  -webkit-border-end: var(--border);
-  border-inline-end: var(--border);
-  border-top: 0;
-  border-bottom: 0;
-  min-width: var(--side-min-width);
-  max-width: var(--side-max-width);
-}
-
-:host(.menu-pane-visible.split-pane-side[side=end]) {
-  -webkit-border-start: var(--border);
-  border-inline-start: var(--border);
-  -webkit-border-end: 0;
-  border-inline-end: 0;
-  border-top: 0;
-  border-bottom: 0;
-  min-width: var(--side-min-width);
-  max-width: var(--side-max-width);
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/menu/menu.js

@@ -7,7 +7,6 @@ import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
-import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
@@ -139,19 +138,6 @@ export class Menu {
     }
     async componentDidLoad() {
         this.didLoad = true;
-        /**
-         * A menu inside of a split pane is assumed
-         * to be a side pane.
-         *
-         * When the menu is loaded it needs to
-         * see if it should be considered visible inside
-         * of the split pane. If the split pane is
-         * hidden then the menu should be too.
-         */
-        const splitPane = this.el.closest('ion-split-pane');
-        if (splitPane !== null) {
-            this.isPaneVisible = await splitPane.isVisible();
-        }
         this.menuChanged();
         this.updateState();
     }
@@ -187,11 +173,20 @@ export class Menu {
         this.contentEl = undefined;
     }
     onSplitPaneChanged(ev) {
+        const { target } = ev;
         const closestSplitPane = this.el.closest('ion-split-pane');
-        if (closestSplitPane !== null && closestSplitPane === ev.target) {
-            this.isPaneVisible = ev.detail.visible;
-            this.updateState();
+        /**
+         * Menu listens on the body for "ionSplitPaneVisible".
+         * However, this means the callback will run any time
+         * a SplitPane changes visibility. As a result, we only want
+         * Menu's visibility state to update if its parent SplitPane
+         * changes visibility.
+         */
+        if (target !== closestSplitPane) {
+            return;
         }
+        this.isPaneVisible = ev.detail.isPane(this.el);
+        this.updateState();
     }
     onBackdropClick(ev) {
         // TODO(FW-2832): type (CustomEvent triggers errors which should be sorted)
@@ -598,7 +593,7 @@ export class Menu {
         }
     }
     render() {
-        const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
+        const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
         const mode = getIonMode(this);
         return (h(Host, { role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
@@ -606,7 +601,6 @@ export class Menu {
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-                'split-pane-side': hostContext('ion-split-pane', el),
             } }, h("div", { class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", null)), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }

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

@@ -295,49 +295,10 @@ ion-backdrop {
   cursor: pointer;
 }
 
-/**
- * The split pane styles for menu are defined
- * in the menu stylesheets instead in the split pane
- * stylesheets with ::slotted to allow for menus
- * to be wrapped in custom components.
- * If we used ::slotted to target the menu
- * then menus wrapped in components would never
- * receive these styles because they are not
- * children of the split pane.
- */
-/**
- * Do not pass CSS Variables down on larger
- * screens as we want them to affect the outer
- * `ion-menu` rather than the inner content
- */
 :host(.menu-pane-visible) {
-  flex: 0 1 auto;
-  width: var(--side-width, var(--width));
-  min-width: var(--side-min-width, var(--min-width));
-  max-width: var(--side-max-width, var(--max-width));
-}
-
-:host(.menu-pane-visible.split-pane-side) {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: relative;
-  box-shadow: none;
-  z-index: 0;
-}
-
-:host(.menu-pane-visible.split-pane-side.menu-enabled) {
-  display: flex;
-  flex-shrink: 0;
-}
-
-:host(.menu-pane-visible.split-pane-side) {
-  order: -1;
-}
-
-:host(.menu-pane-visible.split-pane-side[side=end]) {
-  order: 1;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
 }
 
 :host(.menu-pane-visible) .menu-inner {
@@ -353,28 +314,6 @@ ion-backdrop {
   display: hidden !important;
 }
 
-:host(.menu-pane-visible.split-pane-side) {
-  -webkit-border-start: 0;
-  border-inline-start: 0;
-  -webkit-border-end: var(--border);
-  border-inline-end: var(--border);
-  border-top: 0;
-  border-bottom: 0;
-  min-width: var(--side-min-width);
-  max-width: var(--side-max-width);
-}
-
-:host(.menu-pane-visible.split-pane-side[side=end]) {
-  -webkit-border-start: var(--border);
-  border-inline-start: var(--border);
-  -webkit-border-end: 0;
-  border-inline-end: 0;
-  border-top: 0;
-  border-bottom: 0;
-  min-width: var(--side-min-width);
-  max-width: var(--side-max-width);
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -261,7 +261,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: .1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
   --padding-start: 5px;
   --padding-end: 5px;
   min-height: 32px;

package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js

@@ -4,20 +4,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Only ios mode uses ion-color() for the menu button
- */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('menu-button: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-menu-button auto-hide="false"></ion-menu-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('menu-button: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {

package/dist/collection/components/nav/nav.js

@@ -320,11 +320,8 @@ export class Nav {
     async getPrevious(view) {
         return this.getPreviousSync(view);
     }
-    /**
-     * Returns the number of views in the stack.
-     */
-    async getLength() {
-        return Promise.resolve(this.views.length);
+    getLength() {
+        return this.views.length;
     }
     getActiveSync() {
         return this.views[this.views.length - 1];
@@ -1766,23 +1763,6 @@ export class Nav {
                             "text": "view The view to get."
                         }]
                 }
-            },
-            "getLength": {
-                "complexType": {
-                    "signature": "() => Promise<number>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<number>"
-                },
-                "docs": {
-                    "text": "Returns the number of views in the stack.",
-                    "tags": []
-                }
             }
         };
     }