Merge branch 'next' into ROU-11438

core/src/components/select/select.ionic.outline.scss

@@ -50,3 +50,23 @@
 
   box-sizing: border-box;
 }
+
+// Focus
+// ---------------------------------------------
+
+:host(.ion-focused.select-fill-outline) {
+  --border-color: var(--highlight-color);
+}
+
+:host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
+  --border-width: #{globals.$ion-border-size-050};
+}
+
+/**
+ * If the select has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.has-focus.select-fill-outline.ion-valid),
+:host(.select-fill-outline.ion-touched.ion-invalid) {
+  --border-color: var(--highlight-color);
+}

core/src/components/select/select.ionic.scss

@@ -9,14 +9,17 @@
   --background: #{globals.$ion-primitives-base-white};
   // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
   // ios and md. This will allow us to have a single color map.
-  --border-color: #{globals.current-color(neutral)};
+  --border-color: #{globals.$ion-primitives-neutral-500};
   --border-width: #{globals.$ion-border-size-025};
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
   --padding-top: #{globals.$ion-space-300};
   --padding-bottom: #{globals.$ion-space-300};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
+  --highlight-color-focused: #{globals.$ion-border-focus-default};
+  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
 }
 
 // Select Label

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

@@ -149,6 +149,53 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         await expect(container).toHaveScreenshot(screenshot(`select-solid-custom-highlight`));
       });
     });
+  });
+
+  test.describe(title('select: expanded highlight'), () => {
+    test.describe('select: no fill', () => {
+      test('should render bottom highlight', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select label="Label" class="select-expanded"></ion-select>
+        `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
+      });
+    });
+    test.describe('select: solid', () => {
+      test('should render bottom highlight', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
+        `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
+      });
+    });
+    test.describe('select: outline', () => {
+      test('should render bottom highlight', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
+        `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
+      });
+    });
+  });
+});
+
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: highlights'), () => {
     test.describe('select: outline', () => {
       test('should render valid state correctly', async ({ page }) => {
         await page.setContent(
@@ -223,46 +270,4 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       });
     });
   });
-
-  test.describe(title('select: expanded highlight'), () => {
-    test.describe('select: no fill', () => {
-      test('should render bottom highlight', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select label="Label" class="select-expanded"></ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
-      });
-    });
-    test.describe('select: solid', () => {
-      test('should render bottom highlight', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
-      });
-    });
-    test.describe('select: outline', () => {
-      test('should render bottom highlight', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
-      });
-    });
-  });
 });