@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

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

@@ -68,3 +68,80 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
         });
     });
 });
+/**
+ * This test only impacts MD applications
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('header: translucent'), () => {
+        test('should not hide MD headers when using a descendant iOS header in an MD app', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28867',
+            });
+            await page.setContent(`
+        <ion-header id="main-header">
+          <ion-toolbar>
+            <ion-title>Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-header collapse="condense">
+            <ion-toolbar>
+              <ion-title size="large">Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-header mode="ios">
+            <ion-toolbar>
+              <ion-title>Welcome</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-content>
+      `, config);
+            const header = page.locator('ion-header#main-header');
+            /**
+             * The existence of the iOS header in an MD app should not cause the main MD header
+             * to be hidden. We do not have toHaveVisible because the behavior that hides
+             * the header under correct circumstances does it using opacity: 0.
+             * Playwright considers an element with opacity: 0 to still be visible
+             * because it has a non-zero bounding box.
+             */
+            await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-descendant'));
+        });
+        test('should not hide MD headers when using a root iOS header in an MD app', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28867',
+            });
+            await page.setContent(`
+        <ion-header id="main-header" mode="ios">
+          <ion-toolbar>
+            <ion-title>Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-header collapse="condense">
+            <ion-toolbar>
+              <ion-title size="large">Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Welcome</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-content>
+      `, config);
+            const header = page.locator('ion-header#main-header');
+            /**
+             * The existence of the iOS header in an MD app should not cause the main MD header
+             * to be hidden. We do not have toHaveVisible because the behavior that hides
+             * the header under correct circumstances does it using opacity: 0.
+             * Playwright considers an element with opacity: 0 to still be visible
+             * because it has a non-zero bounding box.
+             */
+            await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-main'));
+        });
+    });
+});

package/dist/collection/components/img/img.js

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @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.
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -71,7 +74,10 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: 'ff933e2b7e586c71bc695ad9e1475c2ef48a1632', class: getIonMode(this) }, h("img", { key: '60fea471b6665abe92678c7c9ab15c3e12195582', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c789da9dc3b3a06715e3550e951ff2ffbb80d174', class: {
+                [theme]: true,
+            } }, h("img", { key: 'b24b2d82d3b037c9f4bde82e5bbf669a6b58009a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -3,7 +3,11 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class InfiniteScroll {
     constructor() {
         this.thrPx = 0;
@@ -165,10 +169,10 @@ export class InfiniteScroll {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'd9348b091bc02b744b7599207192994a31bf5044', class: {
-                [mode]: true,
+        return (h(Host, { key: '6506910ec74544cc51c396bac21a6e2a8fe2a956', class: {
+                [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -5,7 +5,11 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
@@ -14,8 +18,8 @@ export class InfiniteScrollContent {
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+            const theme = getIonTheme(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -26,24 +30,26 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '6c13188d977ef82db9281e0bc3e6d43438ad2335', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '1bebdcb04f303c5222b23bf800168eee3c5942bd', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: '41b5087e22d03c928d00be4e1845e711409c807d', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${theme}`]: true,
+            } }, h("div", { key: '414b460914f59aa3ee800bc17389e46253b516da', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.scss"],
-            "md": ["infinite-scroll-content.md.scss"]
+            "md": ["infinite-scroll-content.md.scss"],
+            "ionic": ["infinite-scroll-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.css"],
-            "md": ["infinite-scroll-content.md.css"]
+            "md": ["infinite-scroll-content.md.css"],
+            "ionic": ["infinite-scroll-content.md.css"]
         };
     }
     static get properties() {

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

@@ -69,6 +69,7 @@
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
@@ -586,12 +587,12 @@
   max-width: calc(100% / 0.75);
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
@@ -709,6 +710,7 @@
 :host {
   --border-width: 0.55px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --highlight-height: 0px;
   font-size: inherit;
 }
 

package/dist/collection/components/input/input.js

@@ -7,10 +7,11 @@ import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnRea
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { closeCircle, closeSharp } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getCounterText } from "./input.utils";
 /**
- * @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 label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
@@ -327,8 +328,8 @@ export class Input {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -353,10 +354,10 @@ export class Input {
     }
     render() {
         const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -377,8 +378,8 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '7194f43a5bf2b46c67fac2eb32d8a76156ebd17f', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '9bcc480d281ce2b61f3aca55e56623210efb06a7', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
@@ -388,27 +389,29 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'c4e3dbcad69cd08ecd73bf7268936f010eb657e8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '1a001341f7f57139a1b8cba8bc4eb6b0f589f3b7', class: "native-wrapper" }, h("slot", { key: '9f2448b80c62ba7e5a63237d42d0a9003a321507', name: "start" }), h("input", Object.assign({ key: 'b4d8b49412cb2b205813b5b534bdff754ba8168a', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '530e2235871cfcc1f5b1df85c713c9c7e8e1cb4b', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '902fcf35a8c2ec6290683140e29b3c05daee5351', class: "native-wrapper" }, h("slot", { key: 'd0035f8efbfaaa65040b12bcfde81bc4404ae3b1', name: "start" }), h("input", Object.assign({ key: '325bc0cb301ec34ca5161f4d09a7821d82cac67b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'f337b842a5cdbcb5db724fb036c8634580dd4464', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: theme === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'd800922c106dd278f1995a736b62e3de1147356a', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["input.ios.scss"],
-            "md": ["input.md.scss"]
+            "md": ["input.md.scss"],
+            "ionic": ["input.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["input.ios.css"],
-            "md": ["input.md.css"]
+            "md": ["input.md.css"],
+            "ionic": ["input.md.css"]
         };
     }
     static get properties() {
@@ -663,7 +666,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available when the theme is `\"md\"`."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -1094,30 +1097,6 @@ export class Input {
                         }
                     }
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {

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

@@ -69,6 +69,7 @@
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
@@ -586,12 +587,12 @@
   max-width: calc(100% / 0.75);
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
@@ -924,7 +925,7 @@
  * the input is focused.
  */
 :host(.input-fill-outline.has-focus) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
@@ -1170,6 +1171,7 @@
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --highlight-height: 2px;
   font-size: inherit;
 }
 
@@ -1216,7 +1218,7 @@
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
   transform: scale(0);
   transition: transform 200ms;
   background: var(--highlight-color);

package/dist/collection/components/input/test/a11y/input.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'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('input: a11y'), () => {
         test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/input/test/highlight/input.e2e.js

@@ -51,6 +51,52 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const input = page.locator('ion-input');
                 await expect(input).toHaveScreenshot(screenshot(`input-no-fill-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`input-no-fill-custom-highlight`));
+            });
         });
         test.describe('input: solid', () => {
             test('should render valid state correctly', async ({ page }) => {
@@ -101,6 +147,55 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const input = page.locator('ion-input');
                 await expect(input).toHaveScreenshot(screenshot(`input-solid-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`input-solid-custom-highlight`));
+            });
         });
         test.describe('input: outline', () => {
             test('should render valid state correctly', async ({ page }) => {
@@ -151,6 +246,55 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const input = page.locator('ion-input');
                 await expect(input).toHaveScreenshot(screenshot(`input-outline-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`input-outline-custom-highlight`));
+            });
         });
     });
 });

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

@@ -41,3 +41,24 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: item functionality'), () => {
+        test('clicking padded space within item should focus the input', async ({ page }) => {
+            await page.setContent(`
+        <ion-item>
+          <ion-input label="Input"></ion-input>
+        </ion-item>
+      `, config);
+            const itemNative = page.locator('.item-native');
+            const input = page.locator('ion-input input');
+            // Clicks the padded space within the item
+            await itemNative.click({
+                position: {
+                    x: 5,
+                    y: 5,
+                },
+            });
+            await expect(input).toBeFocused();
+        });
+    });
+});

package/dist/collection/components/input/test/slot/input.e2e.js

@@ -9,9 +9,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');
@@ -21,9 +25,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');