voyager-ionic-core 7.5.1 → 7.6.0

package/dist/collection/components/textarea/textarea.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 textarea
@@ -88,6 +110,24 @@
   box-sizing: border-box;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
+}
+
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -316,9 +356,7 @@
 }
 
 .native-wrapper {
-  display: flex;
   position: relative;
-  flex-grow: 1;
   width: 100%;
   height: 100%;
 }
@@ -389,6 +427,12 @@
   word-break: break-word;
 }
 
+.textarea-wrapper-inner {
+  display: flex;
+  width: 100%;
+  min-height: inherit;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -643,7 +687,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -664,6 +708,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
+}
+
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -689,9 +740,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.textarea-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -700,6 +749,29 @@
   max-width: calc(100% / 0.75);
 }
 
+.start-slot-wrapper, .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-shrink: 0;
+  align-self: start;
+}
+
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  margin-top: 0;
+}
+
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -733,6 +805,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;
+ *   }
+ * }
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -766,6 +860,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;
+ *   }
+ * }
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -799,6 +915,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;
+ *   }
+ * }
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -832,12 +970,35 @@
  * @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(.textarea-fill-solid) {
   --background: var(--ion-color-step-50, #f2f2f2);
   --border-color: var(--ion-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -900,7 +1061,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid) .textarea-wrapper:dir(rtl) {
+  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -908,9 +1069,7 @@
   }
 }
 
-:host(.textarea-fill-solid.textarea-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper {
+:host(.label-floating.textarea-fill-solid) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -951,11 +1110,34 @@
  * @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(.textarea-fill-outline) {
   --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1024,7 +1206,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-fill-outline.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-fill-outline.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -1041,9 +1223,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
-:host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper {
+:host(.label-floating.textarea-fill-outline) .label-text-wrapper {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1075,6 +1255,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 12px;
+}
+
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1167,7 +1354,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-start:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
     border-top-left-radius: 0px;
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
@@ -1196,7 +1383,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-end:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1210,9 +1397,7 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.textarea-fill-outline.textarea-label-placement-stacked) .textarea-outline-notch {
+:host(.label-floating.textarea-fill-outline) .textarea-outline-notch {
   border-top: none;
 }
 
@@ -1248,20 +1433,6 @@
   letter-spacing: 0.0333333333em;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 56px;
-}
-
-/**
- * Floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-}
-
 /**
  * When the textarea is focused the label should
  * take on the highlight color. This should
@@ -1348,7 +1519,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .textarea-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .textarea-highlight {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/thumbnail/test/basic/thumbnail.e2e.js

@@ -7,42 +7,42 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  * ion-thumbnail does not have mode/RTL-specific logic
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('thumbnail: rendering'), () => {
-    test('should not have visual regressions when rendering <img>', async ({ page }) => {
-      await page.goto(`/src/components/thumbnail/test/basic`, config);
-      const referenceEl = page.locator('#img');
-      await expect(referenceEl).toHaveScreenshot(screenshot(`thumbnail-img-diff`));
-    });
-    test('size should be customizable in <ion-item>', async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/22935',
-      });
-      await page.setContent(`
+    test.describe(title('thumbnail: rendering'), () => {
+        test('should not have visual regressions when rendering <img>', async ({ page }) => {
+            await page.goto(`/src/components/thumbnail/test/basic`, config);
+            const referenceEl = page.locator('#img');
+            await expect(referenceEl).toHaveScreenshot(screenshot(`thumbnail-img-diff`));
+        });
+        test('size should be customizable in <ion-item>', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/22935',
+            });
+            await page.setContent(`
           <ion-item>
             <ion-thumbnail style="--size: 20px">
               <img src="/src/components/thumbnail/test/thumbnail.svg" />
             </ion-thumbnail>
           </ion-item>
         `, config);
-      const item = page.locator('ion-item');
-      await expect(item).toHaveScreenshot(screenshot(`thumbnail-ion-item-size-diff`));
+            const item = page.locator('ion-item');
+            await expect(item).toHaveScreenshot(screenshot(`thumbnail-ion-item-size-diff`));
+        });
     });
-  });
 });
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('thumbnail: item rendering'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/thumbnail/test/basic`, config);
-    });
-    /**
-     * ion-item has mode and RTL specific logic
-     * for ion-thumbnail which is why we do not skip
-     * RTL and mode tests here.
-     */
-    test('should not have visual regressions when rendering inside of an <ion-item>', async ({ page }) => {
-      const referenceEl = page.locator('#ion-item');
-      await expect(referenceEl).toHaveScreenshot(screenshot(`thumbnail-ion-item-diff`));
+    test.describe(title('thumbnail: item rendering'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(`/src/components/thumbnail/test/basic`, config);
+        });
+        /**
+         * ion-item has mode and RTL specific logic
+         * for ion-thumbnail which is why we do not skip
+         * RTL and mode tests here.
+         */
+        test('should not have visual regressions when rendering inside of an <ion-item>', async ({ page }) => {
+            const referenceEl = page.locator('#ion-item');
+            await expect(referenceEl).toHaveScreenshot(screenshot(`thumbnail-ion-item-diff`));
+        });
     });
-  });
 });

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

package/dist/collection/components/thumbnail/thumbnail.js

@@ -4,19 +4,19 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
-  render() {
-    return (h(Host, { class: getIonMode(this) }, h("slot", null)));
-  }
-  static get is() { return "ion-thumbnail"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["thumbnail.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["thumbnail.css"]
-    };
-  }
+    render() {
+        return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+    }
+    static get is() { return "ion-thumbnail"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["thumbnail.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["thumbnail.css"]
+        };
+    }
 }

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

@@ -4,9 +4,9 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('title: font scaling'), () => {
-    test('should scale default title text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('title: font scaling'), () => {
+        test('should scale default title text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
         <style>
           html {
             font-size: 36px;
@@ -18,11 +18,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           </ion-toolbar>
         </ion-header>
       `, config);
-      const title = page.locator('ion-title');
-      await expect(title).toHaveScreenshot(screenshot(`title-default-scale`));
-    });
-    test('should scale small title text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
+            const title = page.locator('ion-title');
+            await expect(title).toHaveScreenshot(screenshot(`title-default-scale`));
+        });
+        test('should scale small title text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
         <style>
           html {
             font-size: 36px;
@@ -34,15 +34,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           </ion-toolbar>
         </ion-header>
       `, config);
-      const title = page.locator('ion-title');
-      await expect(title).toHaveScreenshot(screenshot(`title-small-scale`));
+            const title = page.locator('ion-title');
+            await expect(title).toHaveScreenshot(screenshot(`title-small-scale`));
+        });
     });
-  });
 });
 configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('title: font scaling for large attribute'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('title: font scaling for large attribute'), () => {
+        test('should scale text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
         <style>
           html {
             font-size: 36px;
@@ -54,8 +54,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
           </ion-toolbar>
         </ion-header>
       `, config);
-      const title = page.locator('ion-title');
-      await expect(title).toHaveScreenshot(screenshot(`title-large-scale`));
+            const title = page.locator('ion-title');
+            await expect(title).toHaveScreenshot(screenshot(`title-large-scale`));
+        });
     });
-  });
 });

package/dist/collection/components/title/test/basic/title.e2e.js

@@ -4,27 +4,27 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('title: basic'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/title/test/basic', config);
-      const wrapper = page.locator('#header-wrapper');
-      // only screenshot the headers to avoid unnecessary blank space from ion-content
-      await expect(wrapper).toHaveScreenshot(screenshot(`title-basic`));
+    test.describe(title('title: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto('/src/components/title/test/basic', config);
+            const wrapper = page.locator('#header-wrapper');
+            // only screenshot the headers to avoid unnecessary blank space from ion-content
+            await expect(wrapper).toHaveScreenshot(screenshot(`title-basic`));
+        });
     });
-  });
 });
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('title: special characters'), () => {
-    test('should not cut off characters', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('title: special characters'), () => {
+        test('should not cut off characters', async ({ page }) => {
+            await page.setContent(`
         <ion-header>
           <ion-toolbar>
             <ion-title size="large">ÔÔÔ</ion-title>
           </ion-toolbar>
         </ion-header>
       `, config);
-      const title = page.locator('ion-title');
-      await expect(title).toHaveScreenshot(screenshot('title-characters'));
+            const title = page.locator('ion-title');
+            await expect(title).toHaveScreenshot(screenshot('title-characters'));
+        });
     });
-  });
 });

package/dist/collection/components/title/title.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 --color: Text color of the title
@@ -93,7 +115,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;
@@ -155,7 +177,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.title-large) .toolbar-title:dir(rtl) {
+  :host(.title-large:dir(rtl)) .toolbar-title {
     transform-origin: calc(100% - inherit);
   }
 }