fix(select): use correct focus class for styling

Author: thetaPC

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

@@ -22,7 +22,7 @@
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.has-focus.select-fill-outline.ion-valid),
+:host(.ion-focused.select-fill-outline.ion-valid),
 :host(.select-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }

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

@@ -35,9 +35,9 @@
   color: var(--highlight-color);
 }
 
-:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
+:host(.ion-focused.select-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,
+:host(.ion-focused.select-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
@@ -93,7 +93,7 @@
  * color if there is a validation state.
  */
 :host(.select-expanded) .select-wrapper .select-icon,
-:host(.has-focus.ion-valid) .select-wrapper .select-icon,
+:host(.ion-focused.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .select-wrapper .select-icon {
   color: var(--highlight-color);

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

@@ -27,7 +27,7 @@
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.has-focus.select-fill-solid.ion-valid),
+:host(.ion-focused.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }

core/src/components/select/select.scss

@@ -265,7 +265,7 @@ button {
  * The component highlight is only shown
  * on focus, so we can safely set the valid
  * color state when touched/valid. If we
- * set it when .has-focus is present then
+ * set it when .ion-focused is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -307,7 +307,7 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.has-focus.ion-valid),
+:host(.ion-focused.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }

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

@@ -65,13 +65,13 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
       await page.setContent(
         `
         <main>
-          <ion-select class="has-focus" label="Label" value="a">
+          <ion-select class="ion-focused" label="Label" value="a">
             <ion-select-option value="a">Apple</ion-select-option>
           </ion-select>
-          <ion-select class="has-focus" label-placement="floating" label="Label" value="a">
+          <ion-select class="ion-focused" label-placement="floating" label="Label" value="a">
             <ion-select-option value="a">Apple</ion-select-option>
           </ion-select>
-          <ion-select class="has-focus" fill="outline" label-placement="floating" label="Label" value="a">
+          <ion-select class="ion-focused" fill="outline" label-placement="floating" label="Label" value="a">
             <ion-select-option value="a">Apple</ion-select-option>
           </ion-select>
         </main>