@ionic/core 7.4.2-dev.11695944163.13e7414e → 7.4.2-dev.11696878562.16da82aa

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.2-dev.11695944163.13e7414e",
+  "version": "7.4.2-dev.11696878562.16da82aa",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -53,8 +53,8 @@
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
@@ -66,11 +66,10 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.33.0",
+    "sass": "^1.26.10",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.0.5"
+    "stylelint-order": "^4.1.0"
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",

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

@@ -1,26 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('back-button: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button default-href="/" text="Back"></ion-back-button>
-          </ion-buttons>
-        </ion-toolbar>
-      `, config);
-      const backButton = page.locator('ion-back-button');
-      await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
-    });
-  });
-});

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

@@ -1,22 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('badge: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-badge>123</ion-badge>
-      `, config);
-      const badge = page.locator('ion-badge');
-      await expect(badge).toHaveScreenshot(screenshot(`badge-scale`));
-    });
-  });
-});

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

@@ -1,61 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('button: font scaling'), () => {
-    test('should scale default button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button>Default</ion-button>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
-    });
-    test('should scale clear button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button fill="clear">Clear</ion-button>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
-    });
-    test('should scale small button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="small">Small</ion-button>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
-    });
-    test('should scale large button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="large">Large</ion-button>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
-    });
-  });
-});

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

@@ -1,74 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('buttons: font scaling'), () => {
-    test('should scale default button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>Default</ion-button>
-        </ion-buttons>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`buttons-default-scale`));
-    });
-    test('should scale clear button text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button fill="clear">Clear</ion-button>
-        </ion-buttons>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`buttons-clear-scale`));
-    });
-    test('should scale button with icon on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>
-            <ion-icon slot="start" name="star"></ion-icon>
-            Default
-          </ion-button>
-        </ion-buttons>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-scale`));
-    });
-    test('should scale button with icon only on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      `, config);
-      const button = page.locator('ion-button');
-      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-only-scale`));
-    });
-  });
-});

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

@@ -1,31 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('card: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
-            in the woods. Wash your spirit clean.
-          </ion-card-content>
-        </ion-card>
-      `, config);
-      const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(screenshot(`card-scale`));
-    });
-  });
-});

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

@@ -1,190 +0,0 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-:host {
-  /**
-   * @prop --background: Background of the chip
-   * @prop --color: Color of the chip
-   */
-  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
-  --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);
-  border-radius: 16px;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 4px;
-  margin-inline-end: 4px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  -webkit-padding-start: 12px;
-  padding-inline-start: 12px;
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  min-height: 32px;
-  background: var(--background);
-  color: var(--color);
-  font-family: var(--ion-font-family, inherit);
-  cursor: pointer;
-  overflow: hidden;
-  vertical-align: middle;
-  box-sizing: border-box;
-}
-
-:host(.chip-disabled) {
-  cursor: default;
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-:host(.ion-color) {
-  background: rgba(var(--ion-color-base-rgb), 0.08);
-  color: var(--ion-color-shade);
-}
-
-:host(.ion-color:focus) {
-  background: rgba(var(--ion-color-base-rgb), 0.12);
-}
-
-:host(.ion-color.ion-activated) {
-  background: rgba(var(--ion-color-base-rgb), 0.16);
-}
-
-:host(.chip-outline) {
-  border-width: 1px;
-  border-style: solid;
-}
-
-:host(.chip-outline) {
-  border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);
-  background: transparent;
-}
-
-:host(.chip-outline.ion-color) {
-  border-color: rgba(var(--ion-color-base-rgb), 0.32);
-}
-
-:host(.chip-outline:not(.ion-color):focus) {
-  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04);
-}
-
-:host(.chip-outline.ion-activated:not(.ion-color)) {
-  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
-}
-
-::slotted(ion-icon) {
-  font-size: 1.4285714286em;
-}
-
-:host(:not(.ion-color)) ::slotted(ion-icon) {
-  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-}
-
-::slotted(ion-icon:first-child) {
-  -webkit-margin-start: -4px;
-  margin-inline-start: -4px;
-  -webkit-margin-end: 8px;
-  margin-inline-end: 8px;
-  margin-top: -4px;
-  margin-bottom: -4px;
-}
-
-::slotted(ion-icon:last-child) {
-  -webkit-margin-start: 8px;
-  margin-inline-start: 8px;
-  -webkit-margin-end: -4px;
-  margin-inline-end: -4px;
-  margin-top: -4px;
-  margin-bottom: -4px;
-}
-
-::slotted(ion-avatar) {
-  flex-shrink: 0;
-  width: 1.7142857143em;
-  height: 1.7142857143em;
-}
-
-::slotted(ion-avatar:first-child) {
-  -webkit-margin-start: -8px;
-  margin-inline-start: -8px;
-  -webkit-margin-end: 8px;
-  margin-inline-end: 8px;
-  margin-top: -4px;
-  margin-bottom: -4px;
-}
-
-::slotted(ion-avatar:last-child) {
-  -webkit-margin-start: 8px;
-  margin-inline-start: 8px;
-  -webkit-margin-end: -8px;
-  margin-inline-end: -8px;
-  margin-top: -4px;
-  margin-bottom: -4px;
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-:host(:focus) {
-  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16);
-}
-
-:host(.ion-activated) {
-  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
-}
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16);
-  }
-  :host(.ion-color:hover) {
-    background: rgba(var(--ion-color-base-rgb), 0.12);
-  }
-  :host(.chip-outline:not(.ion-color):hover) {
-    background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04);
-  }
-}
-:host {
-  /**
-   * Main content should be prioritized on iOS,
-   * so we set max font size for chips.
-   * We add a min font size to keep the text legible.
-   */
-  font-size: clamp(13px, 0.875rem, 22px);
-}

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

@@ -1,58 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * Font scaling does not vary across directions.
-   */
-  test.describe(title('chip: font scaling'), () => {
-    test('should scale text', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 30px;
-          }
-        </style>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>`, config);
-      const chip = page.locator('ion-chip');
-      await expect(chip).toHaveScreenshot(screenshot('chip-scale'));
-    });
-  });
-});
-configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * Font scaling does not vary across directions
-   * ios mode has a min font size
-   */
-  test.describe(title('chip: contents at large scale'), () => {
-    test('should handle contents wider than chip', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 48px;
-          }
-        </style>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>`, config);
-      const chip = page.locator('ion-chip');
-      await expect(chip).toHaveScreenshot(screenshot('chip-large-contents'));
-    });
-  });
-});

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

@@ -1,28 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <div id="container" style="width: 450px;">
-          <ion-datetime size="cover" show-default-title="true" show-default-buttons="true" presentation="date-time" value="2022-06-06T16:30"></ion-datetime>
-        </div>
-      `, config);
-      const container = page.locator('#container');
-      await page.waitForSelector('.datetime-ready');
-      await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
-    });
-  });
-});

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

@@ -1,38 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * The tested behavior does not vary across directions/modes
- */
-configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime-button: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 28px;
-          }
-        </style>
-        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-      `, config);
-      const datetimeButton = page.locator('ion-datetime-button');
-      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
-    });
-    test('should wrap text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 48px;
-          }
-        </style>
-        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-      `, config);
-      const datetimeButton = page.locator('ion-datetime-button');
-      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
-    });
-  });
-});

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

@@ -1,44 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('item-divider: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item-divider>
-          <ion-label>Item Divider</ion-label>
-        </ion-item-divider>
-      `, config);
-      const itemDivider = page.locator('ion-item-divider');
-      await expect(itemDivider).toHaveScreenshot(screenshot(`item-divider-scale`));
-    });
-    test('should scale text on larger font sizes when item divider contains headings and paragraphs', async ({ page, }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item-divider>
-          <ion-label>
-            <h1>Heading 1</h1>
-            <h2>Heading 2</h2>
-            <h3>Heading 3</h3>
-            <p>Paragraph</p>
-          </ion-label>
-        </ion-item-divider>
-      `, config);
-      const itemDivider = page.locator('ion-item-divider');
-      await expect(itemDivider).toHaveScreenshot(screenshot(`item-divider-headings-scale`));
-    });
-  });
-});

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

@@ -1,34 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { configs, test } from "../../../../utils/test/playwright/index";
-import { testSlidingItem } from "../test.utils";
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('item-sliding: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item-sliding id="fontScaling">
-          <ion-item>
-            <ion-label>Item Sliding</ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option color="danger">
-              <ion-icon slot="start" name="trash"></ion-icon>
-              Delete
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-      `, config);
-      await testSlidingItem(page, 'fontScaling', 'scale', screenshot);
-    });
-  });
-});