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

package/dist/collection/components/checkbox/test/basic/checkbox.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: basic visual tests'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.setContent(`
@@ -85,68 +85,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
     });
 });
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('checkbox: basic visual tests'), () => {
-        test('should have a small size applied correctly', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes">
-          <ion-checkbox size="small">Small</ion-checkbox>
-          <ion-checkbox size="small" checked="true">Small - Checked</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-small`));
-        });
-        test('should have an invalid visual applied correctly', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes" style="padding: 8px">
-          <ion-checkbox class="ion-invalid">Invalid</ion-checkbox>
-          <ion-checkbox class="ion-invalid ion-focused">Invalid</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-invalid`));
-        });
-    });
-    test.describe(title('checkbox: safe area'), () => {
-        test('should click the safe area of a small checkbox', async ({ page }) => {
-            await page.setContent(`<ion-checkbox size="small">Small</ion-checkbox>`, config);
-            const checkbox = page.locator('ion-checkbox');
-            const box = await checkbox.boundingBox();
-            if (box !== null) {
-                await page.mouse.click(box.x + box.width / 2, box.y + 47);
-            }
-            await expect(checkbox).toBeFocused();
-        });
-        test('should click the safe area of a default checkbox', async ({ page }) => {
-            await page.setContent(`<ion-checkbox>Default</ion-checkbox>`, config);
-            const checkbox = page.locator('ion-checkbox');
-            const box = await checkbox.boundingBox();
-            if (box !== null) {
-                await page.mouse.click(box.x + box.width / 2, box.y + 47);
-            }
-            await expect(checkbox).toBeFocused();
-        });
-    });
-    test.describe(title('checkbox: shapes'), () => {
-        test('should have a soft shape applied correctly', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes">
-          <ion-checkbox >soft</ion-checkbox>
-          <ion-checkbox shape="soft">Soft</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-shape-soft`));
-        });
-        test('should have a rectangular shape applied correctly', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes">
-          <ion-checkbox shape="rectangular">Rectangular</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-shape-rectangular`));
-        });
-    });
-});

package/dist/collection/components/checkbox/test/label/checkbox.e2e.js

@@ -11,7 +11,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  * we set the width of the checkbox so we can
  * see the justification results.
  */
-configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: label'), () => {
         test.describe('checkbox: start placement', () => {
             test('should render a start justification with label in the start position', async ({ page }) => {

package/dist/collection/components/checkbox/test/states/checkbox.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: states'), () => {
         test('should render disabled checkbox correctly', async ({ page }) => {
             await page.setContent(`
@@ -33,36 +33,5 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
             const checkbox = page.locator('ion-checkbox');
             await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`));
         });
-        test('should render focus checkbox correctly', async ({ page }) => {
-            await page.setContent(`
-          <div id="checkboxes" style="padding: 8px">
-            <ion-checkbox class="ion-focused">Label</ion-checkbox>
-            <ion-checkbox class="ion-focused" checked>Label</ion-checkbox>
-          </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-focused`));
-        });
-        test('should render checkbox hover correctly', async ({ page }) => {
-            await page.setContent(`
-          <div id="checkboxes">
-            <ion-checkbox>Label</ion-checkbox>
-            <ion-checkbox checked>Label</ion-checkbox>
-          </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await checkboxes.hover();
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-hover`));
-        });
-        test('should render checkbox active correctly', async ({ page }) => {
-            await page.setContent(`
-          <div id="checkboxes">
-            <ion-checkbox class="ion-activated">Label</ion-checkbox>
-            <ion-checkbox class="ion-activated" checked>Label</ion-checkbox>
-          </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-active`));
-        });
     });
 });

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -63,11 +57,10 @@
   /**
    * @prop --background: Background of the chip
    * @prop --color: Color of the chip
-   * @prop --border-radius: Border radius 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: var(--border-radius);
+  border-radius: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-margin-start: 4px;
@@ -216,16 +209,4 @@
    * We add a min font size to keep the text legible.
    */
   font-size: clamp(13px, 0.875rem, 22px);
-}
-
-:host(.chip-soft) {
-  --border-radius: 10px;
-}
-
-:host(.chip-round) {
-  --border-radius: 999px;
-}
-
-:host(.chip-rectangular) {
-  --border-radius: 0px;
 }

package/dist/collection/components/chip/chip.js

@@ -2,73 +2,38 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Chip {
     constructor() {
         this.color = undefined;
         this.outline = false;
         this.disabled = false;
-        this.shape = undefined;
-        this.size = undefined;
-    }
-    /**
-     * Set the shape based on the theme
-     */
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        if (shape === undefined) {
-            return theme === 'ionic' ? 'round' : 'soft';
-        }
-        return shape;
-    }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        if (theme === 'ionic') {
-            return size !== undefined ? size : 'large';
-            // TODO(ROU-10695): remove the size !== undefined when we add support for
-            // the `ios` and `md` themes.
-        }
-        else if (size !== undefined) {
-            printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`);
-        }
-        return undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        const size = this.getSize();
-        const shape = this.getShape();
-        return (h(Host, { key: 'aa0aeece6547531edddac10afb3be5dbd63b817a', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
-                [`chip-${shape}`]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '7dd923c1b28d1eb1efa348f66f49cec067645af9', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-                'ion-focusable': !this.disabled,
-                [`chip-${size}`]: size !== undefined,
-            }) }, h("slot", { key: '94581c49b9e636e388fb0a84b5f390f7f2341210' }), theme === 'md' && h("ion-ripple-effect", { key: '392fc618c6e6ea56e7481725624ab5a98d4ecb54' })));
+            }) }, h("slot", { key: '7ede838bf109dc27a898ee2dcdeabc3f439c8e6f' }), mode === 'md' && h("ion-ripple-effect", { key: '5acb073029544e73fcc0db4cc4e661ec1df4d231' })));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["chip.ios.scss"],
-            "md": ["chip.md.scss"],
-            "ionic": ["chip.ionic.scss"]
+            "md": ["chip.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["chip.ios.css"],
-            "md": ["chip.md.css"],
-            "ionic": ["chip.ionic.css"]
+            "md": ["chip.md.css"]
         };
     }
     static get properties() {
@@ -131,40 +96,6 @@ export class Chip {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "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 a chip with slightly rounded corners, `\"round\"` for a chip with fully\nrounded corners, or `\"rectangular\"` for a chip without rounded corners.\nDefaults to `\"round\"` for the `\"ionic\"` theme and `\"soft\"` for all other themes."
-                },
-                "attribute": "shape",
-                "reflect": false
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'large'",
-                    "resolved": "\"large\" | \"small\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"small\"` for a chip with less height and padding.\n\nDefaults to `\"large\"` for the ionic theme, and  undefined for all other themes."
-                },
-                "attribute": "size",
-                "reflect": false
             }
         };
     }

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -63,11 +57,10 @@
   /**
    * @prop --background: Background of the chip
    * @prop --color: Color of the chip
-   * @prop --border-radius: Border radius 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: var(--border-radius);
+  border-radius: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-margin-start: 4px;
@@ -211,16 +204,4 @@
 }
 :host {
   font-size: 0.875rem;
-}
-
-:host(.chip-soft) {
-  --border-radius: 8px;
-}
-
-:host(.chip-round) {
-  --border-radius: 999px;
-}
-
-:host(.chip-rectangular) {
-  --border-radius: 0px;
 }

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

@@ -33,19 +33,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
         });
     });
 });
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    /**
-     * This behavior only applies to Ionic Theme.
-     */
-    test.describe(title('chip: focus state'), () => {
-        test('should render focus state', async ({ page }) => {
-            await page.setContent(`<div id="container" class="ion-padding">
-          <ion-chip class="ion-focused">
-            <ion-label>Focused</ion-label>
-          </ion-chip>
-        </div>`, config);
-            const chip = page.locator('#container');
-            await expect(chip).toHaveScreenshot(screenshot(`chip-focused`));
-        });
-    });
-});

package/dist/collection/components/col/col.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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/col/col.js

@@ -3,15 +3,11 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { matchBreakpoint } from "../../utils/media";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 const win = typeof window !== 'undefined' ? window : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
-/**
- * @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 Col {
     constructor() {
         this.offset = undefined;
@@ -114,10 +110,10 @@ export class Col {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '43fb2abaf5b1244676686503b8c4d3d0d31f8418', class: {
-                [theme]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'dff06fba1c546b782133fb9ea272050030b07bc4' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'c37fa4c4c993385ccbb6f4e89b2f390b140507a0', class: {
+                [mode]: true,
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6a5296ff0b9dee6600c2dafe7363a065d053bac2' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -104,8 +98,8 @@
 }
 
 #background-content {
-  right: 0px;
   left: 0px;
+  right: 0px;
   top: calc(var(--offset-top) * -1);
   bottom: calc(var(--offset-bottom) * -1);
   position: absolute;
@@ -113,8 +107,8 @@
 }
 
 .inner-scroll {
-  right: 0px;
   left: 0px;
+  right: 0px;
   top: calc(var(--offset-top) * -1);
   bottom: calc(var(--offset-bottom) * -1);
   -webkit-padding-start: var(--padding-start);

package/dist/collection/components/content/content.js

@@ -6,11 +6,8 @@ import { componentOnReady, hasLazyBuild } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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.
- *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.
  *
@@ -146,8 +143,9 @@ export class Content {
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll(mode) {
+    shouldForceOverscroll() {
         const { forceOverscroll } = this;
+        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     resize() {
@@ -334,25 +332,24 @@ export class Content {
     render() {
         const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
-        const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme === 'ios';
+        const mode = getIonMode(this);
+        const forceOverscroll = this.shouldForceOverscroll();
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '07bb171531f052fb05240af7643337cfe7f2cf13', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'f599a7da14969df38c20a6f650179d2a319fb58b', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: '53eb971417e10366445f558b0c40982ec7a676e4', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '4a1f7daf295c58f9255091b8adfd7f9d687cff3e', class: {
+            } }, h("div", { key: '7c545c3c95ea05abd036d0462936ac153d2a8fc6', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'a67ab7438466c99f74b7ba59964802c3ba86ac5b', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '47f94fd793310fe28769b6b3d0bf9645a89d77f6' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6d10fcac2e40b4dd6c20d91a8957ac07251d2fa7' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -438,18 +432,18 @@
 }
 
 .calendar-month-year-toggle {
-  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;
   position: relative;
   border: 0;
   outline: none;
@@ -458,8 +452,8 @@
   z-index: 1;
 }
 .calendar-month-year-toggle::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -497,12 +491,6 @@ ion-picker {
   --fade-background-rgb: var(--wheel-fade-background-rgb);
 }
 
-/**
- * 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