@ionic/core 8.2.2 → 8.2.3-dev.11719301373.17616928

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

@@ -1,36 +1,3 @@
-/**
- * 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.
@@ -84,20 +51,10 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
-  z-index: 10;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -114,13 +71,12 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
-  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -131,17 +87,104 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
-  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   position: absolute;
 }
 
+/**
+ * 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 {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 10;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
+.toolbar-container {
+  z-index: 10;
+}
+
+.toolbar-background {
+  z-index: -1;
+}
+
+/**
+ * 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/toolbar/toolbar.js

@@ -3,20 +3,22 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createColorClasses, hostContext } 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.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
- * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
+ * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
+ * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  */
 export class Toolbar {
     constructor() {
         this.childrenStyles = new Map();
         this.color = undefined;
+        this.divider = false;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -57,28 +59,32 @@ export class Toolbar {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const { divider } = this;
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'f5da1b790268b25ce0130be750640968aec611f5', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), h("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, h("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), h("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), h("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, h("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), h("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), h("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
+                'toolbar-divider': divider,
+            })) }, h("div", { key: 'd33c7e825763af744d07d4ec7a7856b902912e9c', class: "toolbar-background" }), h("div", { key: '3e85e2bd3861212a7cb709afbe851971518db74b', class: "toolbar-container" }, h("slot", { key: '5b9373e89733c10ed5e9097136afce2c262a2174', name: "start" }), h("slot", { key: '46356ccb4fab24b6239142530d96ed48d4a993e8', name: "secondary" }), h("div", { key: 'b5ac75f16fbd71cf1e89a28e1fd17aa27e01c8c4', class: "toolbar-content" }, h("slot", { key: '02999472244f9f6f36f0a5a693364c5a5cc654a3' })), h("slot", { key: '45f86f4559f304275574ab035acb29c26fec89c4', name: "primary" }), h("slot", { key: '4d9f4e808409e398be44cccade074702640d07b6', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"]
+            "md": ["toolbar.md.scss"],
+            "ionic": ["toolbar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"]
+            "md": ["toolbar.md.css"],
+            "ionic": ["toolbar.ionic.css"]
         };
     }
     static get properties() {
@@ -105,6 +111,24 @@ export class Toolbar {
                 },
                 "attribute": "color",
                 "reflect": true
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toollbar will have a line at the bottom.\nTODO(ROU-10855): add support for this prop on ios/md themes"
+                },
+                "attribute": "divider",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1,36 +1,3 @@
-/**
- * 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.
@@ -84,20 +51,10 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
-  z-index: 10;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -114,13 +71,12 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
-  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -131,17 +87,104 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
-  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   position: absolute;
 }
 
+/**
+ * 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 {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 10;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
+.toolbar-container {
+  z-index: 10;
+}
+
+.toolbar-background {
+  z-index: -1;
+}
+
+/**
+ * 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/css/test/link/basic/link.e2e.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Link global classes are only available in the Ionic theme.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('link global classes'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/css/test/link/basic/index.html', config);
+        });
+        test.describe('.ion-link class', () => {
+            test('should apply to anchor elements', async ({ page }) => {
+                const standalone = page.locator('#standalone');
+                await expect(standalone).toHaveScreenshot(screenshot('link-standalone'));
+            });
+            test('should apply to child anchor elements', async ({ page }) => {
+                const standalone = page.locator('#standalone-nested');
+                await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested'));
+            });
+        });
+        test.describe('.ion-link-underline class', () => {
+            test('should apply to anchor elements', async ({ page }) => {
+                const standalone = page.locator('#underline');
+                await expect(standalone).toHaveScreenshot(screenshot('link-underline'));
+            });
+            test('should apply to child anchor elements', async ({ page }) => {
+                const standalone = page.locator('#underline-nested');
+                await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested'));
+            });
+        });
+    });
+});

package/dist/collection/css/test/{a11y → typography/a11y}/typography.e2e.js

@@ -3,7 +3,7 @@
  */
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../utils/test/playwright/index";
+import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('typography: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

package/dist/collection/css/test/typography/basic/typography.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('Typography: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/css/test/typography/basic`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`));
+        });
+    });
+});