@ionic/core 8.2.1 → 8.2.2-dev.11717796763.1aa87d5c

package/dist/collection/components/avatar/avatar.js

@@ -2,23 +2,111 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class Avatar {
+    constructor() {
+        this.size = undefined;
+        this.shape = undefined;
+    }
+    get hasImage() {
+        return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
+    }
+    get hasIcon() {
+        return !!this.el.querySelector('ion-icon');
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'medium';
+        }
+        return size;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
-        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
+        const theme = getIonTheme(this);
+        const size = this.getSize();
+        const shape = this.getShape();
+        return (h(Host, { key: 'ce0752a14af73eb2731d916be9522db4312bd8f8', class: {
+                [theme]: true,
+                [`avatar-${size}`]: size !== undefined,
+                [`avatar-${shape}`]: shape !== undefined,
+                [`avatar-image`]: this.hasImage,
+                [`avatar-icon`]: this.hasIcon,
+            } }, h("slot", { key: '9cd3c8e0d4ced7896b8496b75208c938735af1b2' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["avatar.ios.scss"],
-            "md": ["avatar.md.scss"]
+            "md": ["avatar.md.scss"],
+            "ionic": ["avatar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["avatar.ios.css"],
-            "md": ["avatar.md.css"]
+            "md": ["avatar.md.css"],
+            "ionic": ["avatar.ionic.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`xsmall` | 'small' | 'medium' | 'large' | 'xlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"xsmall\"` for the smallest size, `\"small\"` for a compact size, `\"medium\"`\nfor the default height and width, `\"large\"` for a larger size, or `\"xlarge\"` for\nthe largest dimensions.\n\nDefaults to `\"medium\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for an avatar with slightly rounded corners,\n`\"round\"` for an avatar with fully rounded corners, or `\"rectangular\"`\nfor an avatar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
+            }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -70,6 +76,12 @@
   overflow: hidden;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/avatar/test/shape/avatar.e2e.js

@@ -0,0 +1,134 @@
+/*!
+ * (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'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+    test.describe(title('avatar: shape'), () => {
+        test.describe('round', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="round">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="round">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="round">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-image`));
+            });
+        });
+        test.describe('rectangular', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="rectangular">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="rectangular">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar shape="rectangular">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-image`));
+            });
+        });
+        test.describe('soft', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
+            <ion-avatar shape="soft" size="small">AB</ion-avatar>
+            <ion-avatar shape="soft">AB</ion-avatar>
+          </div>
+        `, config);
+                const container = page.locator('#container');
+                await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar shape="soft" size="small">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar shape="soft">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+          </div>
+        `, config);
+                const container = page.locator('#container');
+                await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar shape="soft" size="small">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar shape="soft">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+          </div>
+        `, config);
+                const container = page.locator('#container');
+                await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-image`));
+            });
+        });
+    });
+});

package/dist/collection/components/avatar/test/size/avatar.e2e.js

@@ -0,0 +1,147 @@
+/*!
+ * (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'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+    test.describe(title('avatar: size'), () => {
+        test.describe('xsmall', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xsmall">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-image`));
+            });
+        });
+        test.describe('small', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="small">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="small">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="small">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-image`));
+            });
+        });
+        test.describe('medium', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="medium">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="medium">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="medium">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-image`));
+            });
+        });
+        test.describe('large', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="large">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="large">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="large">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-image`));
+            });
+        });
+        test.describe('xlarge', () => {
+            test('should not have visual regressions when containing text', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xlarge">AB</ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-text`));
+            });
+            test('should not have visual regressions when containing an icon', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xlarge">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-icon`));
+            });
+            test('should not have visual regressions when containing an image', async ({ page }) => {
+                await page.setContent(`
+          <ion-avatar size="xlarge">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `, config);
+                const avatar = page.locator('ion-avatar');
+                await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-image`));
+            });
+        });
+    });
+});

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -55,50 +61,50 @@
  */
 :host {
   /**
-    * @prop --background: Background of the button
-    * @prop --background-focused: Background of the button when focused with the tab key
-    * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
-    * @prop --background-hover: Background of the button on hover
-    * @prop --background-hover-opacity: Opacity of the background on hover
-    *
-    * @prop --color: Text color of the button
-    * @prop --color-focused: Text color of the button when focused with the tab key
-    * @prop --color-hover: Text color of the button on hover
-    *
-    * @prop --min-width: Minimum width of the button
-    * @prop --min-height: Minimum height of the button
-    *
-    * @prop --transition: Transition of the button
-    *
-    * @prop --border-radius: Border radius of the button
-    *
-    * @prop --ripple-color: Color of the button ripple effect
-    *
-    * @prop --opacity: Opacity of the button
-    *
-    * @prop --margin-top: Top margin of the button
-    * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
-    * @prop --margin-bottom: Bottom margin of the button
-    * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
-    *
-    * @prop --padding-top: Top padding of the button
-    * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
-    * @prop --padding-bottom: Bottom padding of the button
-    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
-    *
-    * @prop --icon-margin-top: Top margin of the button icon
-    * @prop --icon-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
-    * @prop --icon-margin-bottom: Bottom margin of the button icon
-    * @prop --icon-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
-    *
-    * @prop --icon-padding-top: Top padding of the button icon
-    * @prop --icon-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
-    * @prop --icon-padding-bottom: Bottom padding of the button icon
-    * @prop --icon-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
-    *
-    * @prop --icon-font-size: Font size of the button icon
-    * @prop --icon-font-weight: Font weight of the button icon
-    */
+   * @prop --background: Background of the button
+   * @prop --background-focused: Background of the button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
+   * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
+   *
+   * @prop --color: Text color of the button
+   * @prop --color-focused: Text color of the button when focused with the tab key
+   * @prop --color-hover: Text color of the button on hover
+   *
+   * @prop --min-width: Minimum width of the button
+   * @prop --min-height: Minimum height of the button
+   *
+   * @prop --transition: Transition of the button
+   *
+   * @prop --border-radius: Border radius of the button
+   *
+   * @prop --ripple-color: Color of the button ripple effect
+   *
+   * @prop --opacity: Opacity of the button
+   *
+   * @prop --margin-top: Top margin of the button
+   * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
+   * @prop --margin-bottom: Bottom margin of the button
+   * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
+   *
+   * @prop --padding-top: Top padding of the button
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
+   * @prop --padding-bottom: Bottom padding of the button
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
+   *
+   * @prop --icon-margin-top: Top margin of the button icon
+   * @prop --icon-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
+   * @prop --icon-margin-bottom: Bottom margin of the button icon
+   * @prop --icon-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
+   *
+   * @prop --icon-padding-top: Top padding of the button icon
+   * @prop --icon-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
+   * @prop --icon-padding-bottom: Bottom padding of the button icon
+   * @prop --icon-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
+   *
+   * @prop --icon-font-size: Font size of the button icon
+   * @prop --icon-font-weight: Font weight of the button icon
+   */
   --background: transparent;
   --color-focused: currentColor;
   --color-hover: currentColor;
@@ -169,18 +175,18 @@ ion-ripple-effect {
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: block;
   position: relative;
   width: 100%;
@@ -239,8 +245,8 @@ ion-icon {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -270,6 +276,12 @@ ion-icon {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -329,7 +341,7 @@ ion-icon {
   --background-hover: transparent;
   --background-hover-opacity: 1;
   --background-focused: currentColor;
-  --background-focused-opacity: .1;
+  --background-focused-opacity: 0.1;
   --border-radius: 4px;
   --color: var(--ion-color-primary, #0054e9);
   --icon-margin-end: 1px;