diff --git a/core/package-lock.json b/core/package-lock.json index f5da692506..a3a3545596 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "@phosphor-icons/core": "^2.1.1", - "@stencil/core": "4.33.1", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -2552,9 +2552,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.33.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz", - "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -6749,29 +6749,6 @@ "@stencil/core": "^4.35.3" } }, - "node_modules/ionicons/node_modules/@stencil/core": { - "version": "4.38.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", - "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", - "license": "MIT", - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=16.0.0", - "npm": ">=7.10.0" - }, - "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" - } - }, "node_modules/is-alphabetical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", diff --git a/core/package.json b/core/package.json index 38472ba32a..e16c09a6fb 100644 --- a/core/package.json +++ b/core/package.json @@ -32,7 +32,7 @@ ], "dependencies": { "@phosphor-icons/core": "^2.1.1", - "@stencil/core": "4.33.1", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, diff --git a/core/src/components/input-otp/input-otp.common.scss b/core/src/components/input-otp/input-otp.common.scss index b905146155..6af7c8cee6 100644 --- a/core/src/components/input-otp/input-otp.common.scss +++ b/core/src/components/input-otp/input-otp.common.scss @@ -129,13 +129,6 @@ background: var(--separator-color); } -// Fills -// -------------------------------------------------- - -:host(.input-otp-fill-outline) { - --background: none; -} - // States // -------------------------------------------------- diff --git a/core/src/components/input-otp/input-otp.ionic.scss b/core/src/components/input-otp/input-otp.ionic.scss index ac67b4c455..29322bc527 100644 --- a/core/src/components/input-otp/input-otp.ionic.scss +++ b/core/src/components/input-otp/input-otp.ionic.scss @@ -68,20 +68,24 @@ // -------------------------------------------------- :host(.input-otp-shape-round) { - --border-radius: #{globals.$ion-border-radius-400}; + --border-radius: #{globals.$ion-round-xl}; } :host(.input-otp-shape-soft) { - --border-radius: #{globals.$ion-border-radius-200}; + --border-radius: #{globals.$ion-soft-xl}; } :host(.input-otp-shape-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; + --border-radius: #{globals.$ion-rectangular-xl}; } // Fills // -------------------------------------------------- +:host(.input-otp-fill-outline) { + --background: #{globals.$ion-bg-input-default}; +} + :host(.input-otp-fill-solid) { --border-color: #{globals.$ion-bg-input-bold-default}; --background: #{globals.$ion-bg-input-bold-default}; diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index e36a00b0d3..f2eeecba1c 100644 Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 8fdd61663d..665f5346c6 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -71,7 +71,6 @@ slot[name="end"]::slotted(*) { // Item: Focused // -------------------------------------------------- - :host(.ion-focused) .item-native::after { @include globals.border-radius(inherit); @include globals.position(0, 0, 0, 0); @@ -112,3 +111,14 @@ slot[name="end"]::slotted(*) { :host(.item-lines-none) { --inner-border-width: #{globals.$ion-border-size-0}; } + +// Item in Select Modal +// -------------------------------------------------- +:host(.in-select-modal) { + --background-focused: #{globals.$ion-bg-neutral-subtlest-press}; + --background-focused-opacity: 0; +} + +:host(.in-select-modal.ion-focused) .item-native { + --border-radius: #{globals.$ion-border-radius-400}; +} diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index e7c95b4ade..97459b92ad 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -407,6 +407,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac 'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor, 'item-disabled': disabled, 'in-list': inList, + 'in-select-modal': hostContext('ion-select-modal', this.el), 'item-multiple-inputs': this.multipleInputs, 'ion-activatable': canActivate, 'ion-focusable': this.focusable, diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 12eb06e6ed..698d86126b 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 76007713d0..8bdf277b7d 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index ae8b0a3014..d9b875195c 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss index 6a53e9dbb8..cd0df6ce3a 100644 --- a/core/src/components/select-modal/select-modal.ionic.scss +++ b/core/src/components/select-modal/select-modal.ionic.scss @@ -67,4 +67,9 @@ ion-content { --padding-end: #{globals.$ion-space-400} !important; /* stylelint-disable-next-line declaration-no-important */ --padding-bottom: #{globals.$ion-space-1200} !important; + + // Set the background to the focused element within a radio group only when there is a checked radio + &:has(.radio-checked) .ion-focused:not(.item-radio-checked) { + --background-focused-opacity: 1; + } } diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 1cef7e06e3..af3678d0e1 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -38,6 +38,12 @@ .select-text { min-width: globals.$ion-space-400; + + color: globals.$ion-text-subtlest; +} + +:host(.has-value) .select-text { + color: globals.$ion-text-default; } // Select Label @@ -208,6 +214,12 @@ .select-icon { transition: transform 0.15s globals.$ion-transition-curve-expressive; + + color: globals.$ion-text-subtlest; +} + +:host(.has-value) .select-icon { + color: globals.$ion-text-subtle; } /** @@ -219,13 +231,15 @@ @include globals.transform(rotate(180deg)); } -.select-icon { - color: globals.$ion-primitives-neutral-800; -} - // States // ---------------------------------------------------------------- +// Fill types +// ---------------------------------------------------------------- +:host(.select-fill-solid) { + --background: #{globals.$ion-bg-input-bold-default}; +} + // Disabled // --------------------------------------------- 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 d4e0adc03d..c9bb51c6f9 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 28aed88baf..74eaa81651 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/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 67e2f627e4..aaad44a36e 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts index ca82fd86f7..5d3a023e03 100644 --- a/core/src/components/select/test/custom/select.e2e.ts +++ b/core/src/components/select/test/custom/select.e2e.ts @@ -57,6 +57,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti