@ionic/core 7.4.2-dev.11695829531.1e5aff3d → 7.4.2-dev.11695831341.191bdf12

package/dist/collection/components/item/item.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.
- */
 :host {
   /**
    * @prop --background: Background of the item
@@ -94,7 +61,7 @@
   --show-full-highlight: 0;
   --show-inset-highlight: 0;
   --detail-icon-color: initial;
-  --detail-icon-font-size: 1.25em;
+  --detail-icon-font-size: 20px;
   --detail-icon-opacity: 0.25;
   --color-activated: var(--color);
   --color-focused: var(--color);
@@ -487,7 +454,7 @@ ion-ripple-effect {
 ::slotted([slot=error]),
 .item-counter {
   padding-top: 5px;
-  font-size: 0.75rem;
+  font-size: 12px;
   z-index: 1;
 }
 
@@ -505,39 +472,6 @@ ion-ripple-effect {
     transition: none;
   }
 }
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   --min-height: 44px;
   --transition: background-color 200ms linear, opacity 200ms linear;
@@ -568,7 +502,7 @@ ion-ripple-effect {
   --highlight-color-valid: var(--ion-color-success, #2dd36f);
   --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   --bottom-padding-start: 0px;
-  font-size: 1rem;
+  font-size: 16px;
 }
 
 :host(.ion-activated) {
@@ -661,7 +595,7 @@ ion-ripple-effect {
   --padding-start: .5em;
   --padding-end: .5em;
   min-height: 24px;
-  font-size: 0.8125rem;
+  font-size: 13px;
 }
 
 ::slotted(ion-avatar) {

package/dist/collection/components/item/item.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.
- */
 :host {
   /**
    * @prop --background: Background of the item
@@ -94,7 +61,7 @@
   --show-full-highlight: 0;
   --show-inset-highlight: 0;
   --detail-icon-color: initial;
-  --detail-icon-font-size: 1.25em;
+  --detail-icon-font-size: 20px;
   --detail-icon-opacity: 0.25;
   --color-activated: var(--color);
   --color-focused: var(--color);
@@ -487,7 +454,7 @@ ion-ripple-effect {
 ::slotted([slot=error]),
 .item-counter {
   padding-top: 5px;
-  font-size: 0.75rem;
+  font-size: 12px;
   z-index: 1;
 }
 
@@ -505,105 +472,6 @@ ion-ripple-effect {
     transition: none;
   }
 }
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   --min-height: 48px;
   --background: var(--ion-item-background, var(--ion-background-color, #fff));
@@ -623,7 +491,7 @@ ion-ripple-effect {
   --highlight-color-focused: var(--ion-color-primary, #3880ff);
   --highlight-color-valid: var(--ion-color-success, #2dd36f);
   --highlight-color-invalid: var(--ion-color-danger, #eb445a);
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: normal;
   text-transform: none;
 }
@@ -782,7 +650,7 @@ ion-ripple-effect {
 
 ::slotted(ion-icon) {
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-  font-size: 1.5em;
+  font-size: 24px;
 }
 
 :host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon) {
@@ -824,7 +692,7 @@ ion-ripple-effect {
   margin-top: 0;
   margin-bottom: 0;
   align-self: flex-start;
-  font-size: 0.6875rem;
+  font-size: 11px;
 }
 
 ::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])) {
@@ -901,7 +769,7 @@ ion-ripple-effect {
   --padding-start: .6em;
   --padding-end: .6em;
   min-height: 25px;
-  font-size: 0.75rem;
+  font-size: 12px;
 }
 
 :host(.item-label-floating),

package/dist/collection/components/item/test/a11y/item.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+configs().forEach(({ title, config }) => {
   test.describe(title('item: axe'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.goto(`/src/components/item/test/a11y`, config);
@@ -25,119 +25,4 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
       expect(await item2.getAttribute('aria-label')).toEqual('test');
     });
   });
-  test.describe(title('item: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item>
-          <ion-label>Item</ion-label>
-        </ion-item>
-      `, config);
-      const item = page.locator('ion-item');
-      await expect(item).toHaveScreenshot(screenshot(`item-scale`));
-    });
-    test('should scale slotted icons on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item>
-          <ion-icon slot="start" name="star"></ion-icon>
-          <ion-label>Item</ion-label>
-          <ion-icon slot="end" name="flag"></ion-icon>
-        </ion-item>
-      `, config);
-      const item = page.locator('ion-item');
-      await expect(item).toHaveScreenshot(screenshot(`item-icons-scale`));
-    });
-    test('should scale detail icon on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item detail="true">
-          <ion-label>Item</ion-label>
-        </ion-item>
-      `, config);
-      const item = page.locator('ion-item');
-      await expect(item).toHaveScreenshot(screenshot(`item-detail-icon-scale`));
-    });
-    test('should scale counter text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item counter="true">
-          <ion-label position="stacked">Counter</ion-label>
-          <ion-input maxlength="20"></ion-input>
-        </ion-item>
-      `, config);
-      const item = page.locator('ion-item');
-      await expect(item).toHaveScreenshot(screenshot(`item-counter-text-scale`));
-    });
-    test('should scale helper and error text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
-          <ion-item>
-            <ion-label>Helper</ion-label>
-            <ion-input></ion-input>
-            <ion-note slot="helper">Helper Text</ion-note>
-          </ion-item>
-          <ion-item class="ion-invalid">
-            <ion-label>Error</ion-label>
-            <ion-input></ion-input>
-            <ion-note slot="error">Error Text</ion-note>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`item-helper-error-text-scale`));
-    });
-    test('should scale buttons in an item on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button>Default</ion-button>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="small">Small</ion-button>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="large">Large</ion-button>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`item-buttons-scale`));
-    });
-  });
 });

package/dist/collection/components/item-divider/item-divider.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.
- */
 :host {
   /**
    * @prop --background: Background of the item divider
@@ -120,72 +87,6 @@
   overflow: hidden;
 }
 
-/**
- * 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.
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   --background: var(--ion-color-step-100, #e6e6e6);
   --color: var(--ion-color-step-850, #262626);
@@ -194,7 +95,7 @@
   border-radius: 0;
   position: relative;
   min-height: 28px;
-  font-size: 1.0625rem;
+  font-size: 17px;
   font-weight: 600;
 }
 
@@ -218,6 +119,8 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
+  font-size: 24px;
+  font-weight: normal;
 }
 
 ::slotted(h2) {
@@ -225,6 +128,8 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
+  font-size: 17px;
+  font-weight: normal;
 }
 
 ::slotted(h3),
@@ -235,6 +140,9 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 3px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
 }
 
 ::slotted(p) {
@@ -243,7 +151,7 @@
   margin-top: 0;
   margin-bottom: 2px;
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
-  font-size: 0.875rem;
+  font-size: 14px;
   line-height: normal;
   text-overflow: inherit;
   overflow: inherit;