Merge branch 'next' into FW-6912-card

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",
+      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==",
+      "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",

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"
   },

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
 // --------------------------------------------------
 

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};

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};
+}

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,

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;
+  }
 }

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
 // ---------------------------------------------
 

core/src/components/select/test/custom/select.e2e.ts

@@ -57,6 +57,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
         </div>
 
         <style>
+          ion-select::part(text),
           ion-select::part(container) {
             color: purple;
           }