fix(select): update iOS icon (#27001)

core/package-lock.json

@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^3.1.0",
-        "ionicons": "^7.0.0",
+        "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -5254,9 +5254,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.0.0.tgz",
-      "integrity": "sha512-5G9gBxaUfJm0aAr/Kg5Eb/d7d+pMC65yiHjlkGATLrHSZgAzlc9l6ho0dCSdfq3wGef2QiZeNsvyChPVggfXwQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -14152,9 +14152,9 @@
       }
     },
     "ionicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.0.0.tgz",
-      "integrity": "sha512-5G9gBxaUfJm0aAr/Kg5Eb/d7d+pMC65yiHjlkGATLrHSZgAzlc9l6ho0dCSdfq3wGef2QiZeNsvyChPVggfXwQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "requires": {
         "@stencil/core": "^2.18.0"
       },

core/package.json

@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^3.1.0",
-    "ionicons": "^7.0.0",
+    "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/src/components/select/select.ios.scss

@@ -28,5 +28,10 @@
 }
 
 .select-icon {
-  color: #{$text-color-step-700};
+  width: 18px;
+  height: 18px;
+
+  // Color deviates from the iOS spec, but satisfies WCAG AAA:
+  // https://www.w3.org/TR/WCAG20-TECHS/G18.html
+  color: #{$text-color-step-350};
 }

core/src/components/select/select.md.scss

@@ -25,6 +25,8 @@
 }
 
 .select-icon {
+  width: 13px;
+
   transition: transform .15s cubic-bezier(.4, 0, .2, 1);
 
   color: #{$text-color-step-500};

core/src/components/select/select.scss

@@ -128,8 +128,6 @@ button {
   @include margin(0, 0, 0, 4px);
 
   position: relative;
-
-  width: 13px;
 }
 
 /**

core/src/components/select/select.tsx

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
-import { caretDownSharp } from 'ionicons/icons';
+import { caretDownSharp, chevronExpand } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -759,6 +759,7 @@ export class Select implements ComponentInterface {
         class={createColorClasses(this.color, {
           [mode]: true,
           'in-item': inItem,
+          'in-item-color': hostContext('ion-item.ion-color', el),
           'select-disabled': disabled,
           'select-expanded': isExpanded,
           'has-value': this.hasValue(),
@@ -895,7 +896,9 @@ Developers can use the "legacy" property to continue using the legacy form marku
    * next to the select text.
    */
   private renderSelectIcon() {
-    return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={caretDownSharp}></ion-icon>;
+    const mode = getIonMode(this);
+    const icon = mode === 'ios' ? chevronExpand : caretDownSharp;
+    return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
   }
 
   private get ariaLabel() {