@ionic/core 8.2.2-dev.11717796763.1aa87d5c → 8.2.2-nightly.20240607

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

@@ -1,165 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: shape'), () => {
-        /**
-         * Solid fill is only available in the md theme
-         */
-        test.describe('solid fill', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            shape="round"
-            fill="solid"
-            label="Email"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-shape-round-fill-solid`));
-            });
-            test('border radius should be customizable', async ({ page }) => {
-                await page.setContent(`
-          <style>
-            ion-input {
-              --border-radius: 10px !important;
-            }
-          </style>
-
-          <ion-input
-            shape="round"
-            fill="solid"
-            label="Email"
-            label-placement="floating"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-shape-round-fill-solid-custom`));
-            });
-        });
-    });
-});
-configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: shape'), () => {
-        test.describe('round shape', () => {
-            test.describe('outline fill', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    await page.setContent(`
-            <ion-input
-              shape="round"
-              fill="outline"
-              label="Email"
-              value="hi@ionic.io"
-              helper-text="Enter your email"
-              maxlength="20"
-              counter="true"
-            ></ion-input>
-            `, config);
-                    const input = page.locator('ion-input');
-                    await expect(input).toHaveScreenshot(screenshot(`input-shape-round-fill-outline`));
-                });
-                test('border radius should be customizable', async ({ page }) => {
-                    await page.setContent(`
-            <style>
-              ion-input {
-                --border-radius: 10px !important;
-              }
-            </style>
-
-            <ion-input
-              shape="round"
-              fill="outline"
-              label="Email"
-              value="hi@ionic.io"
-              helper-text="Enter your email"
-              maxlength="20"
-              counter="true"
-            ></ion-input>
-          `, config);
-                    const input = page.locator('ion-input');
-                    await expect(input).toHaveScreenshot(screenshot(`input-shape-round-fill-outline-custom`));
-                });
-            });
-        });
-    });
-});
-configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: shape'), () => {
-        // TODO(ROU-5475): Add the `md` theme once the `soft` shape is available
-        // in the `md` theme by combining these tests with the above tests.
-        test.describe('soft shape', () => {
-            test.describe('outline fill', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    await page.setContent(`
-            <ion-input
-              shape="soft"
-              fill="outline"
-              label="Email"
-              value="hi@ionic.io"
-              helper-text="Enter your email"
-              maxlength="20"
-              counter="true"
-            ></ion-input>
-            `, config);
-                    const input = page.locator('ion-input');
-                    await expect(input).toHaveScreenshot(screenshot(`input-shape-soft-fill-outline`));
-                });
-            });
-        });
-        /**
-         * Rectangular shape is only available in the ionic theme
-         * TODO(FW-6098): Add test for rectangular shape in md
-         * by combining these tests with the above tests
-         */
-        test.describe('rectangular shape', () => {
-            test.describe('outline fill', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    await page.setContent(`
-            <ion-input
-              shape="rectangular"
-              fill="outline"
-              label="Email"
-              value="hi@ionic.io"
-              helper-text="Enter your email"
-              maxlength="20"
-              counter="true"
-            ></ion-input>
-            `, config);
-                    const input = page.locator('ion-input');
-                    await expect(input).toHaveScreenshot(screenshot(`input-shape-rectangular-fill-outline`));
-                });
-                test('border radius should be customizable', async ({ page }) => {
-                    await page.setContent(`
-            <style>
-              ion-input {
-                --border-radius: 10px !important;
-              }
-            </style>
-
-            <ion-input
-              shape="rectangular"
-              fill="outline"
-              label="Email"
-              value="hi@ionic.io"
-              helper-text="Enter your email"
-              maxlength="20"
-              counter="true"
-            ></ion-input>
-          `, config);
-                    const input = page.locator('ion-input');
-                    await expect(input).toHaveScreenshot(screenshot(`input-shape-rectangular-fill-outline-custom`));
-                });
-            });
-        });
-    });
-});

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

@@ -1,164 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Size is only available in the Ionic theme
- */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: size'), () => {
-        test.describe('input: size medium', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            label="Email"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-medium`));
-            });
-            test('should render correctly with stacked label', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-medium-label-stacked`));
-            });
-            test('should not have visual regressions with fill outline', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-medium-outline`));
-            });
-            test('should not have visual regressions with fill outline and round shape', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            shape="round"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-medium-outline-round`));
-            });
-        });
-        test.describe('input: size large', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            size="large"
-            label="Email"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-large`));
-            });
-            test('should render correctly with stacked label', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            size="large"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-large-label-stacked`));
-            });
-            test('should not have visual regressions with fill outline', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            size="large"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-large-outline`));
-            });
-            test('should not have visual regressions with fill outline and round shape', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            shape="round"
-            size="large"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-large-outline-round`));
-            });
-        });
-        test.describe('input: size xlarge', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            size="xlarge"
-            label="Email"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge`));
-            });
-            test('should render correctly with stacked label', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            size="xlarge"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-label-stacked`));
-            });
-            test('should not have visual regressions with fill outline', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            size="xlarge"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline`));
-            });
-            test('should not have visual regressions with fill outline and round shape', async ({ page }) => {
-                await page.setContent(`
-          <ion-input
-            fill="outline"
-            shape="round"
-            size="xlarge"
-            label="Email"
-            label-placement="stacked"
-            value="hi@ionic.io"
-          ></ion-input>
-        `, config);
-                const input = page.locator('ion-input');
-                await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline-round`));
-            });
-        });
-    });
-});

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

@@ -1,137 +0,0 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * 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 item
-    *
-    * @prop --border-color: Color of the item border
-    * @prop --border-style: Style of the item border
-    * @prop --border-width: Width of the item border
-    *
-    * @prop --min-height: Minimum height of the item
-    *
-    * @prop --padding-bottom: Bottom padding of the item
-    * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
-    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
-    * @prop --padding-top: Top padding of the item
-    *
-    */
-  --background: var(--ionic-color-base-white, #ffffff);
-  --border-color: var(--ionic-color-neutral-300, #cfcfcf);
-  --border-style: var(--ionic-border-style-solid, solid);
-  --border-width: var(--ionic-border-size-025, 1px);
-  --min-height: var(--ionic-scale-1800, 72px);
-  --padding-top: var(--ionic-space-200, 8px);
-  --padding-end: var(--ionic-space-400, 16px);
-  --padding-bottom: var(--ionic-space-200, 8px);
-  --padding-start: var(--ionic-space-400, 16px);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  outline: none;
-  font-family: var(--ionic-font-family, "Inter", sans-serif);
-  text-align: initial;
-  text-decoration: none;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.item-native {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: var(--min-height);
-  border-bottom-width: var(--border-width);
-  border-bottom-style: var(--border-style);
-  border-bottom-color: var(--border-color);
-  background: var(--background);
-  overflow: inherit;
-  box-sizing: border-box;
-}
-.item-native slot[name=start]::slotted(*) {
-  -webkit-margin-end: var(--ionic-space-400, 16px);
-  margin-inline-end: var(--ionic-space-400, 16px);
-}
-.item-native slot[name=end]::slotted(*) {
-  -webkit-margin-start: var(--ionic-space-400, 16px);
-  margin-inline-start: var(--ionic-space-400, 16px);
-}
-.item-native .item-inner,
-.item-native .item-inner .input-wrapper {
-  display: flex;
-  flex: 1;
-  overflow: inherit;
-  box-sizing: border-box;
-}

package/dist/collection/components/tab-bar/tab-bar.ionic.css

@@ -1,163 +0,0 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-/**
- * 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
- * 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.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  /**
-   * @prop --background: Background of the tab bar
-   * @prop --border: Border of the tab bar
-   * @prop --color: Color of the tab bar
-   */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  /* stylelint-disable */
-  padding-right: var(--ion-safe-area-right);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left);
-  /* stylelint-enable */
-  border-top: var(--border);
-  background: var(--background);
-  color: var(--color);
-  text-align: center;
-  contain: strict;
-  user-select: none;
-  z-index: 10;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-sizing: content-box !important;
-}
-
-:host(.ion-color) ::slotted(ion-tab-button) {
-  --background-focused: var(--ion-color-shade);
-  --color-selected: var(--ion-color-contrast);
-}
-
-:host(.ion-color) ::slotted(.tab-selected) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color),
-:host(.ion-color) ::slotted(ion-tab-button) {
-  color: rgba(var(--ion-color-contrast-rgb), 0.7);
-}
-
-:host(.ion-color),
-:host(.ion-color) ::slotted(ion-tab-button) {
-  background: var(--ion-color-base);
-}
-
-:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
-:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
-  background: var(--background-focused);
-}
-
-:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
-  background: transparent;
-}
-
-:host([slot=top]) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: 0;
-  border-top: 0;
-  border-bottom: var(--border);
-}
-
-:host(.tab-bar-hidden) {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-:host {
-  --background: var(--ion-tab-bar-background, var(--ionic-color-base-white, #ffffff));
-  --background-activated: var(--ion-tab-bar-background-activated, #ececec);
-  --background-focused: var(--ion-tab-bar-background-focused, transparent);
-  --color: var(--ion-tab-bar-color, var(--ionic-color-neutral-500, #a2a2a2));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ionic-color-primary-400, #b5c0f7));
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  height: 52px;
-  gap: 12px;
-  box-shadow: var(--ionic-elevation-200, 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05));
-}