diff --git a/core/package-lock.json b/core/package-lock.json index b30d0b3a1bc..eccb4313782 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@phosphor-icons/core": "^2.1.1", + "@phosphor-icons/web": "^2.1.2", "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" @@ -1895,6 +1896,12 @@ "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==", "license": "MIT" }, + "node_modules/@phosphor-icons/web": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@phosphor-icons/web/-/web-2.1.2.tgz", + "integrity": "sha512-rPAR9o/bEcp4Cw4DEeZHXf+nlGCMNGkNDRizYHM47NLxz9vvEHp/Tt6FMK1NcWadzw/pFDPnRBGi/ofRya958A==", + "license": "MIT" + }, "node_modules/@playwright/test": { "version": "1.58.2", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz", diff --git a/core/package.json b/core/package.json index 4f7d6a596cb..815bea8205d 100644 --- a/core/package.json +++ b/core/package.json @@ -35,6 +35,7 @@ ], "dependencies": { "@phosphor-icons/core": "^2.1.1", + "@phosphor-icons/web": "^2.1.2", "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" @@ -79,7 +80,8 @@ }, "scripts": { "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json", - "build.css": "npm run css.sass && npm run css.minify", + "build.css": "npm run css.sass && npm run copy.fonts && npm run css.minify", + "copy.fonts": "node scripts/copy-fonts.mjs", "build.debug": "npm run clean && stencil build --debug", "build.docs.json": "stencil build --docs-json dist/docs.json", "build.tokens": "npx build.tokens --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && npm run prettier.tokens", diff --git a/core/scripts/copy-fonts.mjs b/core/scripts/copy-fonts.mjs new file mode 100644 index 00000000000..0c02e3cc014 --- /dev/null +++ b/core/scripts/copy-fonts.mjs @@ -0,0 +1,14 @@ +import { copyFileSync, mkdirSync } from 'fs'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +const src = join(__dirname, '../node_modules/@phosphor-icons/web/src/regular'); +const dest = join(__dirname, '../css/fonts'); + +mkdirSync(dest, { recursive: true }); + +['Phosphor.woff2', 'Phosphor.woff'].forEach((file) => { + copyFileSync(join(src, file), join(dest, file)); +}); diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss index 11ffcdc881a..ae827931bc2 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -144,31 +144,55 @@ height: globals.$ion-scale-300; } +:host(.avatar-xxsmall) ::slotted(i.ph) { + font-size: globals.$ion-scale-300; +} + :host(.avatar-xsmall) ::slotted(ion-icon) { width: globals.$ion-scale-400; height: globals.$ion-scale-400; } +:host(.avatar-xsmall) ::slotted(i.ph) { + font-size: globals.$ion-scale-400; +} + :host(.avatar-small) ::slotted(ion-icon) { width: globals.$ion-scale-500; height: globals.$ion-scale-500; } +:host(.avatar-small) ::slotted(i.ph) { + font-size: globals.$ion-scale-500; +} + :host(.avatar-medium) ::slotted(ion-icon) { width: globals.$ion-scale-600; height: globals.$ion-scale-600; } +:host(.avatar-medium) ::slotted(i.ph) { + font-size: globals.$ion-scale-600; +} + :host(.avatar-large) ::slotted(ion-icon) { width: globals.$ion-scale-700; height: globals.$ion-scale-700; } +:host(.avatar-large) ::slotted(i.ph) { + font-size: globals.$ion-scale-700; +} + :host(.avatar-xlarge) ::slotted(ion-icon) { width: globals.$ion-scale-800; height: globals.$ion-scale-800; } +:host(.avatar-xlarge) ::slotted(i.ph) { + font-size: globals.$ion-scale-800; +} + // Avatar Badge Empty (hint) // -------------------------------------------------- diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index 4342c2b51d3..0c697dd9b70 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -85,6 +85,10 @@ height: globals.$ion-scale-300; } +:host(.badge-small) ::slotted(i.ph) { + font-size: globals.$ion-scale-300; +} + /* Medium Badge */ /* Large size defaults to the medium size to avoid styles breakage */ :host(.badge-medium), @@ -104,6 +108,11 @@ height: globals.$ion-scale-400; } +:host(.badge-medium) ::slotted(i.ph), +:host(.badge-large) ::slotted(i.ph) { + font-size: globals.$ion-scale-400; +} + // Badge (hint) // -------------------------------------------------- @@ -173,4 +182,8 @@ width: globals.$ion-scale-300; height: globals.$ion-scale-300; } + + ::slotted(i.ph) { + font-size: globals.$ion-scale-300; + } } diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 6958f06443f..8e912a1b0b8 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -146,6 +146,12 @@ width: globals.$ion-scale-500; height: globals.$ion-scale-500; } + + ::slotted(i.ph[slot="start"]), + ::slotted(i.ph[slot="end"]), + ::slotted(i.ph[slot="icon-only"]) { + font-size: globals.$ion-scale-500; + } } :host(.button-large) { @@ -155,6 +161,12 @@ width: globals.$ion-scale-600; height: globals.$ion-scale-600; } + + ::slotted(i.ph[slot="start"]), + ::slotted(i.ph[slot="end"]), + ::slotted(i.ph[slot="icon-only"]) { + font-size: globals.$ion-scale-600; + } } :host(.button-has-icon-only) { diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index cbcf411fccd..43e4c19e010 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -68,7 +68,8 @@ font-size: globals.$ion-font-size-300; - ::slotted(ion-icon) { + ::slotted(ion-icon), + ::slotted(i.ph) { font-size: globals.$ion-font-size-300; } } @@ -78,7 +79,8 @@ font-size: globals.$ion-font-size-350; - ::slotted(ion-icon) { + ::slotted(ion-icon), + ::slotted(i.ph) { font-size: globals.$ion-font-size-400; } } diff --git a/core/src/components/item-option/item-option.ionic.scss b/core/src/components/item-option/item-option.ionic.scss index 20506623d29..9844b4f98ca 100644 --- a/core/src/components/item-option/item-option.ionic.scss +++ b/core/src/components/item-option/item-option.ionic.scss @@ -42,6 +42,12 @@ height: globals.$ion-scale-500; } +::slotted(i.ph) { + @include globals.margin(0); + + font-size: globals.$ion-scale-500; +} + // Item Option Shapes // -------------------------------------------------- diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 665f5346c69..8d91e5bcff0 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -49,7 +49,8 @@ slot[name="end"]::slotted(*) { @include globals.margin(null, null, null, #{globals.$ion-space-400}); } -::slotted(ion-icon:not(.item-detail-icon)) { +::slotted(ion-icon:not(.item-detail-icon)), +::slotted(i.ph) { color: globals.$ion-primitives-neutral-1000; font-size: globals.$ion-scale-1000; diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 8646cd7996e..1758e99b6bd 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -34,7 +34,8 @@ background: globals.current-color(base); } -::slotted(ion-icon[slot]) { +::slotted(ion-icon[slot]), +::slotted(i.ph[slot]) { font-size: globals.$ion-font-size-600; } diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/core/src/components/segment-button/segment-button.ionic.scss index 0a69618e2fa..0189f2b1c03 100644 --- a/core/src/components/segment-button/segment-button.ionic.scss +++ b/core/src/components/segment-button/segment-button.ionic.scss @@ -63,6 +63,10 @@ height: globals.$ion-scale-600; } +::slotted(i.ph) { + font-size: globals.$ion-scale-600; +} + // Segment Button: Checked // All slot content should have the checked color even when it's not label or icon // -------------------------------------------------- diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 2ba5f722406..feaaff1c42e 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -214,6 +214,10 @@ ::slotted(ion-icon) { width: globals.$ion-scale-400; height: globals.$ion-scale-400; + + font-size: globals.$ion-scale-400; + + line-height: 1; } .select-icon { diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 00aa55a209d..39ec3a2c81e 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -5,6 +5,7 @@ import type { NotchController } from '@utils/forms'; import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms'; import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; +import { renderIcon } from '@utils/icon'; import { printIonWarning } from '@utils/logging'; import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays'; import type { OverlaySelect } from '@utils/overlays-interface'; @@ -1107,14 +1108,14 @@ export class Select implements ComponentInterface { * next to the select text. */ private renderSelectIcon() { + const theme = getIonTheme(this); const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this; - let icon = selectCollapsedIcon; + const icon = isExpanded ? selectExpandedIcon : selectCollapsedIcon; - if (isExpanded) { - icon = selectExpandedIcon; - } + // Use the font glyph for the default ionic icon; null forces SVG for custom icons. + const ionicIconClass = icon === caretDownRegular ? 'ph-caret-down' : null; - return ; + return renderIcon(theme, ionicIconClass, icon, { class: { 'select-icon': true }, part: 'icon' }); } private get ariaLabel() { diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 49237e9cf10..a3ee094c164 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3c7eddcff93..708baa49484 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0722594bd1c..cdf897ad13d 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8916055947a..df769cbc2d4 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index df143b6ed1d..454e0339a57 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0722594bd1c..cdf897ad13d 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1aa5de0e86e..4b1ea6480ba 100644 Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index c9bb51c6f92..335b48c697a 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 74eaa816518..16e0cca32ec 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index e29fe6bf731..cea0a0e1053 100644 Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index bdfe3755776..b71e85f1a73 100644 Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index d725402c9b8..23cfd86462f 100644 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index 0fc3a95a252..9d4ec991533 100644 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 60ecf3d7d47..57d0ebc4159 100644 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png index f8568a4a92e..e8b5dc2efd4 100644 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png index ad8914aa54c..548d56dd742 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8906d314cb5..1eabcba685e 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png index c8af1487200..e7bf3a42722 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png index bee50c22fb0..6e3d915c43f 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4dfa0daf946..b42a3935ffc 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png index a17966bd0e2..ca1aecfa846 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 74fd7d2ea88..829f8db4f88 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png index f0679dd3960..47c929ff620 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png index ad8914aa54c..2772581a559 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8906d314cb5..19697aa1e89 100644 Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5a19ea8e6a6..b649fab4b46 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png index cb427021a95..67a7633c16c 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 013b9e24f03..91116da211d 100644 Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 03073f355aa..8c8a513dbae 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png index 3fca705c4b1..d9a627491e4 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index dbc6a0d21d4..899a0d553d2 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png index 8bef4f6d193..5950000dcf6 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png index d1891694545..e8931f55ae0 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png index d392d08555a..40412f0e82a 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png index 5a2da97c964..a47b94f757c 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png index bbfe0e65a52..6ebcc90df37 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 85505475e89..9aefbb2e670 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png index dd1f279f4e4..9c47e269e12 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1118d2fc3c6..8533769d9fe 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png index 6f14f8b7f7e..9d947242766 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png index f759f0bbd29..86ab541a28b 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png index ad381421981..061697ed4de 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index f3031ae1282..1d9c5797941 100644 Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5ac6f7adf85..c6ffeb181f6 100644 Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7fb19675c7c..0769d299875 100644 Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index bd5f6a11982..fbe5995dd24 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index aabf84b50cc..efb8c5f63d2 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5ac6f7adf85..c6ffeb181f6 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index 11c0242dddc..dbb9fa1cb00 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3313ec5350e..386ed15297b 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index ab6a6abd896..c24445d6659 100644 Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1f34cd6696b..5ba0d08bb45 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0ec019c5b28..4bb0d952f43 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6cf44fd7244..8c1b6f50197 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9cc534deb4a..4521436b0ff 100644 Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index 897667b40d0..5f6b220be93 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -84,6 +84,10 @@ height: globals.$ion-scale-600; } +::slotted(i.ph) { + font-size: globals.$ion-scale-600; +} + // Tab Button Shapes // ------------------------------------------------------------------------------- diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png index d2eeb683ead..969ed354ccd 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png index fea30fab9b9..b47d610a295 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9b97eee5c38..91179602879 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index af275628dff..44775877e95 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png index 2e6152f3d73..03bf72fb418 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png index 19ad1126a49..d6b9faf427a 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png index 6822d007643..1c32e8c8398 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png index 0fe7488b7b5..ed662fdd614 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png index b4433478c4b..6eacc7c0935 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png index 5d0c336e84e..022277b55d9 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png index f7bb45a7395..a907ca5e34b 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0c8ddccd78c..6141aa926a3 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png index f9351e56d62..aef926e8762 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png index 71ae4dbc6bc..b8bfe0ae733 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png index 5dc63041819..3f7fd545868 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png index be35796ade3..f78e629d4e5 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss index f51485c9962..5bb458fcda2 100644 --- a/core/src/components/toggle/toggle.ionic.scss +++ b/core/src/components/toggle/toggle.ionic.scss @@ -115,6 +115,10 @@ .toggle-inner .toggle-switch-icon { width: globals.$ion-scale-400; height: globals.$ion-scale-400; + + font-size: globals.$ion-scale-400; + + line-height: 1; } // Toggle Label Placement - Start/Default diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 9f416ae88e1..8ec8e7b3b52 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -5,6 +5,7 @@ import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@ import { checkInvalidState } from '@utils/forms'; import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; +import { renderIcon } from '@utils/icon'; import { hapticSelection } from '@utils/native/haptic'; import { isPlatform } from '@utils/platform'; import { isRTL } from '@utils/rtl'; @@ -402,29 +403,34 @@ export class Toggle implements ComponentInterface { } private renderOnOffSwitchLabels(checked: boolean) { + const theme = getIonTheme(this); const icon = this.getSwitchLabelIcon(checked); - return ( - - ); + // Map the ionic-theme default SVGs to their Phosphor class names. + // Pass null when a custom icon is configured so the SVG is always used. + const phosphorMap: Record = { + [checkRegular]: 'ph-check', + [minusRegular]: 'ph-minus', + }; + const ionicIconClass = phosphorMap[icon] ?? null; + + return renderIcon(theme, ionicIconClass, icon, { + class: { + 'toggle-switch-icon': true, + 'toggle-switch-icon-checked': checked, + /** + * The default checked icon is being modified with + * styling that causes it to rotate by 90 degrees + * when the theme is `ios`. + * + * To prevent any rotation on a custom icon that is + * set through the config, we need to apply a class + * that handles the styling only when the default + * checked icon is being used. + */ + 'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon, + }, + }); } private renderToggleControl() { diff --git a/core/src/css/ionic/_phosphor.scss b/core/src/css/ionic/_phosphor.scss new file mode 100644 index 00000000000..6b82f7066f9 --- /dev/null +++ b/core/src/css/ionic/_phosphor.scss @@ -0,0 +1,18 @@ +// Phosphor icon font declaration for the ionic theme. +// +// @font-face is a global browser resource — once declared here (in the ionic +// bundle loaded at document level), the "Phosphor" font family is available +// everywhere, including inside shadow DOM components. +// +// Glyph rendering is handled via String.fromCodePoint() in renderIcon (see +// src/utils/icon.tsx), so no class selectors are needed here. +// +// Font files are copied from @phosphor-icons/web into css/fonts/ during build +// (see scripts/copy-fonts.mjs). Paths here are relative to css/ionic/. +@font-face { + font-family: "Phosphor"; + src: url("../fonts/Phosphor.woff2") format("woff2"), url("../fonts/Phosphor.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: block; +} diff --git a/core/src/css/ionic/bundle.ionic.scss b/core/src/css/ionic/bundle.ionic.scss index af41dee266c..642177b0866 100644 --- a/core/src/css/ionic/bundle.ionic.scss +++ b/core/src/css/ionic/bundle.ionic.scss @@ -1,3 +1,6 @@ +// Phosphor icon font (ionic theme only) +@use "./phosphor"; + // Core CSS, always required @forward "./core.ionic"; diff --git a/core/src/utils/icon.tsx b/core/src/utils/icon.tsx new file mode 100644 index 00000000000..a33d6a45747 --- /dev/null +++ b/core/src/utils/icon.tsx @@ -0,0 +1,66 @@ +import { icons } from '@phosphor-icons/core'; +import { h } from '@stencil/core'; + +/** + * Returns the Unicode glyph character for a Phosphor icon class name. + * e.g. 'ph-caret-left' → the character at codepoint 0xe138 + * + * @phosphor-icons/core exposes a stable `codepoint` field (since v2.1.0). + * Using String.fromCodePoint avoids CSS class selectors entirely, which means + * glyphs render correctly inside shadow DOM without needing to pierce it. + */ +const getPhosphorChar = (ionicIconClass: string): string => { + const name = ionicIconClass.replace(/^ph-/, ''); + const entry = icons.find((i) => i.name === name); + return entry ? String.fromCodePoint(entry.codepoint) : ''; +}; + +/** + * Renders a Phosphor icon font glyph for the ionic theme, or delegates to + * ion-icon (SVG) for ios/md themes. + * + * Passing `null` for `ionicIconClass` forces SVG for that specific icon regardless + * of the theme — use this when the caller has supplied a custom SVG that must not + * be replaced by a glyph. + * + * The ionic theme renders an element with: + * - font-family: "Phosphor" as an inline style (works inside shadow DOM) + * - the glyph Unicode character as text content (no ::before CSS needed) + * + * Usage: + * renderIcon(theme, 'ph-caret-left', caretLeftSvg, { part: 'icon', flipRtl: true }) + * renderIcon(theme, null, customSvg, { part: 'icon' }) // always SVG + */ +export const renderIcon = ( + theme: string, + /** Phosphor CSS class name e.g. 'ph-caret-left', or null to force SVG. */ + ionicIconClass: string | null, + /** SVG src / ionicons icon object used when theme is not 'ionic'. */ + svgIcon: string, + props: { + part?: string; + class?: Record; + flipRtl?: boolean; + lazy?: boolean; + } = {} +) => { + const { part, class: cls, flipRtl = false, lazy = false } = props; + + if (ionicIconClass !== null && theme === 'ionic') { + return ( + + ); + } + + return