@ionic/core 7.7.2-dev.11707425083.192d8103 → 7.7.2-dev.11707881769.185d2a14

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

@@ -336,7 +336,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c1ceeee6a920f8c6d43d3d8ede88a6c31a2241d8', class: createColorClasses(color, {
+        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -346,14 +346,14 @@ export class DatetimeButton {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["datetime-button.ios.scss"],
-            "md": ["datetime-button.md.scss"]
+            "ios": ["datetime-button.scss"],
+            "md": ["datetime-button.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["datetime-button.ios.css"],
-            "md": ["datetime-button.md.css"]
+            "ios": ["datetime-button.css"],
+            "md": ["datetime-button.css"]
         };
     }
     static get properties() {

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

@@ -3,18 +3,6 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ config, screenshot, title }) => {
-    test.describe(title('datetime-button: basic'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.setContent(`
-        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-      `, config);
-            const datetimeButton = page.locator('ion-datetime-button');
-            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
-        });
-    });
-});
 /**
  * The tested behavior does not
  * vary across modes/directions

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: '1a7b685098508c4eebff449775de7db5bce6937a', class: {
+        return (h(Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'd4c27f0307292cf443bfefe064f72827b0193508' })));
+            } }, h("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -334,10 +334,10 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
-  --background-activated: var(--ion-color-primary-shade, #004acd);
-  --background-focused: var(--ion-color-primary-shade, #004acd);
-  --background-hover: var(--ion-color-primary-tint, #1a65eb);
+  --background: var(--ion-color-primary, #3880ff);
+  --background-activated: var(--ion-color-primary-shade, #3171e0);
+  --background-focused: var(--ion-color-primary-shade, #3171e0);
+  --background-hover: var(--ion-color-primary-tint, #4c8dff);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -358,10 +358,10 @@ ion-ripple-effect {
 }
 
 :host(.fab-button-in-list) {
-  --background: var(--ion-color-light, #f6f8fc);
-  --background-activated: var(--ion-color-light-shade, #d8dade);
+  --background: var(--ion-color-light, #f4f5f8);
+  --background-activated: var(--ion-color-light-shade, #d7d8da);
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
   --color: var(--ion-color-light-contrast, #000);
   --color-activated: var(--ion-color-light-contrast, #000);
   --color-focused: var(--color-activated);
@@ -395,15 +395,15 @@ ion-ripple-effect {
 }
 @supports (backdrop-filter: blur(0)) {
   :host(.fab-button-translucent) {
-    --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.9);
-    --background-hover: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.8);
-    --background-focused: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.82);
+    --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);
+    --background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);
+    --background-focused: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);
     --backdrop-filter: saturate(180%) blur(20px);
   }
   :host(.fab-button-translucent-in-list) {
-    --background: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.9);
-    --background-hover: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.8);
-    --background-focused: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.82);
+    --background: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);
+    --background-hover: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);
+    --background-focused: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82);
   }
 }
 @supports (backdrop-filter: blur(0)) {

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: '46827ed444d314218e02138c7f790418637d95d0', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', 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: '05ab8562306b3af9a68e5f97f2815653f4ec4f86' }, 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: '315b62c5dcee8a27a3e4e572e9a9f76be9bf9f76', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '63b69cde22a13813ffa50d8f688f538a36372953', class: "button-inner" }, h("slot", { key: '39c1e85c385b36cbb31a8da8cc721cd5aa389009' })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, 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: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, h("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), 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/fab-button.md.css

@@ -334,7 +334,7 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
@@ -359,10 +359,10 @@ ion-ripple-effect {
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-activated: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-focused: var(--color-activated);
-  --background: var(--ion-color-light, #f6f8fc);
+  --background: var(--ion-color-light, #f4f5f8);
   --background-activated: transparent;
-  --background-focused: var(--ion-color-light-shade, #d8dade);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-focused: var(--ion-color-light-shade, #d7d8da);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

package/dist/collection/components/fab-button/test/a11y/fab-button.e2e.js

@@ -1,58 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 }) => {
-    test.describe(title('fab-button: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button>FAB</ion-fab-button>
-        <ion-fab-button class="ion-activated">FAB</ion-fab-button>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab-list: contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button>Down</ion-fab-button>
-            <ion-fab-button class="ion-activated">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab: translucent contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button translucent="true">FAB</ion-fab-button>
-        <ion-fab-button class="ion-focused" translucent="true">FAB</ion-fab-button>
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button translucent="true">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused" translucent="true">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('fab-button: aria attributes'), () => {
         test('should inherit aria attributes to inner button', async ({ page }) => {

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

@@ -184,8 +184,27 @@
   margin-bottom: 0;
   flex-direction: row-reverse;
 }
-:host(.fab-list-side-start) {
-  inset-inline-end: 0;
+@supports (inset-inline-start: 0) {
+  :host(.fab-list-side-start) {
+    inset-inline-end: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.fab-list-side-start) {
+    right: 0;
+  }
+  :host-context([dir=rtl]):host(.fab-list-side-start), :host-context([dir=rtl]).fab-list-side-start {
+    left: unset;
+    right: unset;
+    left: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.fab-list-side-start:dir(rtl)) {
+      left: unset;
+      right: unset;
+      left: 0;
+    }
+  }
 }
 
 :host(.fab-list-side-end) {
@@ -197,6 +216,25 @@
   margin-bottom: 0;
   flex-direction: row;
 }
-:host(.fab-list-side-end) {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.fab-list-side-end) {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.fab-list-side-end) {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.fab-list-side-end), :host-context([dir=rtl]).fab-list-side-end {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.fab-list-side-end:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }

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: '62bfbad01d821663c6d50f63b3dc02ba2754faf0', class: {
+        return (h(Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '2eec0c8415c1e4a43d7f11d26874c952a9f02046' })));
+            } }, h("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
     }
     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: '67ca25d2340178624b1858c7f8109013e5376934', role: "contentinfo", class: {
+        return (h(Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', 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: 'e35b1c0c474fa0d80b6f6c0248db2b43d0903c0f' })));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
     }
     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: 'fdcfd1ac3b1d609c91edc514e1207447cceaf8f7', class: {
+        return (h(Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'a0660b629d05c03a8385003ade6cd0db75075987' })));
+            } }, h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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: '5546d07e3b83695335698a7707d37a298da38b72', role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', 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: '7f701a4b57b2888fbcce9b839a3bc5c9d1240e2a' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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: 'b1ceee3a85c5092af386fb50ac8972c040ece6b7', class: getIonMode(this) }, h("img", { key: '722d81aaceb392f9bfde078a9054b579f51dceda', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: getIonMode(this) }, h("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', 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: '118757d9470756d66434331fc0180d31ac158e06', class: {
+        return (h(Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', 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: '0ffeaebe071c7ffe8aabacf89382f402804de44c', class: {
+        return (h(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: '30a3bac66ac8230b9352223f90eb7fed56071732', 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: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', 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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -219,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**

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

@@ -81,6 +81,7 @@ export class Input {
         };
         this.hasFocus = false;
         this.color = undefined;
+        this.accept = undefined;
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
@@ -112,6 +113,7 @@ export class Input {
         this.shape = undefined;
         this.spellcheck = false;
         this.step = undefined;
+        this.size = undefined;
         this.type = 'text';
         this.value = '';
     }
@@ -420,7 +422,7 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), h("input", Object.assign({ 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", { class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, 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, size: this.size, 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
@@ -460,7 +462,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 'has-focus': this.hasFocus,
                 'legacy-input': true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
-            }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.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: this.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 }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, 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: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.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
@@ -512,6 +514,26 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "attribute": "color",
                 "reflect": true
             },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": undefined
+                        }],
+                    "text": "This attribute is ignored."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
             "autocapitalize": {
                 "type": "string",
                 "mutable": false,
@@ -1055,6 +1077,23 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "attribute": "step",
                 "reflect": false
             },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
             "type": {
                 "type": "string",
                 "mutable": false,

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -219,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -1335,8 +1359,32 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .input-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.has-focus) .input-highlight {
@@ -1351,8 +1399,27 @@
 :host(.in-item) .input-highlight {
   bottom: 0;
 }
-:host(.in-item) .input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .input-highlight, :host-context([dir=rtl]).in-item .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .input-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.input-shape-round) {