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

package/dist/collection/components/skeleton-text/skeleton-text.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

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -4,7 +4,11 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-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 SkeletonText {
     constructor() {
         this.animated = false;
@@ -24,12 +28,12 @@ export class SkeletonText {
     render() {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-        const mode = getIonMode(this);
-        return (h(Host, { key: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '20170a23455836848210459749d9ba6a6eaaff53', class: {
+                [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
+            } }, h("span", { key: '96a9a18da286285abb647e7b69a4832cbe59b3b8' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.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

package/dist/collection/components/spinner/spinner.js

@@ -4,8 +4,12 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
+/**
+ * @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 Spinner {
     constructor() {
         this.color = undefined;
@@ -15,16 +19,16 @@ export class Spinner {
     }
     getName() {
         const spinnerName = this.name || config.get('spinner');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         if (spinnerName) {
             return spinnerName;
         }
-        return mode === 'ios' ? 'lines' : 'circular';
+        return theme === 'ios' ? 'lines' : 'circular';
     }
     render() {
         var _a;
         const self = this;
-        const mode = getIonMode(self);
+        const theme = getIonTheme(self);
         const spinnerName = self.getName();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
@@ -39,8 +43,8 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses(self.color, {
-                [mode]: true,
+        return (h(Host, { key: '577bf2a998c801edc32a1d515fc930c471567e71', class: createColorClasses(self.color, {
+                [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));

package/dist/collection/components/split-pane/split-pane.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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   display: none;
 }
 
+/**
+ * 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/split-pane/split-pane.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -14,6 +14,10 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
+/**
+ * @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 SplitPane {
     constructor() {
         this.visible = false;
@@ -117,26 +121,28 @@ export class SplitPane {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f2090ca1bf3210b4ba6e20adafbc6f5839704cdd', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`split-pane-${mode}`]: true,
+                [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
+            } }, h("slot", { key: '3ecadb0aa95e4b7799b34122afe25d028bba8710' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"],
+            "ionic": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"],
+            "ionic": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   display: none;
 }
 
+/**
+ * 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/tab/tab.js

@@ -3,6 +3,10 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
+/**
+ * @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 Tab {
     constructor() {
         this.loaded = false;
@@ -48,10 +52,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '91a0d6e7f70446804044b06eaf22e6fe0eb14510', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
+            } }, h("slot", { key: '6bb7036c2a8a149212b5afdc0a34c6131efd1aee' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,163 @@
+/**
+ * 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));
+}

package/dist/collection/components/tab-bar/tab-bar.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
@@ -119,6 +125,12 @@
   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
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -174,6 +186,12 @@
  *   }
  * }
  */
+/**
+ * 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/tab-bar/tab-bar.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 TabBar {
     constructor() {
@@ -49,26 +50,28 @@ export class TabBar {
     }
     render() {
         const { color, translucent, keyboardVisible } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'a17e0599a93095bd47d519336fda9ceeda3029d1', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
+            }) }, h("slot", { key: '7c1f1abe56e8a0f3f24d3479dd6c839aaf90c7be' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["tab-bar.ios.scss"],
-            "md": ["tab-bar.md.scss"]
+            "md": ["tab-bar.md.scss"],
+            "ionic": ["tab-bar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-bar.ios.css"],
-            "md": ["tab-bar.md.css"]
+            "md": ["tab-bar.md.css"],
+            "ionic": ["tab-bar.ionic.css"]
         };
     }
     static get properties() {
@@ -125,7 +128,7 @@ export class TabBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the tab bar will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/tab-bar/tab-bar.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
@@ -119,6 +125,12 @@
   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
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -174,6 +186,12 @@
  *   }
  * }
  */
+/**
+ * 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/tab-bar/test/basic/tab-bar.e2e.js

@@ -3,6 +3,40 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior needs to be tested in all modes and directions
+ */
+configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('tab-bar: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <ion-tab-bar selected-tab="2">
+          <ion-tab-button tab="1">
+            <ion-icon name="home-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="home-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" class="ion-focused">
+            <ion-icon name="home-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="4" class="ion-activated">
+            <ion-icon name="home-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `, config);
+            const tabBar = page.locator('ion-tab-bar');
+            await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-default`));
+        });
+    });
+});
 /**
  * This behavior needs to be tested in both modes and directions to
  * make sure the safe area padding is applied only to that side