@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

package/dist/collection/components/toggle/toggle.js

@@ -8,9 +8,10 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
 import { config } from "../../global/config";
-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 - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -55,8 +56,8 @@ export class Toggle {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (mode, checked) => {
-            if (mode === 'md') {
+        this.getSwitchLabelIcon = (theme, checked) => {
+            if (theme === 'md') {
                 return checked ? checkmarkOutline : removeOutline;
             }
             return checked ? removeOutline : ellipseOutline;
@@ -135,30 +136,30 @@ export class Toggle {
             this.focusEl.focus();
         }
     }
-    renderOnOffSwitchLabels(mode, checked) {
-        const icon = this.getSwitchLabelIcon(mode, checked);
+    renderOnOffSwitchLabels(theme, checked) {
+        const icon = this.getSwitchLabelIcon(theme, checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
+            theme === 'ios' && [this.renderOnOffSwitchLabels(theme, true), this.renderOnOffSwitchLabels(theme, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && theme === 'md' && this.renderOnOffSwitchLabels(theme, checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
     }
     render() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f90c95348f1251c077187f0d30f6f4a5198cde68', onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '897801af7fa235fde640f8de282c68202322573e', onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -167,23 +168,25 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '3b86ca8cc4a19b6bc17784cd01fcb7697c58d108', class: "toggle-wrapper" }, h("input", Object.assign({ key: '3773acdfdfe5263517980f19a698bdbb572a68eb', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'bb10a95f701d5f9c343c7d46a5bb690ee42eaa1d', class: {
+            }) }, h("label", { key: 'eb6c7b44da8826211c59ab2d1889ab8831056700', class: "toggle-wrapper" }, h("input", Object.assign({ key: '78d7dd883485347c8aa747a4ed21bbf11b5d0b09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'f7328e9a2e0ae1c11e9e0d0542c8a0f22b9b38ae', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '7ff69b1184f0abbefdb9642400885baf3b2abd38' })), h("div", { key: '3df2f297d9c0b53e7997841b822845af7ad6a058', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: 'c5b3e19b6e8307045bb3c0b84a045c48bb36a406' })), h("div", { key: 'e45f2ab64cc9f774e5d8f1a6ad4d0450d915b639', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toggle.ios.scss"],
-            "md": ["toggle.md.scss"]
+            "md": ["toggle.md.scss"],
+            "ionic": ["toggle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"]
+            "md": ["toggle.md.css"],
+            "ionic": ["toggle.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toggle/toggle.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
@@ -370,6 +376,12 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 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
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -425,6 +437,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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/test/basic/toolbar.e2e.js

@@ -3,13 +3,141 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('toolbar: basic (LTR only)'), () => {
+        test('should not have visual regressions with text only', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+        });
+    });
+});
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toolbar: basic'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/toolbar/test/basic`, config);
-            // capture both header toolbars at once, but don't include all the white space in the ion-content
+        test('should truncate long title with ellipsis', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
+        });
+        test('should not have visual regressions with icon-only buttons', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button>
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button>
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" class="ion-activated">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Activated Buttons</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
+        });
+        test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid" class="ion-activated">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary" class="ion-activated">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline" class="ion-activated">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline" class="ion-activated">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
             const header = page.locator('ion-header');
-            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
         });
     });
 });

package/dist/collection/components/toolbar/toolbar.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
@@ -142,6 +148,12 @@
   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

package/dist/collection/components/toolbar/toolbar.js

@@ -3,14 +3,15 @@
  */
 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 {
@@ -57,28 +58,30 @@ export class Toolbar {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'c6350bbcaab87bd55a718dad0ce6169648ced7f7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
+            })) }, h("div", { key: 'f7f1506262f2f3ae23f00bc2b80e01d987e1d8ec', class: "toolbar-background" }), h("div", { key: '4b8d5f47386d7fa1cddbf8f4c8cb4ba2bacc93ca', class: "toolbar-container" }, h("slot", { key: 'dbd14909adff7e8855872ccc13aa7ccdd14b5561', name: "start" }), h("slot", { key: '96ed44a11e5d98f004ef0a83cbb31a3b826de5e6', name: "secondary" }), h("div", { key: '538b912d43fea5b3ed8288e0f16d86d52aca4d93', class: "toolbar-content" }, h("slot", { key: 'ac865baded1e105f6f27fdf1c1f44c0b2b23c73b' })), h("slot", { key: 'a55434553bc51f0420c9a452007baec9a2b5310d', name: "primary" }), h("slot", { key: '47a15c81d5945c16016e647548d8cfde1e7dcdf1', 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.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"]
+            "md": ["toolbar.md.css"],
+            "ionic": ["toolbar.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toolbar/toolbar.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
@@ -142,6 +148,12 @@
   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

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,85 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Typography styles are only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('typography: global styles'), () => {
+        test('should apply the globals styles for each semantic tag', async ({ page }) => {
+            await page.setContent(`
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+          <p><ion-text class="ionic-font-size-l"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
+          <p><ion-text class="ionic-font-size-m">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
+          <p><ion-text class="ionic-font-size-s"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
+        </div>
+      `, config);
+            const div = page.locator('div');
+            await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
+        });
+        test('should apply the utility classes for each heading', async ({ page }) => {
+            await page.setContent(`
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
+          <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
+          <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
+          <h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
+          <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
+          <h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
+        </div>
+      `, config);
+            const div = page.locator('div');
+            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
+        });
+        test('should apply the heading classes on ion-text element', async ({ page }) => {
+            await page.setContent(`
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
+          <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
+          <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
+          <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
+          <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
+          <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
+        </div>
+      `, config);
+            const div = page.locator('div');
+            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
+        });
+        test('should apply the utility classes for font weights', async ({ page }) => {
+            await page.setContent(`
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
+        </div>
+      `, config);
+            const div = page.locator('div');
+            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
+        });
+        test('should apply the utility classes for font display', async ({ page }) => {
+            await page.setContent(`
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
+          <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
+        </div>
+      `, config);
+            const div = page.locator('div');
+            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
+        });
+    });
+});