@ionic/core 7.5.6-dev.11700086473.1eebae2a → 7.5.6-dev.11700168085.18cb70d3

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -31,6 +31,28 @@
  * @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 action sheet group
@@ -251,6 +273,28 @@
  * @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 {
   --background: var(--ion-overlay-background-color, var(--ion-background-color, #fff));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
@@ -263,7 +307,7 @@
   --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
-  --button-color: var(--ion-text-color-step-150, #262626);
+  --button-color: var(--ion-color-step-850, #262626);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }
 

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

@@ -31,6 +31,28 @@
  * @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 alert
@@ -115,7 +137,15 @@
   font-weight: normal;
 }
 
-.alert-message {
+/**
+ * Alert has a maximum height in scenarios
+ * such as the MD alert on tablet devices.
+ * As a result, we need to make sure the inner
+ * containers can scroll otherwise content
+ * may be cut off.
+ */
+.alert-message,
+.alert-input-group {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
@@ -198,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-background-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -291,6 +321,28 @@ textarea.alert-input {
  * @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;
+ *   }
+ * }
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -324,6 +376,28 @@ textarea.alert-input {
  * @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;
+ *   }
+ * }
+ */
 /**
  * We want the height of the button to
  * scale with the text so the next never runs
@@ -374,7 +448,7 @@ textarea.alert-input {
 }
 
 .alert-sub-title {
-  color: var(--ion-text-color-step-400, #666666);
+  color: var(--ion-color-step-600, #666666);
   font-size: max(14px, 0.875rem);
 }
 
@@ -411,12 +485,12 @@ textarea.alert-input {
   padding-inline-end: 6px;
   padding-top: 6px;
   padding-bottom: 6px;
-  border: 0.55px solid var(--ion-background-color-step-250, #bfbfbf);
+  border: 0.55px solid var(--ion-color-step-250, #bfbfbf);
   background-color: var(--ion-background-color, #fff);
   appearance: none;
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
   font-family: inherit;
   font-weight: inherit;
 }

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

@@ -31,6 +31,28 @@
  * @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 alert
@@ -115,7 +137,15 @@
   font-weight: normal;
 }
 
-.alert-message {
+/**
+ * Alert has a maximum height in scenarios
+ * such as the MD alert on tablet devices.
+ * As a result, we need to make sure the inner
+ * containers can scroll otherwise content
+ * may be cut off.
+ */
+.alert-message,
+.alert-input-group {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
@@ -198,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-background-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -291,6 +321,28 @@ textarea.alert-input {
  * @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;
+ *   }
+ * }
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -324,6 +376,36 @@ textarea.alert-input {
  * @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;
+ *   }
+ * }
+ */
+/**
+ * Large display requirements for MD Alert:
+ * 1. Maintain a minimum of 48px distance from the leading and
+ * trailing edges of the screen. (48px * 2 = 96px)
+ * 2. The width can increase up to 560px.
+ * 3. The height can increase up to 560px.
+ * Source: https://m2.material.io/components/dialogs#behavior
+ */
 :host {
   --background: var(--ion-overlay-background-color, var(--ion-background-color, #fff));
   --max-width: 280px;
@@ -365,14 +447,23 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-text-color-step-450, #737373);
+  color: var(--ion-color-step-550, #737373);
 }
 
 .alert-message {
-  max-height: 266px;
   font-size: 1rem;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@media screen and (max-width: 767px) {
+  .alert-message {
+    max-height: 266px;
+  }
+}
 .alert-message:empty {
   padding-left: 0;
   padding-right: 0;
@@ -389,11 +480,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -409,12 +500,22 @@ textarea.alert-input {
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  max-height: 266px;
-  border-top: 1px solid var(--ion-background-color-step-150, #d9d9d9);
-  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
+  border-top: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
   overflow: auto;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@media screen and (max-width: 767px) {
+  .alert-radio-group,
+  .alert-checkbox-group {
+    max-height: 266px;
+  }
+}
 .alert-tappable {
   position: relative;
   min-height: 48px;
@@ -428,7 +529,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -441,7 +542,7 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-text-color-step-450, #737373);
+  border-color: var(--ion-color-step-550, #737373);
 }
 @supports (inset-inline-start: 0) {
   .alert-radio-icon {
@@ -510,7 +611,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
 }
 
 [aria-checked=true] .alert-radio-icon {
@@ -530,7 +631,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -542,7 +643,7 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-text-color-step-450, #737373);
+  border-color: var(--ion-color-step-550, #737373);
   contain: strict;
 }
 @supports (inset-inline-start: 0) {
@@ -655,4 +756,15 @@ textarea.alert-input {
 
 .alert-button-inner {
   justify-content: flex-end;
+}
+
+/**
+ * MD alerts should scale up to 560px x 560px
+ * on tablet dimensions.
+ */
+@media screen and (min-width: 768px) {
+  :host {
+    --max-width: min(100vw - 96px, 560px);
+    --max-height: min(100vh - 96px, 560px);
+  }
 }

package/dist/collection/components/alert/test/basic/alert-tablet.e2e.js

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('alert: rendering - tablet'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+      await page.goto('/src/components/alert/test/basic', config);
+    });
+    test('should expand width and height on larger displays with text', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#longMessage');
+      const alert = page.locator('ion-alert');
+      await button.click();
+      await ionAlertDidPresent.next();
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
+    });
+    test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#checkbox');
+      const alert = page.locator('ion-alert');
+      await button.click();
+      await ionAlertDidPresent.next();
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
+    });
+    test('should expand width and height on larger displays with radios', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#radio');
+      const alert = page.locator('ion-alert');
+      await button.click();
+      await ionAlertDidPresent.next();
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
+    });
+  });
+});

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

@@ -31,6 +31,28 @@
  * @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 --border-radius: Border radius of the avatar and inner image
@@ -81,6 +103,28 @@
  * @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 {
   --border-radius: 50%;
   width: 48px;

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

@@ -31,6 +31,28 @@
  * @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 --border-radius: Border radius of the avatar and inner image
@@ -81,6 +103,28 @@
  * @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 {
   --border-radius: 50%;
   width: 64px;

package/dist/collection/components/back-button/back-button.ios.css

@@ -31,6 +31,28 @@
  * @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 button
@@ -281,6 +303,28 @@ ion-icon {
  * @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 {
   --background-hover: transparent;
   --background-hover-opacity: 1;

package/dist/collection/components/back-button/back-button.md.css

@@ -31,6 +31,28 @@
  * @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 button
@@ -281,6 +303,28 @@ ion-icon {
  * @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 {
   --border-radius: 4px;
   --background-focused: currentColor;