diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index a9a62f7542..e20ec3194f 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -163,7 +163,7 @@ npm i npm run build npm pack --pack-destination ~ -cd ../angular +cd ../packages/angular npm i npm run sync npm run build diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d8b395348..c9e4787f7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,42 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01) + + +### Bug Fixes + +* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406) +* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431) +* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417) +* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539) +* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418) +* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121) +* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388) +* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f)) +* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373) +* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a)) + + + + + +## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25) + + +### Bug Fixes + +* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487) +* **angular:** remove form control side effects ([#28359](https://github.com/ionic-team/ionic-framework/issues/28359)) ([82d6309](https://github.com/ionic-team/ionic-framework/commit/82d6309ef1675c0a6e767e87c23f166d84579d8f)), closes [#28358](https://github.com/ionic-team/ionic-framework/issues/28358) +* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90)) +* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283) +* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341) +* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e)) + + + + + ## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 549dfd06c1..936ca8621f 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01) + + +### Bug Fixes + +* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406) +* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418) +* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121) +* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388) +* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f)) +* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373) +* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a)) + + + + + +## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25) + + +### Bug Fixes + +* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487) +* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90)) +* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283) +* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341) +* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e)) + + + + + ## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18) diff --git a/core/package-lock.json b/core/package-lock.json index 70ffa72805..6eef54fd61 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,21 +1,21 @@ { "name": "@ionic/core", - "version": "7.5.1", + "version": "7.5.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.5.1", + "version": "7.5.3", "license": "MIT", "dependencies": { - "@stencil/core": "^4.5.0", + "@stencil/core": "^4.7.0", "ionicons": "^7.2.1", "tslib": "^2.1.0" }, "devDependencies": { "@axe-core/playwright": "^4.8.1", - "@capacitor/core": "^5.5.0", + "@capacitor/core": "^5.5.1", "@capacitor/haptics": "^5.0.6", "@capacitor/keyboard": "^5.0.6", "@capacitor/status-bar": "^5.0.6", @@ -25,9 +25,9 @@ "@playwright/test": "^1.39.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.8.2", + "@stencil/angular-output-target": "^0.8.3", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.6", + "@stencil/sass": "^3.0.7", "@stencil/vue-output-target": "^0.8.6", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", @@ -606,9 +606,9 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.0.tgz", - "integrity": "sha512-w59io0ctwnb7JRng7yO2H0YLHG8uz7XARUugRfp5aYTNiG55FqdSmSMOOqGCMPRg4sEnKjJTvAa4ImCYh3Kk1w==", + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz", + "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==", "dev": true, "dependencies": { "tslib": "^2.1.0" @@ -1644,18 +1644,18 @@ } }, "node_modules/@stencil/angular-output-target": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz", - "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==", + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz", + "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" } }, "node_modules/@stencil/core": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.5.0.tgz", - "integrity": "sha512-XRbHdb9t4SQzCCbF9qsh0dexvnlArEzCDJl19BJzxzazVBM398SeJUKCBh4p91AZIWveN0gHuZSIGMhLWR7qSA==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.0.tgz", + "integrity": "sha512-hl3hD5FA8F9kZiDJSus08Kno1QRl+fXeMBzrl5DjWAzAu0JHxL1AqTph5oQSekjvkSahaa8JtsXnHRZU93eivg==", "bin": { "stencil": "bin/stencil" }, @@ -1674,9 +1674,9 @@ } }, "node_modules/@stencil/sass": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz", - "integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz", + "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==", "dev": true, "engines": { "node": ">=12.0.0", @@ -10837,9 +10837,9 @@ "dev": true }, "@capacitor/core": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.0.tgz", - "integrity": "sha512-w59io0ctwnb7JRng7yO2H0YLHG8uz7XARUugRfp5aYTNiG55FqdSmSMOOqGCMPRg4sEnKjJTvAa4ImCYh3Kk1w==", + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz", + "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==", "dev": true, "requires": { "tslib": "^2.1.0" @@ -11579,16 +11579,16 @@ } }, "@stencil/angular-output-target": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz", - "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==", + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz", + "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==", "dev": true, "requires": {} }, "@stencil/core": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.5.0.tgz", - "integrity": "sha512-XRbHdb9t4SQzCCbF9qsh0dexvnlArEzCDJl19BJzxzazVBM398SeJUKCBh4p91AZIWveN0gHuZSIGMhLWR7qSA==" + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.0.tgz", + "integrity": "sha512-hl3hD5FA8F9kZiDJSus08Kno1QRl+fXeMBzrl5DjWAzAu0JHxL1AqTph5oQSekjvkSahaa8JtsXnHRZU93eivg==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -11598,9 +11598,9 @@ "requires": {} }, "@stencil/sass": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz", - "integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz", + "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index 8c8c38d77a..24c58db610 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.5.1", + "version": "7.5.3", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,13 +31,13 @@ "loader/" ], "dependencies": { - "@stencil/core": "^4.5.0", + "@stencil/core": "^4.7.0", "ionicons": "^7.2.1", "tslib": "^2.1.0" }, "devDependencies": { "@axe-core/playwright": "^4.8.1", - "@capacitor/core": "^5.5.0", + "@capacitor/core": "^5.5.1", "@capacitor/haptics": "^5.0.6", "@capacitor/keyboard": "^5.0.6", "@capacitor/status-bar": "^5.0.6", @@ -47,9 +47,9 @@ "@playwright/test": "^1.39.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.8.2", + "@stencil/angular-output-target": "^0.8.3", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.6", + "@stencil/sass": "^3.0.7", "@stencil/vue-output-target": "^0.8.6", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8dcb3cb3ba..a642757dc3 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -915,7 +915,7 @@ export namespace Components { */ "presentation": DatetimePresentation; /** - * If `true`, the datetime appears normal but is not interactive. + * If `true`, the datetime appears normal but the selected date cannot be changed. */ "readonly": boolean; /** @@ -2254,7 +2254,7 @@ export namespace Components { */ "name": string; "setButtonTabindex": (value: number) => Promise; - "setFocus": (ev: any) => Promise; + "setFocus": (ev: globalThis.Event) => Promise; /** * the value of the radio. */ @@ -3429,19 +3429,67 @@ declare global { prototype: HTMLIonAccordionElement; new (): HTMLIonAccordionElement; }; + interface HTMLIonAccordionGroupElementEventMap { + "ionChange": AccordionGroupChangeEventDetail; + "ionValueChange": AccordionGroupChangeEventDetail; + } interface HTMLIonAccordionGroupElement extends Components.IonAccordionGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonAccordionGroupElement: { prototype: HTMLIonAccordionGroupElement; new (): HTMLIonAccordionGroupElement; }; + interface HTMLIonActionSheetElementEventMap { + "ionActionSheetDidPresent": void; + "ionActionSheetWillPresent": void; + "ionActionSheetWillDismiss": OverlayEventDetail; + "ionActionSheetDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + } interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonActionSheetElement: { prototype: HTMLIonActionSheetElement; new (): HTMLIonActionSheetElement; }; + interface HTMLIonAlertElementEventMap { + "ionAlertDidPresent": void; + "ionAlertWillPresent": void; + "ionAlertWillDismiss": OverlayEventDetail; + "ionAlertDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + } interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonAlertElement: { prototype: HTMLIonAlertElement; @@ -3465,7 +3513,18 @@ declare global { prototype: HTMLIonBackButtonElement; new (): HTMLIonBackButtonElement; }; + interface HTMLIonBackdropElementEventMap { + "ionBackdropTap": void; + } interface HTMLIonBackdropElement extends Components.IonBackdrop, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonBackdropElement: { prototype: HTMLIonBackdropElement; @@ -3477,19 +3536,55 @@ declare global { prototype: HTMLIonBadgeElement; new (): HTMLIonBadgeElement; }; + interface HTMLIonBreadcrumbElementEventMap { + "ionFocus": void; + "ionBlur": void; + "collapsedClick": BreadcrumbCollapsedClickEventDetail; + } interface HTMLIonBreadcrumbElement extends Components.IonBreadcrumb, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonBreadcrumbElement: { prototype: HTMLIonBreadcrumbElement; new (): HTMLIonBreadcrumbElement; }; + interface HTMLIonBreadcrumbsElementEventMap { + "ionCollapsedClick": BreadcrumbCollapsedClickEventDetail; + } interface HTMLIonBreadcrumbsElement extends Components.IonBreadcrumbs, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonBreadcrumbsElement: { prototype: HTMLIonBreadcrumbsElement; new (): HTMLIonBreadcrumbsElement; }; + interface HTMLIonButtonElementEventMap { + "ionFocus": void; + "ionBlur": void; + } interface HTMLIonButtonElement extends Components.IonButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonButtonElement: { prototype: HTMLIonButtonElement; @@ -3531,7 +3626,21 @@ declare global { prototype: HTMLIonCardTitleElement; new (): HTMLIonCardTitleElement; }; + interface HTMLIonCheckboxElementEventMap { + "ionChange": CheckboxChangeEventDetail; + "ionFocus": void; + "ionBlur": void; + "ionStyle": StyleEventDetail; + } interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonCheckboxElement: { prototype: HTMLIonCheckboxElement; @@ -3549,13 +3658,43 @@ declare global { prototype: HTMLIonColElement; new (): HTMLIonColElement; }; + interface HTMLIonContentElementEventMap { + "ionScrollStart": ScrollBaseDetail; + "ionScroll": ScrollDetail; + "ionScrollEnd": ScrollBaseDetail; + } interface HTMLIonContentElement extends Components.IonContent, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonContentElement: { prototype: HTMLIonContentElement; new (): HTMLIonContentElement; }; + interface HTMLIonDatetimeElementEventMap { + "ionCancel": void; + "ionChange": DatetimeChangeEventDetail; + "ionValueChange": DatetimeChangeEventDetail; + "ionFocus": void; + "ionBlur": void; + "ionStyle": StyleEventDetail; + "ionRender": void; + } interface HTMLIonDatetimeElement extends Components.IonDatetime, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonDatetimeElement: { prototype: HTMLIonDatetimeElement; @@ -3573,7 +3712,19 @@ declare global { prototype: HTMLIonFabElement; new (): HTMLIonFabElement; }; + interface HTMLIonFabButtonElementEventMap { + "ionFocus": void; + "ionBlur": void; + } interface HTMLIonFabButtonElement extends Components.IonFabButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonFabButtonElement: { prototype: HTMLIonFabButtonElement; @@ -3603,13 +3754,37 @@ declare global { prototype: HTMLIonHeaderElement; new (): HTMLIonHeaderElement; }; + interface HTMLIonImgElementEventMap { + "ionImgWillLoad": void; + "ionImgDidLoad": void; + "ionError": void; + } interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonImgElement: { prototype: HTMLIonImgElement; new (): HTMLIonImgElement; }; + interface HTMLIonInfiniteScrollElementEventMap { + "ionInfinite": void; + } interface HTMLIonInfiniteScrollElement extends Components.IonInfiniteScroll, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonInfiniteScrollElement: { prototype: HTMLIonInfiniteScrollElement; @@ -3621,7 +3796,22 @@ declare global { prototype: HTMLIonInfiniteScrollContentElement; new (): HTMLIonInfiniteScrollContentElement; }; + interface HTMLIonInputElementEventMap { + "ionInput": InputInputEventDetail; + "ionChange": InputChangeEventDetail; + "ionBlur": FocusEvent; + "ionFocus": FocusEvent; + "ionStyle": StyleEventDetail; + } interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonInputElement: { prototype: HTMLIonInputElement; @@ -3651,19 +3841,53 @@ declare global { prototype: HTMLIonItemOptionElement; new (): HTMLIonItemOptionElement; }; + interface HTMLIonItemOptionsElementEventMap { + "ionSwipe": any; + } interface HTMLIonItemOptionsElement extends Components.IonItemOptions, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonItemOptionsElement: { prototype: HTMLIonItemOptionsElement; new (): HTMLIonItemOptionsElement; }; + interface HTMLIonItemSlidingElementEventMap { + "ionDrag": any; + } interface HTMLIonItemSlidingElement extends Components.IonItemSliding, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonItemSlidingElement: { prototype: HTMLIonItemSlidingElement; new (): HTMLIonItemSlidingElement; }; + interface HTMLIonLabelElementEventMap { + "ionColor": StyleEventDetail; + "ionStyle": StyleEventDetail; + } interface HTMLIonLabelElement extends Components.IonLabel, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonLabelElement: { prototype: HTMLIonLabelElement; @@ -3681,13 +3905,46 @@ declare global { prototype: HTMLIonListHeaderElement; new (): HTMLIonListHeaderElement; }; + interface HTMLIonLoadingElementEventMap { + "ionLoadingDidPresent": void; + "ionLoadingWillPresent": void; + "ionLoadingWillDismiss": OverlayEventDetail; + "ionLoadingDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + } interface HTMLIonLoadingElement extends Components.IonLoading, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonLoadingElement: { prototype: HTMLIonLoadingElement; new (): HTMLIonLoadingElement; }; + interface HTMLIonMenuElementEventMap { + "ionWillOpen": void; + "ionWillClose": void; + "ionDidOpen": void; + "ionDidClose": void; + "ionMenuChange": MenuChangeEventDetail; + } interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonMenuElement: { prototype: HTMLIonMenuElement; @@ -3705,13 +3962,46 @@ declare global { prototype: HTMLIonMenuToggleElement; new (): HTMLIonMenuToggleElement; }; + interface HTMLIonModalElementEventMap { + "ionModalDidPresent": void; + "ionModalWillPresent": void; + "ionModalWillDismiss": OverlayEventDetail; + "ionModalDidDismiss": OverlayEventDetail; + "ionBreakpointDidChange": ModalBreakpointChangeEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + "ionMount": void; + } interface HTMLIonModalElement extends Components.IonModal, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonModalElement: { prototype: HTMLIonModalElement; new (): HTMLIonModalElement; }; + interface HTMLIonNavElementEventMap { + "ionNavWillLoad": void; + "ionNavWillChange": void; + "ionNavDidChange": void; + } interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonNavElement: { prototype: HTMLIonNavElement; @@ -3729,31 +4019,101 @@ declare global { prototype: HTMLIonNoteElement; new (): HTMLIonNoteElement; }; + interface HTMLIonPickerElementEventMap { + "ionPickerDidPresent": void; + "ionPickerWillPresent": void; + "ionPickerWillDismiss": OverlayEventDetail; + "ionPickerDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + } interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonPickerElement: { prototype: HTMLIonPickerElement; new (): HTMLIonPickerElement; }; + interface HTMLIonPickerColumnElementEventMap { + "ionPickerColChange": PickerColumn; + } interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonPickerColumnElement: { prototype: HTMLIonPickerColumnElement; new (): HTMLIonPickerColumnElement; }; + interface HTMLIonPickerColumnInternalElementEventMap { + "ionChange": PickerColumnItem; + } interface HTMLIonPickerColumnInternalElement extends Components.IonPickerColumnInternal, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonPickerColumnInternalElement: { prototype: HTMLIonPickerColumnInternalElement; new (): HTMLIonPickerColumnInternalElement; }; + interface HTMLIonPickerInternalElementEventMap { + "ionInputModeChange": PickerInternalChangeEventDetail; + } interface HTMLIonPickerInternalElement extends Components.IonPickerInternal, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonPickerInternalElement: { prototype: HTMLIonPickerInternalElement; new (): HTMLIonPickerInternalElement; }; + interface HTMLIonPopoverElementEventMap { + "ionPopoverDidPresent": void; + "ionPopoverWillPresent": void; + "ionPopoverWillDismiss": OverlayEventDetail; + "ionPopoverDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + "ionMount": void; + } interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonPopoverElement: { prototype: HTMLIonPopoverElement; @@ -3765,25 +4125,80 @@ declare global { prototype: HTMLIonProgressBarElement; new (): HTMLIonProgressBarElement; }; + interface HTMLIonRadioElementEventMap { + "ionStyle": StyleEventDetail; + "ionFocus": void; + "ionBlur": void; + } interface HTMLIonRadioElement extends Components.IonRadio, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRadioElement: { prototype: HTMLIonRadioElement; new (): HTMLIonRadioElement; }; + interface HTMLIonRadioGroupElementEventMap { + "ionChange": RadioGroupChangeEventDetail; + "ionValueChange": RadioGroupChangeEventDetail; + } interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRadioGroupElement: { prototype: HTMLIonRadioGroupElement; new (): HTMLIonRadioGroupElement; }; + interface HTMLIonRangeElementEventMap { + "ionChange": RangeChangeEventDetail; + "ionInput": RangeChangeEventDetail; + "ionStyle": StyleEventDetail; + "ionFocus": void; + "ionBlur": void; + "ionKnobMoveStart": RangeKnobMoveStartEventDetail; + "ionKnobMoveEnd": RangeKnobMoveEndEventDetail; + } interface HTMLIonRangeElement extends Components.IonRange, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRangeElement: { prototype: HTMLIonRangeElement; new (): HTMLIonRangeElement; }; + interface HTMLIonRefresherElementEventMap { + "ionRefresh": RefresherEventDetail; + "ionPull": void; + "ionStart": void; + } interface HTMLIonRefresherElement extends Components.IonRefresher, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRefresherElement: { prototype: HTMLIonRefresherElement; @@ -3801,7 +4216,18 @@ declare global { prototype: HTMLIonReorderElement; new (): HTMLIonReorderElement; }; + interface HTMLIonReorderGroupElementEventMap { + "ionItemReorder": ItemReorderEventDetail; + } interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonReorderGroupElement: { prototype: HTMLIonReorderGroupElement; @@ -3813,19 +4239,53 @@ declare global { prototype: HTMLIonRippleEffectElement; new (): HTMLIonRippleEffectElement; }; + interface HTMLIonRouteElementEventMap { + "ionRouteDataChanged": any; + } interface HTMLIonRouteElement extends Components.IonRoute, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRouteElement: { prototype: HTMLIonRouteElement; new (): HTMLIonRouteElement; }; + interface HTMLIonRouteRedirectElementEventMap { + "ionRouteRedirectChanged": any; + } interface HTMLIonRouteRedirectElement extends Components.IonRouteRedirect, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRouteRedirectElement: { prototype: HTMLIonRouteRedirectElement; new (): HTMLIonRouteRedirectElement; }; + interface HTMLIonRouterElementEventMap { + "ionRouteWillChange": RouterEventDetail; + "ionRouteDidChange": RouterEventDetail; + } interface HTMLIonRouterElement extends Components.IonRouter, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRouterElement: { prototype: HTMLIonRouterElement; @@ -3837,7 +4297,20 @@ declare global { prototype: HTMLIonRouterLinkElement; new (): HTMLIonRouterLinkElement; }; + interface HTMLIonRouterOutletElementEventMap { + "ionNavWillLoad": void; + "ionNavWillChange": void; + "ionNavDidChange": void; + } interface HTMLIonRouterOutletElement extends Components.IonRouterOutlet, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonRouterOutletElement: { prototype: HTMLIonRouterOutletElement; @@ -3849,13 +4322,43 @@ declare global { prototype: HTMLIonRowElement; new (): HTMLIonRowElement; }; + interface HTMLIonSearchbarElementEventMap { + "ionInput": SearchbarInputEventDetail; + "ionChange": SearchbarChangeEventDetail; + "ionCancel": void; + "ionClear": void; + "ionBlur": void; + "ionFocus": void; + "ionStyle": StyleEventDetail; + } interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonSearchbarElement: { prototype: HTMLIonSearchbarElement; new (): HTMLIonSearchbarElement; }; + interface HTMLIonSegmentElementEventMap { + "ionChange": SegmentChangeEventDetail; + "ionSelect": SegmentChangeEventDetail; + "ionStyle": StyleEventDetail; + } interface HTMLIonSegmentElement extends Components.IonSegment, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonSegmentElement: { prototype: HTMLIonSegmentElement; @@ -3867,7 +4370,23 @@ declare global { prototype: HTMLIonSegmentButtonElement; new (): HTMLIonSegmentButtonElement; }; + interface HTMLIonSelectElementEventMap { + "ionChange": SelectChangeEventDetail; + "ionCancel": void; + "ionDismiss": void; + "ionFocus": void; + "ionBlur": void; + "ionStyle": StyleEventDetail; + } interface HTMLIonSelectElement extends Components.IonSelect, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonSelectElement: { prototype: HTMLIonSelectElement; @@ -3897,7 +4416,18 @@ declare global { prototype: HTMLIonSpinnerElement; new (): HTMLIonSpinnerElement; }; + interface HTMLIonSplitPaneElementEventMap { + "ionSplitPaneVisible": { visible: boolean }; + } interface HTMLIonSplitPaneElement extends Components.IonSplitPane, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonSplitPaneElement: { prototype: HTMLIonSplitPaneElement; @@ -3909,19 +4439,55 @@ declare global { prototype: HTMLIonTabElement; new (): HTMLIonTabElement; }; + interface HTMLIonTabBarElementEventMap { + "ionTabBarChanged": TabBarChangedEventDetail; + "ionTabBarLoaded": void; + } interface HTMLIonTabBarElement extends Components.IonTabBar, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonTabBarElement: { prototype: HTMLIonTabBarElement; new (): HTMLIonTabBarElement; }; + interface HTMLIonTabButtonElementEventMap { + "ionTabButtonClick": TabButtonClickEventDetail; + } interface HTMLIonTabButtonElement extends Components.IonTabButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonTabButtonElement: { prototype: HTMLIonTabButtonElement; new (): HTMLIonTabButtonElement; }; + interface HTMLIonTabsElementEventMap { + "ionNavWillLoad": void; + "ionTabsWillChange": { tab: string }; + "ionTabsDidChange": { tab: string }; + } interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonTabsElement: { prototype: HTMLIonTabsElement; @@ -3933,7 +4499,22 @@ declare global { prototype: HTMLIonTextElement; new (): HTMLIonTextElement; }; + interface HTMLIonTextareaElementEventMap { + "ionChange": TextareaChangeEventDetail; + "ionInput": TextareaInputEventDetail; + "ionStyle": StyleEventDetail; + "ionBlur": FocusEvent; + "ionFocus": FocusEvent; + } interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonTextareaElement: { prototype: HTMLIonTextareaElement; @@ -3945,19 +4526,62 @@ declare global { prototype: HTMLIonThumbnailElement; new (): HTMLIonThumbnailElement; }; + interface HTMLIonTitleElementEventMap { + "ionStyle": StyleEventDetail; + } interface HTMLIonTitleElement extends Components.IonTitle, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonTitleElement: { prototype: HTMLIonTitleElement; new (): HTMLIonTitleElement; }; + interface HTMLIonToastElementEventMap { + "ionToastDidPresent": void; + "ionToastWillPresent": void; + "ionToastWillDismiss": OverlayEventDetail; + "ionToastDidDismiss": OverlayEventDetail; + "didPresent": void; + "willPresent": void; + "willDismiss": OverlayEventDetail; + "didDismiss": OverlayEventDetail; + } interface HTMLIonToastElement extends Components.IonToast, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonToastElement: { prototype: HTMLIonToastElement; new (): HTMLIonToastElement; }; + interface HTMLIonToggleElementEventMap { + "ionChange": ToggleChangeEventDetail; + "ionFocus": void; + "ionBlur": void; + "ionStyle": StyleEventDetail; + } interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonToggleElement: { prototype: HTMLIonToggleElement; @@ -4975,7 +5599,7 @@ declare namespace LocalJSX { */ "presentation"?: DatetimePresentation; /** - * If `true`, the datetime appears normal but is not interactive. + * If `true`, the datetime appears normal but the selected date cannot be changed. */ "readonly"?: boolean; /** diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 5990489da3..3581c601a8 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -58,19 +58,6 @@ $action-sheet-ios-title-font-weight: 400 !default; /// @prop - Font weight of the action sheet title when it has a sub title $action-sheet-ios-title-with-sub-title-font-weight: 600 !default; -/// @prop - Border width of the action sheet title -$action-sheet-ios-title-border-width: $hairlines-width !default; - -/// @prop - Border style of the action sheet title -$action-sheet-ios-title-border-style: solid !default; - -/// @prop - Border color alpha of the action sheet title -$action-sheet-ios-title-border-color-alpha: .08 !default; - -/// @prop - Border color of the action sheet title -$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default; - - // Action Sheet Subtitle // -------------------------------------------------- @@ -129,9 +116,6 @@ $action-sheet-ios-button-background-selected: var(--ion-colo /// @prop - Destructive text color of the action sheet button $action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; -/// @prop - Background color of the action sheet cancel button -$action-sheet-ios-button-cancel-background: $background-color !default; - /// @prop - Font weight of the action sheet cancel button $action-sheet-ios-button-cancel-font-weight: 600 !default; diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index 64e3c2da5f..c7d945090d 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -84,9 +84,6 @@ $action-sheet-md-button-padding-bottom: $action-sheet-md-button- /// @prop - Padding start of the action sheet button $action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; -/// @prop - Background color of the action sheet button -$action-sheet-md-button-background: transparent !default; - // Action Sheet Icon // -------------------------------------------------- @@ -104,6 +101,3 @@ $action-sheet-md-icon-margin-bottom: 0 !default; /// @prop - Margin start of the icon in the action sheet button $action-sheet-md-icon-margin-start: 0 !default; - -/// @prop - Color of the icon in the action sheet button -$action-sheet-md-icon-color: $action-sheet-md-title-color !default; diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 1c8ff8a660..460c91a8cc 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -142,8 +142,22 @@ background: var(--background); } -.action-sheet-group::-webkit-scrollbar { - display: none; +/** + * Scrollbars on mobile devices will be hidden. + * Users can still scroll the content by swiping. + * If a user has a fine pointing device, such as a + * mouse or trackpad, then scrollbars will be + * visible. This allows users to scroll the + * content with their pointing device. + * Otherwise, the user would have to use the + * keyboard to navigate through the options. + * This may not be intuitive for users who + * are not familiar with keyboard navigation. + */ +@media (any-pointer: coarse) { + .action-sheet-group::-webkit-scrollbar { + display: none; + } } .action-sheet-group-cancel { diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 8378e5e01a..55bdea811e 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -157,9 +157,6 @@ $alert-md-button-text-color: ion-color(primary, base) !default; /// @prop - Background color of the alert button $alert-md-button-background-color: transparent !default; -/// @prop - Background color of the alert activated button -$alert-md-button-background-color-activated: ion-color(primary, base, .04) !default; - /// @prop - Border radius of the alert button $alert-md-button-border-radius: 2px !default; diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 0ff4caf3d8..6fcdd72694 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -91,10 +91,44 @@ overscroll-behavior-y: contain; } -.alert-checkbox-group::-webkit-scrollbar, -.alert-radio-group::-webkit-scrollbar, -.alert-message::-webkit-scrollbar { - display: none; +.alert-checkbox-label, +.alert-radio-label { + /** + * This allows long words to wrap to the next line + * instead of flowing outside of the container. + * + * The "anywhere" keyword should be used instead + * of the "break-word" keyword since the parent + * container is using flexbox. Flex relies on min-content and + * max-content intrinsic sizes to structure the layout. Flex will + * wrap content only until it reaches its min-content intrinsic size + * which in this case is equal to the longest word in this container. + * "break-word" does not shrink the min-content intrinsic size + * of the flex item which causes the long word to still overflow. + * "anywhere" on the other hand does shrink the min-content + * intrinsic size which allows the long word to wrap to the next line. + */ + overflow-wrap: anywhere; +} + +/** + * Scrollbars on mobile devices will be hidden. + * Users can still scroll the content by swiping. + * If a user has a fine pointing device, such as a + * mouse or trackpad, then scrollbars will be + * visible. This allows users to scroll the + * content with their pointing device. + * Otherwise, the user would have to use the + * keyboard to navigate through the options. + * This may not be intuitive for users who + * are not familiar with keyboard navigation. + */ +@media (any-pointer: coarse) { + .alert-checkbox-group::-webkit-scrollbar, + .alert-radio-group::-webkit-scrollbar, + .alert-message::-webkit-scrollbar { + display: none; + } } .alert-input { diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts index 3b2c69ce87..a5e454e758 100644 --- a/core/src/components/alert/test/a11y/alert.e2e.ts +++ b/core/src/components/alert/test/a11y/alert.e2e.ts @@ -28,6 +28,67 @@ const testAria = async ( expect(ariaDescribedBy).toBe(expectedAriaDescribedBy); }; +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('alert: text wrapping'), () => { + test('should break on words and white spaces for radios', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28406', + }); + await page.setContent( + ` + + + + `, + config + ); + + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + const alert = page.locator('ion-alert'); + + await alert.evaluate((el: HTMLIonAlertElement) => el.present()); + await ionAlertDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`)); + }); + test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28406', + }); + await page.setContent( + ` + + + + `, + config + ); + + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + const alert = page.locator('ion-alert'); + + await alert.evaluate((el: HTMLIonAlertElement) => el.present()); + await ionAlertDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`)); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ config, title }) => { test.describe(title('alert: a11y'), () => { test.beforeEach(async ({ page }) => { diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6f15e73829 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a1b2c2690d Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..10ee5c877b Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..83fb54fb47 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e72d336b21 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..23ff47068b Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index fd11019db2..b0fc4731b3 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface } from '@stencil/core'; import { Build, Component, Element, Host, Method, h } from '@stencil/core'; +import type { FocusVisibleUtility } from '@utils/focus-visible'; import { isPlatform } from '@utils/platform'; import { config } from '../../global/config'; @@ -10,7 +11,7 @@ import { getIonMode } from '../../global/ionic-global'; styleUrl: 'app.scss', }) export class App implements ComponentInterface { - private focusVisible?: any; // TODO(FW-2832): type + private focusVisible?: FocusVisibleUtility; @Element() el!: HTMLElement; diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 7794064b10..9b49c47e4c 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -41,28 +41,6 @@ $button-ios-font-size: dynamic-font-max(16px, 3) /// @prop - Font weight of the button text $button-ios-font-weight: 500 !default; -/// @prop - Background color of the button -$button-ios-background-color: ion-color(primary, base) !default; - -/// @prop - Text color of the button -$button-ios-text-color: ion-color(primary, contrast) !default; - -/// @prop - Background color of the activated button -$button-ios-background-color-activated: ion-color(primary, shade) !default; - -/// @prop - Opacity of the activated button -$button-ios-opacity-activated: 1 !default; - -/// @prop - Opacity of the button on hover -$button-ios-opacity-hover: .8 !default; - -/// @prop - Background color of the focused button -$button-ios-background-color-focused: ion-color(primary, shade) !default; - -/// @prop - Opacity of the button when disabled -$button-ios-opacity-disabled: .5 !default; - - // iOS Large Button // -------------------------------------------------- @@ -129,30 +107,6 @@ $button-ios-outline-border-style: solid !default; /// @prop - Border radius of the outline button $button-ios-outline-border-radius: $button-ios-border-radius !default; -/// @prop - Border color of the outline button -$button-ios-outline-border-color: $button-ios-background-color !default; - -/// @prop - Text color of the outline button -$button-ios-outline-text-color: $button-ios-background-color !default; - -/// @prop - Background color of the outline button -$button-ios-outline-background-color: transparent !default; - -/// @prop - Text color of the activated outline button -$button-ios-outline-text-color-activated: ion-color(primary, contrast) !default; - -/// @prop - Background color of the activated outline button -$button-ios-outline-background-color-activated: $button-ios-background-color !default; - -/// @prop - Opacity of the activated outline button -$button-ios-outline-opacity-activated: 1 !default; - -/// @prop - Background color alpha of the focused outline button -$button-ios-outline-background-color-alpha-focused: .25 !default; - -/// @prop - Background color of the focused outline button -$button-ios-outline-background-color-focused: ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default; - // iOS Clear Button // -------------------------------------------------- @@ -167,30 +121,12 @@ $button-ios-clear-font-weight: normal !default; /// @prop - Letter spacing of the button $button-ios-letter-spacing: 0 !default; -/// @prop - Border color of the clear button -$button-ios-clear-border-color: transparent !default; - -/// @prop - Background color of the clear button -$button-ios-clear-background-color: transparent !default; - -/// @prop - Background color of the activated clear button -$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default; - /// @prop - Opacity of the activated clear button $button-ios-clear-opacity-activated: .4 !default; -/// @prop - Text color of the clear button on hover -$button-ios-clear-text-color-hover: $button-ios-background-color !default; - /// @prop - Opacity of the clear button on hover $button-ios-clear-opacity-hover: .6 !default; -/// @prop - Background color alpha of the focused clear button -$button-ios-clear-background-color-alpha-focused: .25 !default; - -/// @prop - Background color of the focused clear button -$button-ios-clear-background-color-focused: ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default; - // iOS Round Button // -------------------------------------------------- diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index 5b2956820d..99f942769a 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -47,18 +47,9 @@ $button-md-letter-spacing: 0.06em; /// @prop - Box shadow of the button $button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; -/// @prop - Opacity of the activated button -$button-md-opacity-activated: 1 !default; - /// @prop - Box shadow of the activated button $button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default; -/// @prop - Background color of the ripple on the button -$button-md-ripple-background-color: $text-color-step-400 !default; - -/// @prop - Opacity of the button when disabled -$button-md-opacity-disabled: .5 !default; - // Material Design Large Button // -------------------------------------------------- @@ -102,82 +93,6 @@ $button-md-small-min-height: 2.1em !default; /// @prop - Font size of the small button $button-md-small-font-size: dynamic-font(13px) !default; - -// Material Design Outline Button -// -------------------------------------------------- - -/// @prop - Border width of the outline button -$button-md-outline-border-width: 1px !default; - -/// @prop - Border style of the outline button -$button-md-outline-border-style: solid !default; - -/// @prop - Background color of the outline button -$button-md-outline-background-color: transparent !default; - -/// @prop - Box shadow of the outline button -$button-md-outline-box-shadow: none !default; - -/// @prop - Background color alpha of the outline button on hover -$button-md-outline-background-color-alpha-hover: .1 !default; - -/// @prop - Background color of the outline button on hover -$button-md-outline-background-color-hover: rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default; - -/// @prop - Background color of the activated outline button -$button-md-outline-background-color-activated: transparent !default; - -/// @prop - Box shadow of the activated outline button -$button-md-outline-box-shadow-activated: none !default; - -/// @prop - Opacity of the activated outline button -$button-md-outline-opacity-activated: 1 !default; - -/// @prop - Background color alpha of the focused outline button -$button-md-outline-background-color-alpha-focused: .1 !default; - -/// @prop - Background color of the focused outline button -$button-md-outline-background-color-focused: ion-color(primary, base, $button-md-outline-background-color-alpha-focused) !default; - -// Material Design Clear Button -// -------------------------------------------------- - -/// @prop - Border color of the clear button -$button-md-clear-border-color: transparent !default; - -/// @prop - Background color of the clear button -$button-md-clear-background-color: transparent !default; - -/// @prop - Box shadow of the clear button -$button-md-clear-box-shadow: none !default; - -/// @prop - Opacity of the clear button -$button-md-clear-opacity: 1 !default; - -/// @prop - Background color alpha of the activated clear button -$button-md-clear-background-color-alpha-activated: .1 !default; - -/// @prop - Background color of the activated clear button -$button-md-clear-background-color-activated: rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default; - -/// @prop - Box shadow of the activated clear button -$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; - -/// @prop - Background color alpha of the clear button on hover -$button-md-clear-background-color-alpha-hover: .1 !default; - -/// @prop - Background color of the clear button on hover -$button-md-clear-background-color-hover: rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default; - -/// @prop - Background color of the ripple on the clear button -$button-md-clear-ripple-background-color: $text-color-step-600 !default; - -/// @props - Background color of the focused clear button -$button-md-clear-background-color-alpha-focused: .1 !default; - -/// @props - Background color of the focused clear button -$button-md-clear-background-color-focused: ion-color(primary, base, $button-md-clear-background-color-alpha-focused) !default; - // Material Design Round Button // -------------------------------------------------- diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index 500d0ff25e..dd90abd3f8 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -8,21 +8,12 @@ /// @prop - Background color of the checkbox when off $checkbox-ios-background-color-off: $item-ios-background !default; -/// @prop - Background color of the checkbox when on -$checkbox-ios-background-color-on: ion-color(primary, base) !default; - -/// @prop - Background color of focus indicator for checkbox when focused -$checkbox-ios-background-color-focused: ion-color(primary, tint) !default; - /// @prop - Size of the checkbox icon $checkbox-ios-icon-size: dynamic-font-max(26px, 2.538) !default; /// @prop - Border color of the checkbox icon when off $checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default; -/// @prop - Border color of the checkbox icon when on -$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default; - /// @prop - Border width of the checkbox icon $checkbox-ios-icon-border-width: dynamic-font(1px) !default; @@ -32,27 +23,6 @@ $checkbox-ios-icon-border-style: solid !default; /// @prop - Border radius of the checkbox icon $checkbox-ios-icon-border-radius: 50% !default; -/// @prop - Width of the checkmark border in the checkbox -$checkbox-ios-checkmark-border-width: 1px !default; - -/// @prop - Style of the checkmark border in the checkbox -$checkbox-ios-checkmark-border-style: solid !default; - -/// @prop - Color of the checkmark border in the checkbox -$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default; - -/// @prop - Top of the checkmark in the checkbox -$checkbox-ios-checkmark-top: calc($checkbox-ios-icon-size / 6) !default; - -/// @prop - Start of the checkmark in the checkbox -$checkbox-ios-checkmark-start: calc($checkbox-ios-icon-size / 3 + 1px) !default; - -/// @prop - Width of the checkmark in the checkbox -$checkbox-ios-checkmark-width: calc($checkbox-ios-icon-size / 6 + 1px) !default; - -/// @prop - Height of the checkmark in the checkbox -$checkbox-ios-checkmark-height: calc($checkbox-ios-icon-size * 0.5) !default; - /// @prop - Opacity of the disabled checkbox $checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index 28ab2d9b5c..307ba249cb 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -10,41 +10,20 @@ $checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !defa /// @prop - Background color of the checkbox icon when off $checkbox-md-icon-background-color-off: $item-md-background !default; -/// @prop - Background color of focus indicator for checkbox when focused -$checkbox-md-background-color-focused: ion-color(primary, tint) !default; - -/// @prop - Background color of the checkbox icon when on -$checkbox-md-icon-background-color-on: ion-color(primary, base) !default; - /// @prop - Size of the checkbox icon /// The icon size does not use dynamic font /// because it does not scale in native. $checkbox-md-icon-size: 18px !default; -/// @prop - Width of the checkbox icon checkmark -$checkbox-md-icon-checkmark-width: 2px !default; - -/// @prop - Style of the checkbox icon checkmark -$checkbox-md-icon-checkmark-style: solid !default; - -/// @prop - Color of the checkbox icon checkmark -$checkbox-md-icon-checkmark-color: ion-color(primary, contrast) !default; - /// @prop - Border width of the checkbox icon $checkbox-md-icon-border-width: 2px !default; /// @prop - Border style of the checkbox icon $checkbox-md-icon-border-style: solid !default; -/// @prop - Border radius of the checkbox icon -$checkbox-md-icon-border-radius: 2px !default; - /// @prop - Border color of the checkbox icon when off $checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default; -/// @prop - Border color of the checkbox icon when on -$checkbox-md-icon-border-color-on: ion-color(primary, base) !default; - /// @prop - Transition duration of the checkbox $checkbox-md-transition-duration: 180ms !default; diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index cd6b3f92a2..4cb8ad9db1 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -7,15 +7,6 @@ $datetime-ios-border-color: 0.55px solid $background-color-step-200 !def /// @prop - Padding for content $datetime-ios-padding: 16px !default; -/// @prop - Height of the time picker -$datetime-ios-time-height: 28px !default; - -/// @prop - Width of the time picker -$datetime-ios-time-width: 68px !default; - -/// @prop - Border radius of the time picker -$datetime-ios-time-border-radius: 8px !default; - /// @prop - The font size at which layouts may change to accommodate Dynamic Type $datetime-dynamic-font-breakpoint: 24px !default; diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index b1d15e3173..6fd063dbdc 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -1,4 +1,4 @@ -@import "./datetime.vars"; +@import "../../themes/ionic.globals"; // Datetime // -------------------------------------------------- @@ -185,13 +185,37 @@ ion-picker-column-internal { display: none; } -:host(.datetime-readonly), :host(.datetime-disabled) { pointer-events: none; + + .calendar-days-of-week, + .datetime-time { + opacity: 0.4; + } } -:host(.datetime-disabled) { - opacity: 0.4; +:host(.datetime-readonly) { + pointer-events: none; + + /** + * Allow user to navigate months + * while in readonly mode + */ + .calendar-action-buttons, + .calendar-body, + .datetime-year { + pointer-events: initial; + } + + /** + * Disabled buttons should have full opacity + * in readonly mode + */ + + .calendar-day[disabled]:not(.calendar-day-constrained), + .datetime-action-buttons ion-button[disabled] { + opacity: 1; + } } /** diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 62ba8755d3..cdf3859715 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -172,7 +172,7 @@ export class Datetime implements ComponentInterface { @Prop() disabled = false; /** - * If `true`, the datetime appears normal but is not interactive. + * If `true`, the datetime appears normal but the selected date cannot be changed. */ @Prop() readonly = false; @@ -599,6 +599,14 @@ export class Datetime implements ComponentInterface { }; private setActiveParts = (parts: DatetimeParts, removeDate = false) => { + /** if the datetime component is in readonly mode, + * allow browsing of the calendar without changing + * the set value + */ + if (this.readonly) { + return; + } + const { multiple, minParts, maxParts, activeParts } = this; /** @@ -1414,7 +1422,13 @@ export class Datetime implements ComponentInterface { */ private renderFooter() { - const { showDefaultButtons, showClearButton } = this; + const { disabled, readonly, showDefaultButtons, showClearButton } = this; + /** + * The cancel, clear, and confirm buttons + * should not be interactive if the datetime + * is disabled or readonly. + */ + const isButtonDisabled = disabled || readonly; const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) { return; @@ -1444,18 +1458,33 @@ export class Datetime implements ComponentInterface { {showDefaultButtons && ( - this.cancel(true)}> + this.cancel(true)} + disabled={isButtonDisabled} + > {this.cancelText} )}
{showClearButton && ( - clearButtonClick()}> + clearButtonClick()} + disabled={isButtonDisabled} + > {this.clearText} )} {showDefaultButtons && ( - this.confirm(true)}> + this.confirm(true)} + disabled={isButtonDisabled} + > {this.doneText} )} @@ -1957,11 +1986,12 @@ export class Datetime implements ComponentInterface { */ private renderCalendarHeader(mode: Mode) { + const { disabled } = this; const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp; const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp; - const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts); - const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts); + const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts); + const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts); // don't use the inheritAttributes util because it removes dir from the host, and we still need that const hostDir = this.el.getAttribute('dir') || undefined; @@ -1977,6 +2007,7 @@ export class Datetime implements ComponentInterface { aria-label="Show year picker" detail={false} lines="none" + disabled={disabled} onClick={() => { this.toggleMonthAndYearView(); /** @@ -2043,23 +2074,28 @@ export class Datetime implements ComponentInterface { ); } private renderMonth(month: number, year: number) { + const { disabled, readonly } = this; + const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year); const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month); const isCalMonthDisabled = !yearAllowed || !monthAllowed; - const swipeDisabled = isMonthDisabled( - { - month, - year, - day: null, - }, - { - // The day is not used when checking if a month is disabled. - // Users should be able to access the min or max month, even if the - // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled). - minParts: { ...this.minParts, day: null }, - maxParts: { ...this.maxParts, day: null }, - } - ); + const isDatetimeDisabled = disabled || readonly; + const swipeDisabled = + disabled || + isMonthDisabled( + { + month, + year, + day: null, + }, + { + // The day is not used when checking if a month is disabled. + // Users should be able to access the min or max month, even if the + // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled). + minParts: { ...this.minParts, day: null }, + maxParts: { ...this.maxParts, day: null }, + } + ); // The working month should never have swipe disabled. // Otherwise the CSS scroll snap will not work and the user // can free-scroll the calendar. @@ -2083,7 +2119,14 @@ export class Datetime implements ComponentInterface { const { el, highlightedDates, isDateEnabled, multiple } = this; const referenceParts = { month, day, year }; const isCalendarPadding = day === null; - const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState( + const { + isActive, + isToday, + ariaLabel, + ariaSelected, + disabled: isDayDisabled, + text, + } = getCalendarDayState( this.locale, referenceParts, this.activeParts, @@ -2094,7 +2137,8 @@ export class Datetime implements ComponentInterface { ); const dateIsoString = convertDataToISO(referenceParts); - let isCalDayDisabled = isCalMonthDisabled || disabled; + + let isCalDayDisabled = isCalMonthDisabled || isDayDisabled; if (!isCalDayDisabled && isDateEnabled !== undefined) { try { @@ -2113,6 +2157,15 @@ export class Datetime implements ComponentInterface { } } + /** + * Some days are constrained through max & min or allowed dates + * and also disabled because the component is readonly or disabled. + * These need to be displayed differently. + */ + const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled; + + const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled; + let dateStyle: DatetimeHighlightStyle | undefined = undefined; /** @@ -2158,11 +2211,12 @@ export class Datetime implements ComponentInterface { data-year={year} data-index={index} data-day-of-week={dayOfWeek} - disabled={isCalDayDisabled} + disabled={isButtonDisabled} class={{ 'calendar-day-padding': isCalendarPadding, 'calendar-day': true, 'calendar-day-active': isActive, + 'calendar-day-constrained': isCalDayConstrained, 'calendar-day-today': isToday, }} part={dateParts} @@ -2237,7 +2291,7 @@ export class Datetime implements ComponentInterface { } private renderTimeOverlay() { - const { hourCycle, isTimePopoverOpen, locale } = this; + const { disabled, hourCycle, isTimePopoverOpen, locale } = this; const computedHourCycle = getHourCycle(locale, hourCycle); const activePart = this.getActivePartsWithFallback(); @@ -2251,6 +2305,7 @@ export class Datetime implements ComponentInterface { part={`time-button${isTimePopoverOpen ? ' active' : ''}`} aria-expanded="false" aria-haspopup="true" + disabled={disabled} onClick={async (ev) => { const { popoverRef } = this; diff --git a/core/src/components/datetime/datetime.vars.scss b/core/src/components/datetime/datetime.vars.scss deleted file mode 100644 index 501967bb0b..0000000000 --- a/core/src/components/datetime/datetime.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Datetime -// -------------------------------------------------- - -/// @prop - Minimum width of the datetime -$datetime-min-width: 16px !default; - -/// @prop - Minimum height of the datetime -$datetime-min-height: 1.2em !default; diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts b/core/src/components/datetime/test/a11y/datetime.e2e.ts index 8ebc6bb87f..5f4e5ff9e3 100644 --- a/core/src/components/datetime/test/a11y/datetime.e2e.ts +++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts @@ -30,3 +30,102 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * This behavior does not differ across + * modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('datetime: a11y'), () => { + test('datetime should be keyboard navigable', async ({ page, browserName }) => { + await page.setContent( + ` + + `, + config + ); + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + + const datetime = page.locator('ion-datetime'); + const monthYearButton = page.locator('.calendar-month-year ion-item'); + const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)'); + const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)'); + + await page.keyboard.press(tabKey); + await expect(monthYearButton).toBeFocused(); + + await page.keyboard.press(tabKey); + await expect(prevButton).toBeFocused(); + + await page.keyboard.press(tabKey); + await expect(nextButton).toBeFocused(); + + // check value before & after selecting via keyboard + const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + expect(initialValue).toBe('2022-02-22T16:30:00'); + + await page.keyboard.press(tabKey); + await page.waitForChanges(); + + await page.keyboard.press('ArrowLeft'); + await page.waitForChanges(); + + await page.keyboard.press('Enter'); + + await page.waitForChanges(); + + const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + expect(newValue).not.toBe('2022-02-22T16:30:00'); + }); + + test('buttons should be keyboard navigable', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + + const clearButton = page.locator('#clear-button button'); + const selectedDay = page.locator('.calendar-day-active'); + + await expect(selectedDay).toHaveText('22'); + + await clearButton.focus(); + await page.waitForChanges(); + + await expect(clearButton).toBeFocused(); + await page.keyboard.press('Enter'); + + await page.waitForChanges(); + + await expect(selectedDay).toHaveCount(0); + }); + + test('should navigate through months via right arrow key', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + const calendarBody = page.locator('.calendar-body'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + await calendarBody.focus(); + await page.waitForChanges(); + + await page.keyboard.press('ArrowRight'); + await page.waitForChanges(); + + await expect(calendarMonthYear).toHaveText('March 2022'); + }); + }); +}); diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts b/core/src/components/datetime/test/disabled/datetime.e2e.ts new file mode 100644 index 0000000000..d794a2d2ef --- /dev/null +++ b/core/src/components/datetime/test/disabled/datetime.e2e.ts @@ -0,0 +1,103 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not differ across + * modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('datetime: disabled'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`)); + }); + + test('date should be disabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + + const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`); + + await expect(febFirstButton).toBeDisabled(); + }); + + test('month-year button should be disabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + await expect(calendarMonthYear.locator('button')).toBeDisabled(); + }); + + test('next and prev buttons should be disabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button'); + const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button'); + + await expect(prevMonthButton).toBeDisabled(); + await expect(nextMonthButton).toBeDisabled(); + }); + + test('clear button should be disabled', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + + const clearButton = page.locator('#clear-button button'); + + await expect(clearButton).toBeDisabled(); + }); + + test('should not navigate through months via right arrow key', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + const calendarBody = page.locator('.calendar-body'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + await calendarBody.focus(); + await page.waitForChanges(); + + await page.keyboard.press('ArrowRight'); + await page.waitForChanges(); + + await expect(calendarMonthYear).toHaveText('February 2022'); + }); + }); +}); diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ebc36556d8 Binary files /dev/null and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..31622a2c52 Binary files /dev/null and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3581bacc25 Binary files /dev/null and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/disabled/index.html b/core/src/components/datetime/test/disabled/index.html new file mode 100644 index 0000000000..764d3a42ca --- /dev/null +++ b/core/src/components/datetime/test/disabled/index.html @@ -0,0 +1,77 @@ + + + + + Datetime - Disabled + + + + + + + + + + + + Datetime - Disabled + + + +
+
+

Inline - Default Value

+ +
+ +
+

Inline

+ +
+ +
+

Inline - No Default Value

+ +
+
+ + + + + diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts b/core/src/components/datetime/test/readonly/datetime.e2e.ts new file mode 100644 index 0000000000..f157bd36e3 --- /dev/null +++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts @@ -0,0 +1,167 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not differ across + * modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('datetime: readonly'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`)); + }); + + test('date should be disabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + + const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`); + + await expect(febFirstButton).toBeDisabled(); + }); + + test('should navigate months via month-year button', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionChange = await page.spyOnEvent('ionChange'); + await page.waitForSelector('.datetime-ready'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + await calendarMonthYear.click(); + await page.waitForChanges(); + await page.locator('.month-column .picker-item[data-value="3"]').click(); + await page.waitForChanges(); + await expect(calendarMonthYear).toHaveText('March 2022'); + + await expect(ionChange).not.toHaveReceivedEvent(); + }); + + test('should open picker using keyboard navigation', async ({ page, browserName }) => { + await page.setContent( + ` + + `, + config + ); + + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + + await page.waitForSelector('.datetime-ready'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + const monthYearButton = page.locator('.calendar-month-year ion-item'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + await page.keyboard.press(tabKey); + await expect(monthYearButton).toBeFocused(); + await page.waitForChanges(); + + await page.keyboard.press('Enter'); + await page.waitForChanges(); + + const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]'); + await expect(marchPickerItem).toBeVisible(); + }); + + test('should view next month via next button', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionChange = await page.spyOnEvent('ionChange'); + + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button'); + await nextMonthButton.click(); + await page.waitForChanges(); + + await expect(calendarMonthYear).toHaveText('March 2022'); + await expect(ionChange).not.toHaveReceivedEvent(); + }); + + test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => { + await page.setContent( + ` + + `, + config + ); + + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + + const datetime = page.locator('ion-datetime'); + const monthYearButton = page.locator('.calendar-month-year ion-item'); + const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)'); + const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + + await page.keyboard.press(tabKey); + await expect(monthYearButton).toBeFocused(); + + await page.keyboard.press(tabKey); + await expect(prevButton).toBeFocused(); + + await page.keyboard.press(tabKey); + await expect(nextButton).toBeFocused(); + + // check value before & after selecting via keyboard + const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + expect(initialValue).toBe('2022-02-22T16:30:00'); + await expect(calendarMonthYear).toHaveText('February 2022'); + + await page.keyboard.press(tabKey); + await page.waitForChanges(); + + await page.keyboard.press('ArrowLeft'); + await page.waitForChanges(); + + await expect(calendarMonthYear).toHaveText('January 2022'); + await page.keyboard.press('Enter'); + await page.waitForChanges(); + + const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + // should not have changed + expect(newValue).toBe('2022-02-22T16:30:00'); + }); + + test('clear button should be disabled', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + await page.waitForSelector('.datetime-ready'); + + const clearButton = page.locator('#clear-button button'); + + await expect(clearButton).toBeDisabled(); + }); + }); +}); diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b82687e373 Binary files /dev/null and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..176a846fad Binary files /dev/null and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f58f00143a Binary files /dev/null and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/readonly/index.html b/core/src/components/datetime/test/readonly/index.html new file mode 100644 index 0000000000..2af9a2e477 --- /dev/null +++ b/core/src/components/datetime/test/readonly/index.html @@ -0,0 +1,83 @@ + + + + + Datetime - Readonly + + + + + + + + + + + + Datetime - Readonly + + + +
+
+

Inline

+ +
+ +
+

Inline - No Default Value

+ +
+
+ + + + + diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index 5c5e6c2d52..edd4f572a0 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/core/src/components/fab-button/fab-button.md.vars.scss @@ -12,9 +12,6 @@ $fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, . /// @prop - Background color of the button $fab-md-background-color: ion-color(primary, base) !default; -/// @prop - Background color of the activated button -$fab-md-background-color-activated: ion-color(primary, contrast) !default; - /// @prop - Text color of the button $fab-md-text-color: ion-color(primary, contrast) !default; diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index 73fc4b375d..227c4b0f37 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -23,15 +23,29 @@ } :host(.fab-horizontal-start) { - @include position-horizontal( - calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null - ); + /* stylelint-disable */ + @include ltr() { + left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)); + } + + @include rtl() { + right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px)); + left: unset; + } + /* stylelint-enable */ } :host(.fab-horizontal-end) { - @include position-horizontal( - null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px)) - ); + /* stylelint-disable */ + @include ltr() { + right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px)); + } + + @include rtl() { + left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)); + right: unset; + } + /* stylelint-enable */ } diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts b/core/src/components/fab/test/safe-area/fab.e2e.ts new file mode 100644 index 0000000000..cde83ec4cc --- /dev/null +++ b/core/src/components/fab/test/safe-area/fab.e2e.ts @@ -0,0 +1,72 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('fab: safe area'), () => { + test('should ignore document direction in safe area positioning for start-positioned fab', async ({ page }) => { + await page.setContent( + ` + + + + + + + + + + `, + config + ); + + /** + * We need to capture the entire page to check the fab's position, + * but we don't need much extra white space. + */ + await page.setViewportSize({ + width: 200, + height: 200, + }); + + await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-start')); + }); + + test('should ignore document direction in safe area positioning for end-positioned fab', async ({ page }) => { + await page.setContent( + ` + + + + + + + + + + `, + config + ); + + /** + * We need to capture the entire page to check the fab's position, + * but we don't need much extra white space. + */ + await page.setViewportSize({ + width: 200, + height: 200, + }); + + await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-end')); + }); + }); +}); diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..531c61bf42 Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d46960e64e Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..06502d85e1 Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cbb0dce57f Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4c35d2c98b Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f049c7f63b Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cbb0dce57f Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4c35d2c98b Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f049c7f63b Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..531c61bf42 Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d46960e64e Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..06502d85e1 Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index e52fb443c6..90ae0c842f 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -28,24 +28,6 @@ height: 18px; } -// Input Wrapper -// ---------------------------------------------------------------- - -:host(:not(.legacy-input)) { - min-height: 44px; -} - -/** - * Since the label sits on top of the element, - * the component needs to be taller otherwise the - * label will appear too close to the input text. - */ -:host(.input-label-placement-floating), -:host(.input-label-placement-stacked) { - min-height: 56px; -} - - // Input - Disabled // ---------------------------------------------------------------- // The input, label, helper text, char counter and placeholder diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 46b35176f7..2d6de0d507 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -19,59 +19,5 @@ $input-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Margin start of the input $input-ios-padding-start: 0 !default; -/// @prop - Margin start of the input when it is after a label -$input-ios-by-label-margin-start: $item-ios-padding-start !default; - -/// @prop - Padding top of the inset input -$input-ios-inset-padding-top: ($item-ios-padding-top * 0.5) !default; - -/// @prop - Padding end of the inset input -$input-ios-inset-padding-end: ($item-ios-padding-end * 0.5) !default; - -/// @prop - Padding bottom of the inset input -$input-ios-inset-padding-bottom: ($item-ios-padding-bottom * 0.5) !default; - -/// @prop - Padding start of the inset input -$input-ios-inset-padding-start: ($item-ios-padding-start * 0.5) !default; - -/// @prop - Margin top of the inset input -$input-ios-inset-margin-top: ($item-ios-padding-top * 0.5) !default; - -/// @prop - Margin end of the inset input -$input-ios-inset-margin-end: $item-ios-padding-end !default; - -/// @prop - Margin bottom of the inset input -$input-ios-inset-margin-bottom: ($item-ios-padding-bottom * 0.5) !default; - -/// @prop - Margin start of the inset input -$input-ios-inset-margin-start: 0 !default; - -/// @prop - Width of the icon used to clear the input -$input-ios-input-clear-icon-width: 30px !default; - -/// @prop - Padding end of the input with clear input -$input-ios-input-clear-padding-end: ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default; - -/// @prop - Placeholder Text color of the input -$input-ios-placeholder-color: $placeholder-text-color !default; - -/// @prop - Show the focus highlight when the input has focus -$input-ios-show-focus-highlight: false !default; - -/// @prop - Show the valid highlight when it is valid and has a value -$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default; - -/// @prop - Show the invalid highlight when it is invalid and has value -$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; - -/// @prop - Color of the input highlight -$input-ios-highlight-color: ion-color(primary, base) !default; - -/// @prop - Color of the input highlight when valid -$input-ios-highlight-color-valid: ion-color(success, base) !default; - -/// @prop - Color of the input highlight when invalid -$input-ios-highlight-color-invalid: ion-color(danger, base) !default; - /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input $input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index 0833867655..4a1abfbbdc 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -8,6 +8,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } :host(.input-fill-outline.input-shape-round) { diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 46241740e0..4c5d990674 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -60,13 +60,6 @@ letter-spacing: .0333333333em; } -// Input Wrapper -// ---------------------------------------------------------------- - -:host(:not(.legacy-input)) { - min-height: 56px; -} - // Input Label // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss index 125b1cf00a..5765f764ba 100644 --- a/core/src/components/input/input.md.solid.scss +++ b/core/src/components/input/input.md.solid.scss @@ -9,6 +9,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } /** diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index e52e24bc0d..b3bc7c6540 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -19,54 +19,6 @@ $input-md-padding-bottom: 10px !default; /// @prop - Margin start of the input $input-md-padding-start: ($item-md-padding-start * 0.5) !default; -/// @prop - Width of the icon used to clear the input -$input-md-input-clear-icon-width: 30px !default; - -/// @prop - Placeholder Text color of the input -$input-md-placeholder-color: $placeholder-text-color !default; - -/// @prop - Show the focus highlight when the input has focus -$input-md-show-focus-highlight: true !default; - -/// @prop - Show the valid highlight when it is valid and has a value -$input-md-show-valid-highlight: $input-md-show-focus-highlight !default; - -/// @prop - Show the invalid highlight when it is invalid and has value -$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default; - -/// @prop - Color of the input highlight -$input-md-highlight-color: ion-color(primary, base) !default; - -/// @prop - Color of the input highlight when valid -$input-md-highlight-color-valid: ion-color(success, base) !default; - -/// @prop - Color of the input highlight when invalid -$input-md-highlight-color-invalid: ion-color(danger, base) !default; - -/// @prop - Padding top of the inset input -$input-md-inset-padding-top: ($item-md-padding-top * 0.5) !default; - -/// @prop - Padding end of the inset input -$input-md-inset-padding-end: 0 !default; - -/// @prop - Padding bottom of the inset input -$input-md-inset-padding-bottom: ($item-md-padding-bottom * 0.5) !default; - -/// @prop - Padding start of the inset input -$input-md-inset-padding-start: ($item-md-padding-start * 0.5) !default; - -/// @prop - Margin top of the inset input -$input-md-inset-margin-top: ($item-md-padding-top * 0.5) !default; - -/// @prop - Margin end of the inset input -$input-md-inset-margin-end: $item-md-padding-end !default; - -/// @prop - Margin bottom of the inset input -$input-md-inset-margin-bottom: ($item-md-padding-bottom * 0.5) !default; - -/// @prop - Margin start of the inset input -$input-md-inset-margin-start: $item-md-padding-start !default; - /// @prop - The amount of whitespace to display on either side of the floating label $input-md-floating-label-padding: 4px !default; diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 84688d8090..d8aab456d5 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -101,6 +101,23 @@ --highlight-color-focused: #{current-color(base)}; } +// Input Wrapper +// ---------------------------------------------------------------- + +:host(:not(.legacy-input)) { + min-height: 44px; +} + +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the input text. + */ +:host(.input-label-placement-floating), +:host(.input-label-placement-stacked) { + min-height: 56px; +} + // Native Text Input // -------------------------------------------------- diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 4a6e50723c..0021402242 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -3,7 +3,13 @@ import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, for import type { LegacyFormController, NotchController } from '@utils/forms'; import { createLegacyFormController, createNotchController } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; -import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers'; +import { + inheritAriaAttributes, + debounceEvent, + findItemLabel, + inheritAttributes, + componentOnReady, +} from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; import type { SlotMutationController } from '@utils/slot-mutation-controller'; @@ -430,7 +436,14 @@ export class Input implements ComponentInterface { * Returns the native `` element used under the hood. */ @Method() - getInputElement(): Promise { + async getInputElement(): Promise { + /** + * If this gets called in certain early lifecycle hooks (ex: Vue onMounted), + * nativeInput won't be defined yet with the custom elements build, so wait for it to load in. + */ + if (!this.nativeInput) { + await new Promise((resolve) => componentOnReady(this.el, resolve)); + } return Promise.resolve(this.nativeInput!); } diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png index 65be23493c..09fea79532 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png index 36c802d5c7..2d044ccb6e 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png index b5374e6c75..5a8946cdd4 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png index 44dac45881..39811e878a 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png index 873133baf6..09dc4838fa 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png index 7ec1b3e2cd..35416826b8 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png index 02e228bcdb..af135dec1f 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png index 731295dbc6..293eea6879 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png index 8b1f986077..b5013187cc 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png index 09cfdfb493..ee9f94f27a 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png index 8f107faa71..affaa002db 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png index a50cc24361..9d9a0a9e0a 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png index 2e08a9b3d5..a614f27097 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png index 955e8dc2a5..c0e4925ba8 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png index 5f3095b8c4..b92c10f199 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png index 553a659517..f6e00e3713 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png index 22f6f67195..bde4f77ae4 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png index aba63937f0..650030100c 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png index 6ebf6bf85e..7c6a0b0ac5 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png index 93928a8da2..61c3eed44e 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png index 26e4b09f9b..ca21291fba 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png index bdf5aaefc2..04b0bcaccc 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png index 82b62de800..0bbe3a20f0 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png index ef4062680a..be88323cba 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png index b13e525565..4a78008576 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png index 92d8ae195f..01604d681f 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png index 646e570375..36b09deadc 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png index 5cf4666f09..52ce85968b 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png index ea713b3b4b..873a5261f8 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png index 6717c97232..2c9fe1f41a 100644 Binary files a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Chrome-linux.png index b531d3b2b2..1a593569f4 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Firefox-linux.png index 0cfd62e58a..3dd9852521 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Safari-linux.png index 13f559dfd4..213edfb78a 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-focus-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png index a7e1a831a2..4d7ceb1ee4 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png index c5bde271b0..ebb0ff8652 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Safari-linux.png index 8954afc9e2..aac560b3a9 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png index 890379a1fd..3b1afe3073 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png index fb60a4da11..9dfa5ed8c9 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png index 930ffc0bf5..44acd57965 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png index 49b4180059..8872e4017f 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png index e5213a1a49..2f660564ba 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png index e1b4284c65..5dc3486025 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png index 179aad6f16..1fdfa5a47a 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png index ebfade0882..71be92b802 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png index bfb09ba15d..eac248ccaa 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png index 0f10fadba7..b4b61e2832 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png index daa4ee2c31..996033df64 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png index 8762a31b9b..bb893be2ad 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png index 0930b8ccd2..3db736dad9 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png index a56e91d1ee..6600c7ffe0 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png index 9266c0909f..872fb5458b 100644 Binary files a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png index 1dcf2292d5..564b3f331d 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png index 259c9dbf1b..5db272ac0e 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png index 0a6d33ff5a..3a08694e97 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png index 1dcf2292d5..564b3f331d 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png index 259c9dbf1b..5db272ac0e 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png index 0a6d33ff5a..3a08694e97 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png index 1a2e1d383c..d307d295fc 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png index b0e85b6ebd..9fda13dce3 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png index 3b77a4854d..eaf54a3ceb 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png index 63e447c120..a5b4a3afcf 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png index 1d0a0f3d1b..4e0d1dd07e 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png index e06bb8418a..78ac539ab9 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png index c5641642fa..719ccde626 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png index 0d4599b598..2f6a71063c 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png index e3c4c1b00e..434c31c18e 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png index c98df204b4..7abaa4319d 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png index 6b66768161..af5c6167de 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png index 8324e1326a..3e34b8a387 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png index 2d482ebc73..634731b06f 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png index 368106e8a1..8af41dbaaa 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png index 7b5a5aa664..cf1f7beb5b 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png index e53b64bbdc..359495105a 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png index 517c4a5a6b..787045f2ee 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png index f7f6fadb27..3efe174150 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png index 6e4e78acea..19d52f1e81 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png index 0be3488fec..1597823d1d 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png index bcd59b82f7..3a6ab73a5e 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png index 6fabd9f930..29c44aaa1e 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png index 77bef600d3..971d97857d 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png index 03c6263e93..6581371cea 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 1c6fc63f86..23d8f06858 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -1,4 +1,4 @@ -@import "./item-divider.vars"; +@import "../../themes/ionic.globals"; // Item Divider diff --git a/core/src/components/item-divider/item-divider.vars.scss b/core/src/components/item-divider/item-divider.vars.scss deleted file mode 100644 index 40747d65ea..0000000000 --- a/core/src/components/item-divider/item-divider.vars.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Item Divider -// -------------------------------------------------- - -/// @prop - Minimum height for the divider -$item-divider-min-height: 30px !default; diff --git a/core/src/components/item-option/item-option.ios.vars.scss b/core/src/components/item-option/item-option.ios.vars.scss index 7dbdd4d54c..5c63226dc4 100644 --- a/core/src/components/item-option/item-option.ios.vars.scss +++ b/core/src/components/item-option/item-option.ios.vars.scss @@ -5,12 +5,3 @@ /// @prop - Font size of the item option button $item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default; - -/// @prop - Background color of the item option button -$item-option-button-ios-background-color: ion-color(primary, base) !default; - -/// @prop - Text color of the item option button -$item-option-button-ios-text-color: ion-color(primary, contrast) !default; - -/// @prop - color of the item option button icon -$item-option-button-ios-icon-color: ion-color(primary, contrast) !default; diff --git a/core/src/components/item-option/item-option.md.vars.scss b/core/src/components/item-option/item-option.md.vars.scss index 611f73ccc5..3e27b73ccf 100644 --- a/core/src/components/item-option/item-option.md.vars.scss +++ b/core/src/components/item-option/item-option.md.vars.scss @@ -5,12 +5,3 @@ /// @prop - Font size of the sliding option button $item-option-button-md-font-size: dynamic-font(14px) !default; - -/// @prop - Background color of the sliding option button -$item-option-button-md-background-color: ion-color(primary, base) !default; - -/// @prop - Text color of the sliding option button -$item-option-button-md-text-color: ion-color(primary, contrast) !default; - -/// @prop - color of the sliding option button icon -$item-option-button-md-icon-color: ion-color(primary, contrast) !default; diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png index c9f7034c52..8a0f2bd41a 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png index edb97fa14a..00d80cf6a1 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png index 7a0b3c04ca..b427231d98 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png index 4fdf0ad75a..91d2a9aaa5 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png index 9473f2c20c..498c2881bf 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png index 59ca54af36..e2e0ea77c1 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 0ad87711c5..6fb565fe69 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -36,9 +36,6 @@ $item-ios-avatar-height: $item-ios-avatar-width !default; /// @prop - Size of the thumbnail in the item $item-ios-thumbnail-size: 56px !default; -/// @prop - Color of the detail arrow icon -$item-ios-detail-icon-color: $item-ios-border-color !default; - /// @prop - Padding top for the item content $item-ios-padding-top: 10px !default; @@ -60,9 +57,6 @@ $item-ios-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed $item-ios-border-bottom-color: $item-ios-border-color !default; -/// @prop - Border bottom for the item -$item-ios-border-bottom: $item-ios-border-bottom-width $item-ios-border-bottom-style $item-ios-border-bottom-color !default; - /// @prop - Color of the item input highlight $item-ios-input-highlight-color: ion-color(primary, base) !default; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index c85f21f666..147c416380 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -21,9 +21,6 @@ $item-md-avatar-height: $item-md-avatar-width !default; /// @prop - Size of the thumbnail in the item $item-md-thumbnail-size: 56px !default; -/// @prop - Color of the detail arrow icon -$item-md-detail-icon-color: $item-md-border-color !default; - /// @prop - Padding top for the item content $item-md-padding-top: 10px !default; @@ -45,9 +42,6 @@ $item-md-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed $item-md-border-bottom-color: $item-md-border-color !default; -/// @prop - Border bottom for the item when lines are displayed -$item-md-border-bottom: $item-md-border-bottom-width $item-md-border-bottom-style $item-md-border-color !default; - // Item Input // -------------------------------------------------- @@ -75,9 +69,6 @@ $item-md-input-fill-border-color: $background-color-step-500 !default; /// @prop - Color of the item border when `fill` is set and hovered $item-md-input-fill-border-color-hover: $background-color-step-750 !default; -/// @prop - Color of the item input counter -$item-md-input-counter-color: rgba(0, 0, 0, .6) !default; - /// @prop - Letter spacing of the item input counter $item-md-input-counter-letter-spacing: .0333333333em !default; diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 229cdaa067..2fd10f3b61 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -203,14 +203,21 @@ .item-native { @include border-radius(var(--border-radius)); @include margin(0); - @include padding( - var(--padding-top), - var(--padding-end), - var(--padding-bottom), - calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) - ); + @include padding(var(--padding-top), null, var(--padding-bottom)); @include text-inherit(); + /* stylelint-disable */ + @include ltr() { + padding-right: var(--padding-end); + padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); + } + + @include rtl() { + padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px)); + padding-left: var(--padding-end); + } + /* stylelint-enable */ + display: flex; position: relative; @@ -272,12 +279,19 @@ button, a { .item-inner { @include margin(0); - @include padding( - var(--inner-padding-top), - calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)), - var(--inner-padding-bottom), - var(--inner-padding-start) - ); + @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom)); + + /* stylelint-disable */ + @include ltr() { + padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)); + padding-left: var(--inner-padding-start); + } + + @include rtl() { + padding-right: var(--inner-padding-start); + padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end)); + } + /* stylelint-enable */ display: flex; @@ -328,12 +342,19 @@ button, a { .item-bottom { @include margin(0); - @include padding( - 0, - var(--inner-padding-end), - 0, - calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) - ); + @include padding(0, null); + + /* stylelint-disable */ + @include ltr() { + padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); + padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px)); + } + + @include rtl() { + padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px)); + padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px)); + } + /* stylelint-enable */ display: flex; diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png index 007db608a8..fce2db6c41 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png index 3d62ea003d..e97bc4cd58 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png index 0e8e95d07f..9f63ed4b21 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png index ac9e2ab87c..8a6a1fa976 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png index 57ee15cfa7..8d4ad7c0fd 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png index 8673a9d4e3..801bf0ea7b 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts b/core/src/components/item/test/basic/item.e2e.ts index 0ea568a52d..791f647c3b 100644 --- a/core/src/components/item/test/basic/item.e2e.ts +++ b/core/src/components/item/test/basic/item.e2e.ts @@ -10,5 +10,37 @@ configs().forEach(({ title, screenshot, config }) => { await expect(page).toHaveScreenshot(screenshot(`item-diff`)); }); + + /** + * This behavior needs to be tested for all modes & directions + * Safe padding should stay on the same side when the direction changes + */ + test('should have safe area padding', async ({ page }) => { + await page.setContent( + ` + + + + Item with helper +
Helper
+ + + + Single line text that should have ellipses when it doesn't all fit in the item + + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot('item-safe-area')); + }); }); }); diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3c7598f13f Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f52966a3fc Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..41438a1401 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..31769bd8b4 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7283620e0e Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3fb79af961 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2534024ce3 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d64ca28f58 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..40f103f5f8 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..89ea0b441b Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..84881d8dd1 Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b4932e5a2e Binary files /dev/null and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 9fae9a79ef..4c277c0860 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -4,24 +4,9 @@ // iOS Label // -------------------------------------------------- -/// @prop - Text color of the label by an input, select, or datetime -$label-ios-text-color: null !default; - /// @prop - Text color of the stacked/floating label when it is focused $label-ios-text-color-focused: null !default; -/// @prop - Margin top of the label -$label-ios-margin-top: $item-ios-padding-top !default; - -/// @prop - Margin end of the label -$label-ios-margin-end: ($item-ios-padding-end * 0.5) !default; - -/// @prop - Margin bottom of the label -$label-ios-margin-bottom: $item-ios-padding-bottom !default; - -/// @prop - Margin start of the label -$label-ios-margin-start: 0 !default; - /// @prop - Font size of the label when the text wraps $label-ios-text-wrap-font-size: dynamic-font(14px) !default; diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index 73f3643757..ed785732a8 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -4,9 +4,6 @@ // Material Design Label // -------------------------------------------------- -/// @prop - Text color of the label by an input, select, or datetime -$label-md-text-color: $text-color-step-600 !default; - /// @prop - Text color of the stacked/floating label when it is focused $label-md-text-color-focused: ion-color(primary, base) !default; diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index 81fbcddfde..c299612af7 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -9,7 +9,17 @@ --color: #{$list-header-ios-color}; --border-color: #{$item-ios-border-bottom-color}; - @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}), null); + /* stylelint-disable */ + @include ltr() { + padding-right: var(--ion-safe-area-right); + padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}); + } + + @include rtl() { + padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-ios-padding-start}); + padding-left: var(--ion-safe-area-left); + } + /* stylelint-enable */ position: relative; diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss index 6f1f7d92c5..05e83a759c 100644 --- a/core/src/components/list-header/list-header.md.scss +++ b/core/src/components/list-header/list-header.md.scss @@ -9,7 +9,17 @@ --color: #{$list-header-md-color}; --border-color: #{$item-md-border-bottom-color}; - @include padding-horizontal(calc(var(--ion-safe-area-left, 0) + #{$list-header-md-padding-start}), null); + /* stylelint-disable */ + @include ltr() { + padding-right: var(--ion-safe-area-right); + padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-md-padding-start}); + } + + @include rtl() { + padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-md-padding-start}); + padding-left: var(--ion-safe-area-left); + } + /* stylelint-enable */ min-height: $list-header-md-min-height; diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts b/core/src/components/list-header/test/basic/list-header.e2e.ts index 25e61cbe0f..29fdf9e44d 100644 --- a/core/src/components/list-header/test/basic/list-header.e2e.ts +++ b/core/src/components/list-header/test/basic/list-header.e2e.ts @@ -12,3 +12,37 @@ configs().forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * This behavior needs to be tested in both modes and directions to + * make sure the safe area padding is applied only to that side + * regardless of direction + */ +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('list-header: basic'), () => { + test.describe('safe area', () => { + test('should have padding added by the safe area', async ({ page }) => { + await page.setContent( + ` + + + + List Header + Button + + `, + config + ); + + const listHeader = page.locator('ion-list-header'); + + await expect(listHeader).toHaveScreenshot(screenshot(`list-header-safe-area`)); + }); + }); + }); +}); diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cd427c006a Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..19c3d281dd Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9aea2540a9 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c0c9ab7ac3 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..47662d96c2 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e82f1090c9 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6e6c1cd325 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ed07537b26 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..24de281dba Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..aaedcccefe Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d8e9d57599 Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6de2cc78b Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png index b4f883fb12..08ed83ae12 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png index 59b74c20ae..2b7e9a789c 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png index 0fc3cd93bc..4af623879e 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png index fecc462b59..97eb29aa6f 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png index 3e75af241f..748758bafe 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png index 1e0fdf759d..6af8417abd 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png index 02244ceec1..48d45002dd 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png index a2b3c66a21..749a9203d3 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png index 0d1bac6fa1..5fbbc55227 100644 Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss index e2fe544869..c2936ddff7 100644 --- a/core/src/components/menu/menu.ios.vars.scss +++ b/core/src/components/menu/menu.ios.vars.scss @@ -3,9 +3,6 @@ // iOS Menu // -------------------------------------------------- -/// @prop - Background of the menu -$menu-ios-background: $background-color !default; - /// @prop - Box shadow color of the menu $menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss index 064c8f4776..6acf939cce 100644 --- a/core/src/components/menu/menu.md.vars.scss +++ b/core/src/components/menu/menu.md.vars.scss @@ -3,8 +3,5 @@ // Material Design Menu // -------------------------------------------------- -/// @prop - Background of the menu -$menu-md-background: $background-color !default; - /// @prop - Box shadow of the menu $menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default; diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 1dc46a41e0..4925051837 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -33,7 +33,7 @@ const focusableQueryString = shadow: true, }) export class Menu implements ComponentInterface, MenuI { - private animation?: any; // TODO(FW-2832): type + private animation?: Animation; private lastOnEnd = 0; private gesture?: Gesture; private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true }); @@ -289,6 +289,20 @@ export class Menu implements ComponentInterface, MenuI { @Listen('ionSplitPaneVisible', { target: 'body' }) onSplitPaneChanged(ev: CustomEvent) { + const { target } = ev; + const closestSplitPane = this.el.closest('ion-split-pane'); + + /** + * Menu listens on the body for "ionSplitPaneVisible". + * However, this means the callback will run any time + * a SplitPane changes visibility. As a result, we only want + * Menu's visibility state to update if its parent SplitPane + * changes visibility. + */ + if (target !== closestSplitPane) { + return; + } + this.isPaneVisible = ev.detail.isPane(this.el); this.updateState(); } @@ -477,11 +491,11 @@ export class Menu implements ComponentInterface, MenuI { this.animation = undefined; } // Create new animation - this.animation = await menuController._createAnimation(this.type!, this); + const animation = (this.animation = await menuController._createAnimation(this.type!, this)); if (!config.getBoolean('animated', true)) { - this.animation.duration(0); + animation.duration(0); } - this.animation.fill('both'); + animation.fill('both'); } private async startAnimation(shouldOpen: boolean, animated: boolean): Promise { diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png index 95aa60b047..384b05bcba 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png index 7e633d12f9..708de2b893 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png index 51f854892c..4463fd8225 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png index bfa13d85bd..eb8158c3e9 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png index 04d3c8fd8f..d6f319de1c 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png index f6c9b87172..9922c6136e 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png index 8914e73395..bd608ec9bf 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png index d4b21b5d5a..3c6e1e7174 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png index 8ed3eb8bda..c1bb419e17 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png index eb5cf5118f..21a211ce86 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png index d3d6f09c7c..32b8307b90 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png index 215f6c4a3a..065601388a 100644 Binary files a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss index d228b75d63..664aefd331 100644 --- a/core/src/components/modal/modal.ios.vars.scss +++ b/core/src/components/modal/modal.ios.vars.scss @@ -3,8 +3,5 @@ // iOS Modals // -------------------------------------------------- -/// @prop - Background color for the modal -$modal-ios-background-color: $background-color !default; - /// @prop - Border radius for the modal $modal-ios-border-radius: 10px !default; diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss index b75d2331a8..bf77d69a7e 100644 --- a/core/src/components/modal/modal.md.vars.scss +++ b/core/src/components/modal/modal.md.vars.scss @@ -3,9 +3,6 @@ // Material Design Modals // -------------------------------------------------- -/// @prop - Background color for the modal -$modal-md-background-color: $background-color !default; - /// @prop - Box shadow color of the alert $modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; diff --git a/core/src/components/picker/picker.ios.vars.scss b/core/src/components/picker/picker.ios.vars.scss index 50cd06c9f6..6bb3e14e06 100644 --- a/core/src/components/picker/picker.ios.vars.scss +++ b/core/src/components/picker/picker.ios.vars.scss @@ -24,9 +24,6 @@ $picker-ios-bottom-background-color: rgba(var(--background-rgb, $ba /// @prop - Height of the picker toolbar $picker-ios-toolbar-height: 44px !default; -/// @prop - Background color of the picker toolbar -$picker-ios-toolbar-background-color: $picker-ios-top-background-color !default; - /// @prop - Height of the picker button $picker-ios-button-height: $picker-ios-toolbar-height !default; diff --git a/core/src/components/picker/picker.md.vars.scss b/core/src/components/picker/picker.md.vars.scss index a0b214c2ab..d2f8675beb 100644 --- a/core/src/components/picker/picker.md.vars.scss +++ b/core/src/components/picker/picker.md.vars.scss @@ -24,9 +24,6 @@ $picker-md-bottom-background-color: rgba($background-color-rgb, /// @prop - Height of the picker toolbar $picker-md-toolbar-height: 44px !default; -/// @prop - Background of the picker toolbar -$picker-md-toolbar-background-color: $picker-md-top-background-color !default; - /// @prop - Height of the picker button $picker-md-button-height: $picker-md-toolbar-height !default; diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index 84330d3b6e..c5f9cbe8f4 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -1,8 +1,5 @@ @import "../../themes/ionic.globals.ios"; -/// @prop - Color of backdrop -$popover-backdrop-ios-color: $backdrop-ios-color !default; - // iOS Popover // -------------------------------------------------- diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 27942dd741..9d42d8ff72 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -4,9 +4,6 @@ // iOS Radio // -------------------------------------------------- -/// @prop - Color of the checked radio -$radio-ios-color-on: current-color(base) !default; - /// @prop - Background color of focus indicator for radio when focused $radio-ios-background-color-focused: ion-color(primary, tint) !default; diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 864a0dd486..012dd61727 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -136,8 +136,7 @@ export class Radio implements ComponentInterface { /** @internal */ @Method() - async setFocus(ev: any) { - // TODO(FW-2832): type (using Event triggers a build error due to conflict with Stencil Event import) + async setFocus(ev: globalThis.Event) { ev.stopPropagation(); ev.preventDefault(); diff --git a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts index c3567e26cf..af6ccbfeb2 100644 --- a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts @@ -6,10 +6,11 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('radio: a11y'), () => { - // TODO(FW-5218) - test.fixme('tabbing should switch between radio groups', async ({ page, pageUtils }) => { + test.beforeEach(async ({ page, skip }) => { + skip.browser('webkit', 'Tabbing is flaky in Safari'); await page.goto(`/src/components/radio/test/legacy/a11y`, config); - + }); + test('tabbing should switch between radio groups', async ({ page, pageUtils }) => { const firstGroupRadios = page.locator('#first-group ion-radio'); const secondGroupRadios = page.locator('#second-group ion-radio'); @@ -22,10 +23,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await pageUtils.pressKeys('shift+Tab'); await expect(firstGroupRadios.nth(0)).toBeFocused(); }); - // TODO(FW-5218) - test.fixme('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => { - await page.goto(`/src/components/radio/test/legacy/a11y`, config); - + test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => { const firstGroupRadios = page.locator('#first-group ion-radio'); await pageUtils.pressKeys('Tab'); diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index 1ebdf55deb..fe794984f5 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -20,9 +20,6 @@ $range-ios-item-padding-horizontal: 24px !default; /// @prop - Height of the range slider $range-ios-slider-height: 42px !default; -/// @prop - Width of the area that will select the range knob -$range-ios-hit-width: 42px !default; - /// @prop - Height of the area that will select the range knob $range-ios-hit-height: $range-ios-slider-height !default; @@ -32,24 +29,15 @@ $range-ios-bar-height: 4px !default; /// @prop - Background of the range bar $range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default; -/// @prop - Background of the active range bar -$range-ios-bar-active-background-color: current-color(base) !default; - /// @prop - Border radius of the range bar $range-ios-bar-border-radius: 2px !default; /// @prop - Width of the range knob $range-ios-knob-width: 26px !default; -/// @prop - Height of the range knob -$range-ios-knob-height: $range-ios-knob-width !default; - /// @prop - Box shadow of the range knob $range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default; -/// @prop - Border radius of the range knob -$range-ios-knob-border-radius: 50% !default; - /// @prop - Background of the range knob $range-ios-knob-background-color: #ffffff !default; @@ -65,9 +53,6 @@ $range-ios-tick-border-radius: 0 !default; /// @prop - Background of the range tick $range-ios-tick-background-color: $range-ios-bar-background-color !default; -/// @prop - Background of the active range tick -$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default; - /// @prop - Background of the range pin $range-ios-pin-background-color: transparent !default; diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index d72fd2045e..b1d72eb356 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -20,30 +20,12 @@ $range-md-item-padding-horizontal: 18px !default; /// @prop - Height of the range slider $range-md-slider-height: 42px !default; -/// @prop - Width of the area that will select the range knob -$range-md-hit-width: 42px !default; - -/// @prop - Height of the area that will select the range knob -$range-md-hit-height: $range-md-slider-height !default; - /// @prop - Height of the range bar $range-md-bar-height: 2px !default; /// @prop - Background of the range bar $range-md-bar-background-color: $background-color-step-250 !default; -/// @prop - Background of the active range bar -$range-md-bar-active-background-color: current-color(base) !default; - -/// @prop - Background of the range knob -$range-md-knob-background-color: $range-md-bar-active-background-color !default; - -/// @prop - Background of the range pin -$range-md-pin-background-color: $range-md-bar-active-background-color !default; - -/// @prop - Color of the range pin -$range-md-pin-color: ion-color(primary, contrast) !default; - /// @prop - Font size of the range pin $range-md-pin-font-size: dynamic-font(12px) !default; @@ -56,9 +38,6 @@ $range-md-pin-padding-horizontal: 0 !default; /// @prop - Width and height of the range pin $range-md-pin-dimension: dynamic-font(28px) !default; -/// @prop - Background of the range pin when the value is the minimum -$range-md-pin-min-background-color: $range-md-bar-background-color !default; - /// @prop - Opacity of the indicator shown when the range knob is hovered $range-md-knob-indicator-opacity-hover: 0.13 !default; diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts index d40653727d..8ae86de258 100644 --- a/core/src/components/refresher/refresher.utils.ts +++ b/core/src/components/refresher/refresher.utils.ts @@ -25,12 +25,11 @@ export const createPullingAnimation = ( }; const createBaseAnimation = (pullingRefresherIcon: HTMLElement) => { - // TODO(FW-2832): add types/re-evaluate asserting so many things - const spinner = pullingRefresherIcon.querySelector('ion-spinner') as HTMLElement; - const circle = spinner!.shadowRoot!.querySelector('circle') as any; - const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container') as HTMLElement; + const spinner = pullingRefresherIcon.querySelector('ion-spinner')!; + const circle = spinner!.shadowRoot!.querySelector('circle')!; + const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container')!; const arrowContainer = pullingRefresherIcon!.querySelector('.arrow-container'); - const arrow = arrowContainer ? (arrowContainer!.querySelector('ion-icon') as HTMLElement) : null; + const arrow = arrowContainer ? arrowContainer!.querySelector('ion-icon') : null; const baseAnimation = createAnimation().duration(1000).easing('ease-out'); @@ -210,6 +209,14 @@ export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElem return ( pullingSpinner !== null && refreshingSpinner !== null && + /** + * We use webkitOverflowScrolling for feature detection with rubber band scrolling + * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms. + * However, it will be the empty string on iOS. + * Note that we do not use getPropertyValue (and thus need to cast as any) because calling + * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not + * set on the element, even if the platform does not support that. + */ ((mode === 'ios' && isPlatform('mobile') && (referenceEl.style as any).webkitOverflowScrolling !== undefined) || mode === 'md') ); diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss index 8159aae0d4..d10dd930f1 100644 --- a/core/src/components/reorder/reorder.scss +++ b/core/src/components/reorder/reorder.scss @@ -1,5 +1,3 @@ -@import "./reorder.vars"; - // Reorder // -------------------------------------------------- diff --git a/core/src/components/reorder/reorder.vars.scss b/core/src/components/reorder/reorder.vars.scss deleted file mode 100644 index 77aca60cb7..0000000000 --- a/core/src/components/reorder/reorder.vars.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Reorder -// -------------------------------------------------- - -/// @prop - Transform of the reorder when it isn't visible -$reorder-initial-transform: 160% !default; diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss index 8b4587740f..f4937518f7 100644 --- a/core/src/components/ripple-effect/ripple-effect.scss +++ b/core/src/components/ripple-effect/ripple-effect.scss @@ -7,7 +7,6 @@ $scale-duration: 225ms; $fade-in-duration: 75ms; $fade-out-duration: 150ms; -$opacity-duration: $fade-in-duration + $fade-out-duration; :host { @include position(0, 0, 0, 0); diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index d02ad78f88..8a73ef40c5 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -37,9 +37,6 @@ $searchbar-ios-input-min-height: 36px !default; /// @prop - Border radius of the searchbar input $searchbar-ios-input-border-radius: 10px !default; -/// @prop - Color of the searchbar input placeholder -$searchbar-ios-input-placeholder-color: $text-color-step-400 !default; - /// @prop - Color of the searchbar input text $searchbar-ios-input-text-color: $text-color !default; diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 9f4470868c..a764fe4123 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -42,9 +42,6 @@ $searchbar-md-input-line-height: 30px !default; /// @prop - Box shadow of the searchbar input $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; -/// @prop - Color of the searchbar input placeholder -$searchbar-md-input-placeholder-color: $placeholder-text-color !default; - /// @prop - Color of the searchbar input text $searchbar-md-input-text-color: $text-color-step-150 !default; @@ -54,8 +51,5 @@ $searchbar-md-input-background-color: $background-color !default; /// @prop - Border radius of the searchbar input $searchbar-md-input-border-radius: 2px !default; -/// @prop - Color of the searchbar input clear icon -$searchbar-md-input-clear-icon-color: $text-color-step-400 !default; - /// @prop - Size of the searchbar input clear icon $searchbar-md-input-clear-icon-size: dynamic-font(22px) !default; diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 7fab6590e4..84ae9b2acc 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,6 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core'; -import { debounceEvent, raf } from '@utils/helpers'; +import { debounceEvent, raf, componentOnReady } from '@utils/helpers'; import { isRTL } from '@utils/rtl'; import { createColorClasses } from '@utils/theme'; import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons'; @@ -269,7 +269,14 @@ export class Searchbar implements ComponentInterface { * Returns the native `` element used under the hood. */ @Method() - getInputElement(): Promise { + async getInputElement(): Promise { + /** + * If this gets called in certain early lifecycle hooks (ex: Vue onMounted), + * nativeInput won't be defined yet with the custom elements build, so wait for it to load in. + */ + if (!this.nativeInput) { + await new Promise((resolve) => componentOnReady(this.el, resolve)); + } return Promise.resolve(this.nativeInput!); } diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss index a4800a3716..35ce67c163 100644 --- a/core/src/components/segment-button/segment-button.md.vars.scss +++ b/core/src/components/segment-button/segment-button.md.vars.scss @@ -18,12 +18,6 @@ $segment-button-md-background: none !default; /// @prop - Background of the checked segment button $segment-button-md-background-checked: $segment-button-md-background !default; -/// @prop - Width of the bottom border on the segment button -$segment-button-md-border-bottom-width: 2px !default; - -/// @prop - Color of the bottom border on the segment button -$segment-button-md-border-bottom-color: transparent !default; - /// @prop - Opacity of the disabled segment button $segment-button-md-opacity-disabled: .3 !default; @@ -68,6 +62,3 @@ $segment-button-md-transition-animated: transform 250ms cubic-bezi /// @prop - Size of an icon in the segment button $segment-button-md-icon-size: 24px !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-md-icon-line-height: $segment-button-md-line-height !default; diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index c96425c802..c015d7e617 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -145,7 +145,13 @@ export class Segment implements ComponentInterface { * before we can scroll. */ raf(() => { - this.scrollActiveButtonIntoView(); + /** + * When the segment loads for the first + * time we just want to snap the active button into + * place instead of scroll. Smooth scrolling should only + * happen when the user interacts with the segment. + */ + this.scrollActiveButtonIntoView(false); }); this.gesture = (await import('../../utils/gesture')).createGesture({ @@ -305,30 +311,52 @@ export class Segment implements ComponentInterface { } } - private scrollActiveButtonIntoView() { - const { scrollable, value } = this; + private scrollActiveButtonIntoView(smoothScroll = true) { + const { scrollable, value, el } = this; if (scrollable) { const buttons = this.getButtons(); const activeButton = buttons.find((button) => button.value === value); if (activeButton !== undefined) { - /** - * Scrollable segment buttons should be - * centered within the view including - * buttons that are partially offscreen. - */ - activeButton.scrollIntoView({ - behavior: 'smooth', - inline: 'center', + const scrollContainerBox = el.getBoundingClientRect(); + const activeButtonBox = activeButton.getBoundingClientRect(); - /** - * Segment should scroll on the - * horizontal axis. `block: 'nearest'` - * ensures that the vertical axis - * does not scroll if the segment - * as a whole is already in view. - */ - block: 'nearest', + /** + * Subtract the active button x position from the scroll + * container x position. This will give us the x position + * of the active button within the scroll container. + */ + const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x; + + /** + * If we just used activeButtonLeft, then the active button + * would be aligned with the left edge of the scroll container. + * Instead, we want the segment button to be centered. As a result, + * we subtract half of the scroll container width. This will position + * the left edge of the active button at the midpoint of the scroll container. + * We then add half of the active button width. This will position the active + * button such that the midpoint of the active button is at the midpoint of the + * scroll container. + */ + const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2; + + /** + * We intentionally use scrollBy here instead of scrollIntoView + * to avoid a WebKit bug where accelerated animations break + * when using scrollIntoView. Using scrollIntoView will cause the + * segment container to jump during the transition and then snap into place. + * This is because scrollIntoView can potentially cause parent element + * containers to also scroll. scrollBy does not have this same behavior, so + * we use this API instead. + * + * Note that if there is not enough scrolling space to center the element + * within the scroll container, the browser will attempt + * to center by as much as it can. + */ + el.scrollBy({ + top: 0, + left: centeredX, + behavior: smoothScroll ? 'smooth' : 'instant', }); } } diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index d899179616..cc41c8fd1c 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -12,21 +12,6 @@ --padding-start: #{$select-ios-padding-start}; } -// TODO FW-3194 - Move this to host -:host(:not(.legacy-select)) { - min-height: 44px; -} - -/** - * Since the label sits on top of the element, - * the component needs to be taller otherwise the - * label will appear too close to the select text. - */ -:host(.select-label-placement-floating), -:host(.select-label-placement-stacked) { - min-height: 56px; -} - .select-icon { width: $select-ios-icon-size; height: $select-ios-icon-size; diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index e0a2ebafb1..cb50b10d15 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -16,17 +16,8 @@ $select-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Padding start of the select $select-ios-padding-start: $item-ios-padding-start !default; -/// @prop - Color of the select icon -$select-ios-icon-color: $text-color-step-650 !default; - /// @prop - Size of the select icon $select-ios-icon-size: dynamic-font(18px) !default; -/// @prop - Color of the select placeholder -$select-ios-placeholder-color: $select-ios-icon-color !default; - -/// @prop - Text Color of the selected item -$select-ios-text-color: $text-color !default; - /// @prop - Opacity of the disabled select $select-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss index f595a622be..705448e1a0 100644 --- a/core/src/components/select/select.md.outline.scss +++ b/core/src/components/select/select.md.outline.scss @@ -8,6 +8,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } :host(.select-fill-outline.select-shape-round) { diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index fa7c621c40..a9036c1d0a 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -19,11 +19,6 @@ --padding-start: #{$select-md-padding-start}; } -// TODO FW-3194 - Move this to host -:host(:not(.legacy-select)) { - min-height: 56px; -} - .select-icon { width: $select-md-icon-size; diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 4b1a920125..0475b30be4 100644 --- a/core/src/components/select/select.md.solid.scss +++ b/core/src/components/select/select.md.solid.scss @@ -9,6 +9,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } /** diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index acc3389d9e..db460f063f 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -16,18 +16,8 @@ $select-md-padding-bottom: $select-md-padding-top !default; /// @prop - Padding start of the select $select-md-padding-start: $item-md-padding-start !default; -/// @prop - Color of the select icon -$select-md-icon-color: $text-color-step-600 !default; - /// @prop - Size of the select icon $select-md-icon-size: dynamic-font(13px) !default; - -/// @prop - Color of the select placeholder -$select-md-placeholder-color: $select-md-icon-color !default; - -/// @prop - Text Color of the selected item -$select-md-text-color: $text-color !default; - /// @prop - The amount of whitespace to display on either side of the floating label $select-md-floating-label-padding: 4px !default; diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 50a13f06de..020dd51231 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -59,6 +59,17 @@ // TODO FW-3194 - Move this to host :host(:not(.legacy-select)) { width: 100%; + min-height: 44px; +} + +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the select text. + */ +:host(.select-label-placement-floating), +:host(.select-label-placement-stacked) { + min-height: 56px; } :host(.ion-color) { diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Chrome-linux.png index b9ac6b98cf..242b25bb05 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Firefox-linux.png index 5860de22da..98c5332179 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Safari-linux.png index de206355ba..8b2f070043 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-no-fill-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png index f63cf7e612..fdd26f2bab 100644 Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png index c9b6c5ab46..1af36a7326 100644 Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png index 60ad412bda..78faaa9155 100644 Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png index ac2a11d049..9f08a25063 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png index 2b08c87a9d..2311c2ac29 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png index 82e52e1a5f..46de7dabbe 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png index 5c260ce59b..b4622d8bb4 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png index ea1354e1c6..07da5055d5 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png index ed735ae9c5..cab01045ba 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png index 2c969e2c45..503a1431bc 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png index cda30fbb19..3837c2f3e6 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png index ba9878d842..e2fd70205e 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png index a52c4572da..b48a2ec07c 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png index fe9bbbf7de..5b6d1f853d 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png index b74183587a..8ab1673397 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png index f3bc8a914b..4a6210e019 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png index 8cd2b13894..fbb1ae43db 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png index 7c61ee2070..3e4d85efe1 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Chrome-linux.png index 03e010b362..bb8e6cf52e 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Firefox-linux.png index 33a709bb90..c163132b51 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Safari-linux.png index c9a1f940c6..363f163271 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png index a1dd805d03..78666ce75a 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png index a3e75653f4..46e89103b8 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Safari-linux.png index 5415be9bb6..9fe82b6cec 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png index dc338c03ea..b10fd2e5a6 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png index 84fec86d2a..1f1befaa10 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Safari-linux.png index 530238ceb4..8c4dbaa19d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png index e448ef6d24..4736e9ab00 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png index 7d09512f61..04995ad532 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png index c030681861..ac8d71c6c7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png index 708dc3352c..31898a33f3 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png index a82ec74342..380bbc51f7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png index 7655309c91..0d46e73bfc 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png index bd2c6c6a09..861b64f137 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png index a124147ef7..2f8210d197 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Safari-linux.png index 5a79b0e48a..d37b189975 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png index 23236ef3f7..fe0cdeb6f4 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png index 258093938a..414f2950cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Safari-linux.png index 240d17173e..1603b062fe 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-end-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png index 8ee3d2ad4a..52398d87cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png index 50302b5bdd..1fa80f5bf3 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png index fb3fdba927..64d929b873 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png index f05814d5b9..dd43ead9a0 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png index 2eb8b80763..70f5f51059 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png index b40641cd4d..5fc297c0b7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png index 8ee3d2ad4a..52398d87cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png index 50302b5bdd..1fa80f5bf3 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png index fb3fdba927..64d929b873 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png index f05814d5b9..dd43ead9a0 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png index 2eb8b80763..70f5f51059 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png index b40641cd4d..5fc297c0b7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png index 8ee3d2ad4a..52398d87cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png index 50302b5bdd..1fa80f5bf3 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png index fb3fdba927..64d929b873 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png index f05814d5b9..dd43ead9a0 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png index 2eb8b80763..70f5f51059 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png index b40641cd4d..5fc297c0b7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png index 5b76041efc..50dd307f97 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png index 6d9f6a7c90..ca23dc03d9 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png index ca2f24f060..5000e62cb8 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png index 909561cb8e..e28d1ed8b9 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png index e2d225acde..196a20b673 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Safari-linux.png index ed4b1d5088..b8ab3aa5d2 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png index 0a6edf41c7..a1306a282e 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png index dbf334cb2b..297c488136 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Safari-linux.png index 04fd90471c..25aaf047bd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png index ce9966a896..38e6b9e042 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png index 94e28ffff5..d0468713d8 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png index 1808c19af4..97f87db7a8 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png index 173ed054e8..a5da56da4d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png index ad75baf2a4..dfdacff881 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png index 8c9dbf52b3..714d9101f9 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png index 394c922530..7b8025f431 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png index ce4b1ea1f7..03fd40f425 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Safari-linux.png index 1a7b29a986..854aedf836 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png index c3357e869c..1118be80fb 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png index 25b6382635..0ed9a51ca0 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Safari-linux.png index 8488f1ed6c..936c5ba02d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-start-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Chrome-linux.png index 5b76041efc..50dd307f97 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Firefox-linux.png index 10dec0b90c..ca23dc03d9 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Safari-linux.png index ca2f24f060..5000e62cb8 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-truncate-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Chrome-linux.png index dc2388b2d3..a3348fc850 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Firefox-linux.png index 5abe7d9fc5..aa33f50436 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Safari-linux.png index d39f8bb1b0..dd4dd47d4b 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Chrome-linux.png index 7e2c621677..639695619b 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Firefox-linux.png index 64b0b4e3b7..4bb088172a 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Safari-linux.png index 67dfcb4863..807ad1d8c3 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Chrome-linux.png index 48b75cccac..5a8f4f8484 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Firefox-linux.png index b893172865..d4ab38ea34 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Safari-linux.png index 832851bb4d..5d64581e8e 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Chrome-linux.png index 5afdf32048..549273f037 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Firefox-linux.png index 450ece5025..61d292ab9e 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Safari-linux.png index 337ce92ed5..523b921d7f 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png index beb10c2593..c72bf11fab 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png index fb9550dbb3..645fdf6c3d 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png index e3592b3ddf..be4c0e0c4f 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png index 78512cad71..9160532d58 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png index 95155e5a6d..f748e797fd 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png index f80cd24d98..24d1f4b505 100644 Binary files a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png index a3c3008963..6ae7f1aebb 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png index e5c875eff3..2309c40af9 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png index 02e981fe61..7b44088560 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png index f91f48b8ec..572aa72692 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png index 6606fb188b..09c3b8909e 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png index be2f46d24c..5f0f82a3af 100644 Binary files a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/split-pane/test/multiple/index.html b/core/src/components/split-pane/test/multiple/index.html new file mode 100644 index 0000000000..cc2cb49092 --- /dev/null +++ b/core/src/components/split-pane/test/multiple/index.html @@ -0,0 +1,69 @@ + + + + + Split Pane - Multiple + + + + + + + + + +
Split One Menu One
+ + +
+ + Page Content One + + +
+ + +
Split One Menu Two
+ + + + + +
Split Two Menu One
+ + +
+ + Page Content Two + + +
+ + +
Split Two Menu Two
+ + + + + + diff --git a/core/src/components/split-pane/test/multiple/split-pane.e2e.ts b/core/src/components/split-pane/test/multiple/split-pane.e2e.ts new file mode 100644 index 0000000000..3abaab7695 --- /dev/null +++ b/core/src/components/split-pane/test/multiple/split-pane.e2e.ts @@ -0,0 +1,38 @@ +import { expect } from '@playwright/test'; +import { configs, test, Viewports } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('split-pane: multiple'), () => { + test('using multiple split panes should not hide a menu in another split pane', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/18683', + }); + + await page.setViewportSize(Viewports.large); + await page.goto(`/src/components/split-pane/test/multiple`, config); + + const paneOneMenuOne = page.locator('ion-menu#pane-one-menu-one'); + const paneOneMenuTwo = page.locator('ion-menu#pane-one-menu-two'); + + const paneTwoMenuOne = page.locator('ion-menu#pane-two-menu-one'); + const paneTwoMenuTwo = page.locator('ion-menu#pane-two-menu-two'); + + const showPaneOne = page.locator('button#show-pane-one'); + const showPaneTwo = page.locator('button#show-pane-two'); + + await expect(paneOneMenuOne).toBeVisible(); + await expect(paneOneMenuTwo).toBeVisible(); + + await showPaneTwo.click(); + + await expect(paneTwoMenuOne).toBeVisible(); + await expect(paneTwoMenuTwo).toBeVisible(); + + await showPaneOne.click(); + + await expect(paneOneMenuOne).toBeVisible(); + await expect(paneOneMenuTwo).toBeVisible(); + }); + }); +}); diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss index a75892261c..05c2472042 100644 --- a/core/src/components/tab-bar/tab-bar.scss +++ b/core/src/components/tab-bar/tab-bar.scss @@ -6,9 +6,6 @@ * @prop --border: Border of the tab bar * @prop --color: Color of the tab bar */ - - @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); - display: flex; align-items: center; @@ -16,7 +13,11 @@ width: auto; + /* stylelint-disable */ + padding-right: var(--ion-safe-area-right); padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left); + /* stylelint-enable */ border-top: var(--border); diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts new file mode 100644 index 0000000000..3cee871727 --- /dev/null +++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts @@ -0,0 +1,46 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior needs to be tested in both modes and directions to + * make sure the safe area padding is applied only to that side + * regardless of direction + */ +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('tab-bar: basic'), () => { + test.describe('safe area', () => { + test('should have padding added by the safe area', async ({ page }) => { + await page.setContent( + ` + + + + + Recents + + + + Favorites + 23 + + + + Settings + + + `, + config + ); + + const tabBar = page.locator('ion-tab-bar'); + + await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-safe-area`)); + }); + }); + }); +}); diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e5676a0cb0 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9045f496c6 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9b2fe2ce89 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0ff1d3e1a5 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..411ad9edfb Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c9c18801ee Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1f611c0ea9 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..da39d84a9c Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ac95df72f Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c87e772512 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e18581e130 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..51dd6d3a38 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss index 38b2e212ab..f7e86af6e3 100644 --- a/core/src/components/tab-button/tab-button.ios.vars.scss +++ b/core/src/components/tab-button/tab-button.ios.vars.scss @@ -21,17 +21,8 @@ $tab-button-ios-max-width: 240px !default; /// @prop - Text color of the inactive tab button $tab-button-ios-text-color: $tabbar-ios-color !default; -/// @prop - Text color of the active tab button -$tab-button-ios-text-color-active: $tabbar-ios-color-selected !default; - -/// @prop - Icon color of the inactive tab button -$tab-button-ios-icon-color: $tabbar-ios-color !default; - -/// @prop - Icon color of the active tab button -$tab-button-ios-icon-color-active: $tabbar-ios-color-selected !default; - /// @prop - Font size of the tab button text $tab-button-ios-font-size: 10px !default; /// @prop - Size of the tab button icon -$tab-button-ios-icon-size: 30px !default; \ No newline at end of file +$tab-button-ios-icon-size: 30px !default; diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index 4007dc94eb..ea005b4509 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -27,15 +27,6 @@ $tab-button-md-font-weight: normal !default; /// @prop - Text color of the inactive tab button $tab-button-md-text-color: $tabbar-md-color !default; -/// @prop - Text color of the active tab button -$tab-button-md-text-color-active: $tabbar-md-color-selected !default; - -/// @prop - Icon color of the inactive tab button -$tab-button-md-icon-color: $tabbar-md-color !default; - -/// @prop - Icon color of the active tab button -$tab-button-md-icon-color-active: $tabbar-md-color-selected !default; - /// @prop - Margin top on the tab button icon $tab-button-md-icon-margin-top: 16px !default; @@ -48,9 +39,6 @@ $tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top ! /// @prop - Margin start on the tab button icon $tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; -/// @prop - Font size of the active tab button text -$tab-button-md-font-size-active: 14px !default; - /// @prop - Margin top on the tab button text $tab-button-md-text-margin-top: 2px !default; @@ -69,9 +57,6 @@ $tab-button-md-text-capitalization: none !default; /// @prop - Size of the tab button icon $tab-button-md-icon-size: 22px !default; -/// @prop - Opacity of the inactive tab button -$tab-button-md-opacity: .7 !default; - /// @prop - Border radius on the tab button badge $tab-button-md-badge-border-radius: 8px !default; diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss index bac09990e2..b90a7d441e 100644 --- a/core/src/components/textarea/textarea.ios.scss +++ b/core/src/components/textarea/textarea.ios.scss @@ -40,26 +40,3 @@ :host(.textarea-disabled) { opacity: #{$textarea-ios-disabled-opacity}; } - -// Textarea Wrapper -// ---------------------------------------------------------------- - -// TODO: FW-2876 - Make this style a :host style, remove :not selector -:host(:not(.legacy-textarea)) { - min-height: 44px; -} - -/** - * Since the label sits on top of the element, - * the component needs to be taller otherwise the - * label will appear too close to the textarea text. - * Also, floating and stacked labels should not - * push the label down since it it - * sits on top of the textarea. - */ -:host(.textarea-label-placement-floating), -:host(.textarea-label-placement-stacked) { - --padding-top: 0px; - - min-height: 56px; -} diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index 34243d0946..c6f807af1e 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -4,9 +4,6 @@ // iOS Textarea // -------------------------------------------------- -/// @prop - Margin start of the textarea when it is after a label -$textarea-ios-by-label-margin-start: $item-ios-padding-start !default; - /// @prop - Font size of the textarea $textarea-ios-font-size: inherit !default; @@ -22,8 +19,5 @@ $textarea-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Margin start of the textarea $textarea-ios-padding-start: 0 !default; -/// @prop - Placeholder text color of the textarea -$textarea-ios-placeholder-color: $placeholder-text-color !default; - /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea $textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss index ea39f1ed5c..aa84d431e7 100644 --- a/core/src/components/textarea/textarea.md.outline.scss +++ b/core/src/components/textarea/textarea.md.outline.scss @@ -8,6 +8,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } :host(.textarea-fill-outline.textarea-shape-round) { diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index 295502f7aa..c014bca63e 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -42,24 +42,6 @@ letter-spacing: 0.0333333333em; } -// Textarea Wrapper -// ---------------------------------------------------------------- - -// TODO: FW-2876 - Make this a style on :host, remove :not selector -:host(:not(.legacy-textarea)) { - min-height: 56px; -} - -/** - * Floating and stacked labels should not - * push the label down since it it - * sits on top of the textarea. - */ -:host(.textarea-label-placement-floating), -:host(.textarea-label-placement-stacked) { - --padding-top: 0px; -} - // Textarea Label // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss index 15a61b96a1..45b44997be 100644 --- a/core/src/components/textarea/textarea.md.solid.scss +++ b/core/src/components/textarea/textarea.md.solid.scss @@ -9,6 +9,8 @@ --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; + + min-height: 56px; } /** diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index eb84e1979f..40a864039c 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -19,9 +19,6 @@ $textarea-md-padding-bottom: $item-md-padding-bottom !default; /// @prop - Margin start of the textarea $textarea-md-padding-start: ($item-md-padding-start * 0.5) !default; -/// @prop - Placeholder text color of the textarea -$textarea-md-placeholder-color: $placeholder-text-color !default; - /// @prop - The amount of whitespace to display on either side of the floating label $textarea-md-floating-label-padding: 4px !default; diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 89a5476fa3..a22bf03c4d 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -67,6 +67,29 @@ box-sizing: border-box; } +// Textarea Wrapper +// ---------------------------------------------------------------- + +// TODO: FW-2876 - Make this style a :host style, remove :not selector +:host(:not(.legacy-textarea)) { + min-height: 44px; +} + +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the textarea text. + * Also, floating and stacked labels should not + * push the label down since it it + * sits on top of the textarea. + */ +:host(.textarea-label-placement-floating), +:host(.textarea-label-placement-stacked) { + --padding-top: 0px; + + min-height: 56px; +} + /** * When the cols property is set we should * respect that width instead of defaulting diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 437e4ed60f..7079948773 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -16,7 +16,13 @@ import { import type { LegacyFormController, NotchController } from '@utils/forms'; import { createLegacyFormController, createNotchController } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; -import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers'; +import { + inheritAriaAttributes, + debounceEvent, + findItemLabel, + inheritAttributes, + componentOnReady, +} from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; import type { SlotMutationController } from '@utils/slot-mutation-controller'; @@ -378,7 +384,14 @@ export class Textarea implements ComponentInterface { * Returns the native `