voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.3

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -186,4 +186,69 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
     });
+    test.describe(title('datetime-button: formatOptions'), () => {
+        test('should include date and time for presentation date-time', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+            await expect(page.locator('#time-button')).toContainText('01:22 AM');
+        });
+        test('should include date for presentation date', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+        });
+        test('should include date and time in same button for preferWheel', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
+        <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.formatOptions = {
+          date: {
+            weekday: "short",
+            month: "long",
+            day: "2-digit"
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit"
+          }
+        }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+        });
+    });
 });

package/dist/collection/components/fab/fab.js

@@ -47,12 +47,12 @@ export class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '295e4b79449ff102d54b4a415487a26144a47839', class: {
+        return (h(Host, { key: 'a25aae31396546595b21a760ced22ee92d2379d6', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'a41871eb5d0a8c6315ba7012cef0e4dfc1126c9d' })));
+            } }, h("slot", { key: 'b01cc2572213bfa6c12111e32e2f7702e6d93621' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab-button/fab-button.js

@@ -63,7 +63,7 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: 'bfc553a86d54b665039512e93c83865232431e61', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'f342fbd54263de388bc49e54af61ce4aaaef1f2e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -74,7 +74,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '08821f166159c1c0c08a936f8db0cc5b8c121b6b' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '5b369ce677bb08c2972489be8abad035f2074fee', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '6b61a3242e6d6ec49e157fe6c7a64b8445e6de3b', class: "button-inner" }, h("slot", { key: 'f6450e5caabb8becd48425547246b6edf96eb4f8' })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'cd29a22c7d8ea02ab3469ba8a5878fd1cb28286a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '046a1254b728b43e2f4496ad96fff7bb8827df19', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '9b5c11105d2b7c37c82f7eea2264e29c5f939262', class: "button-inner" }, h("slot", { key: '283fe50749e5537bc7d21159c36c9eb3fbe45415' })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab-button/test/a11y/fab-button.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('fab-button: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/fab-list/fab-list.js

@@ -18,11 +18,11 @@ export class FabList {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8eca9c8c4f7febe3e0b44604a3854480f5f9e697', class: {
+        return (h(Host, { key: '62d22c1907677360d91fc0386ab05379bcc9de8a', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '3be8055bbf0dbb928d712e950f6184bd173a2d1e' })));
+            } }, h("slot", { key: '4f9b6b9620c0ec79006663c5981140184129b7ce' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -80,7 +80,7 @@ export class Footer {
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'c86a1139e5004bb523b2ec02ff3056bb392070d8', role: "contentinfo", class: {
+        return (h(Host, { key: 'c6f57ef061d44a475dd2c3361e73199a1820e2ea', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -88,7 +88,7 @@ export class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: '6869e534facaf074883643403c8fb03bb2f0dbc5' })));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: '5f27edadd5c05c38d0ba9de0277bac675f5b36b3' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/grid/grid.js

@@ -9,10 +9,10 @@ export class Grid {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6d46d3693c8af7e805cb438dd654485a152e7e40', class: {
+        return (h(Host, { key: 'f16254ea58e52b57b2de5cb33a7e84ad544361af', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '7f57ee35524880aeb96d081dd8125460156196b3' })));
+            } }, h("slot", { key: '42f4eff0d912dc0112fa74d7de69f3a6a8e04a2e' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -240,8 +240,11 @@ ion-header ion-toolbar:first-of-type {
  * We use opacity: 0 to avoid a layout shift.
  * We target both the attribute and the class in the event that the attribute
  * is not reflected on the host in some frameworks.
+ *
+ * Both headers should be scoped to iOS mode otherwise an MD app that uses an
+ * iOS header may cause other MD headers to be unexpectedly hidden.
  */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse=condense],
-~ ion-content ion-header.header-collapse-condense) {
+ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse=condense],
+~ ion-content ion-header.header-ios.header-collapse-condense) {
   opacity: 0;
 }

package/dist/collection/components/header/header.js

@@ -140,14 +140,14 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'ab8eb272f275b7802e224c21c166124092fa917b', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '9f30ede40eaf89b3e0adbcd03e1d08d0d4ca762b', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '52409e455c10a25419c4cbd9ed2346dfecb36537' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '029aa484210e8dd5c5404a84c134d64a9100ba6e' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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

@@ -71,7 +71,7 @@ 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) })));
+        return (h(Host, { key: 'fa0d0e73693f4d5454dde2397a333143ab00a145', class: getIonMode(this) }, h("img", { key: '70198693643ab6a33816c6e1b0ed23b368208fbb', 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

@@ -167,7 +167,7 @@ export class InfiniteScroll {
     render() {
         const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'd9348b091bc02b744b7599207192994a31bf5044', class: {
+        return (h(Host, { key: 'be1a720fcf686dc48468de968d84ea58bfe0a06d', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

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

@@ -27,11 +27,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6c13188d977ef82db9281e0bc3e6d43438ad2335', class: {
+        return (h(Host, { key: '44b11681f802fb0d1c565810f71f7672453e16ca', class: {
                 [mode]: 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())));
+            } }, h("div", { key: 'd7e7d5beedf1e22a009e87790ca024b8f15c462b', 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() {

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

@@ -377,7 +377,7 @@ 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, {
+        return (h(Host, { key: '0b1c4fc7e71413c82badab2af3cbf568bebf8abd', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -388,14 +388,14 @@ 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: 'fd40ad2a23abf651bc3ff9fd5631632efea47a01', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '85eaadcee636cdf7bf8f40c3dc4bbfabfc5b36a0', class: "native-wrapper" }, h("slot", { key: 'acb7f7e2c3723568a209f8074da92fe6ed5169cd', name: "start" }), h("input", Object.assign({ key: 'b9a9184965601e2eb428a5ca8ca64f15aac47cda', 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: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '46513ac42e68143d04b2cf1f4c3f1f70b68d8802', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

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/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');