@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/dist/collection/components/searchbar/test/searchbar.spec.js

@@ -4,12 +4,30 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Searchbar } from "../searchbar";
 describe('searchbar: rendering', () => {
-    it('should inherit attributes', async () => {
+    it('should inherit properties on load', async () => {
         const page = await newSpecPage({
             components: [Searchbar],
-            html: '<ion-searchbar name="search"></ion-searchbar>',
+            html: '<ion-searchbar autocapitalize="off" maxlength="4" minlength="2" name="search"></ion-searchbar>',
         });
         const nativeEl = page.body.querySelector('ion-searchbar input');
         expect(nativeEl.getAttribute('name')).toBe('search');
+        expect(nativeEl.getAttribute('maxlength')).toBe('4');
+        expect(nativeEl.getAttribute('minlength')).toBe('2');
+        expect(nativeEl.getAttribute('autocapitalize')).toBe('off');
+    });
+    it('should inherit watched attributes', async () => {
+        const page = await newSpecPage({
+            components: [Searchbar],
+            html: '<ion-searchbar dir="ltr" lang="en-US"></ion-searchbar>',
+        });
+        const searchbarEl = page.body.querySelector('ion-searchbar');
+        const nativeEl = searchbarEl.querySelector('input');
+        expect(nativeEl.getAttribute('lang')).toBe('en-US');
+        expect(nativeEl.getAttribute('dir')).toBe('ltr');
+        searchbarEl.setAttribute('lang', 'es-ES');
+        searchbarEl.setAttribute('dir', 'rtl');
+        await page.waitForChanges();
+        expect(nativeEl.getAttribute('lang')).toBe('es-ES');
+        expect(nativeEl.getAttribute('dir')).toBe('rtl');
     });
 });

package/dist/collection/components/segment/segment.js

@@ -5,9 +5,10 @@ import { Host, h, writeTask } from "@stencil/core";
 import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Segment {
     constructor() {
@@ -419,28 +420,30 @@ export class Segment {
         current.setFocus();
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'a0b1480e0f95ed9647871c749dbd93ef7ce5b28e', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '93e49c7f9d0dc078c7a6bad31e2d33fe91fb1728', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '01b9559e574b1b194e6010295cd9bea4b6aeab1b' })));
+            }) }, h("slot", { key: '75481d77210868270ca5eaa0e13b705db5905925' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment.ios.scss"],
-            "md": ["segment.md.scss"]
+            "md": ["segment.md.scss"],
+            "ionic": ["segment.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
-            "md": ["segment.md.css"]
+            "md": ["segment.md.css"],
+            "ionic": ["segment.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/segment/test/a11y/segment.e2e.js

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Only md mode uses ion-color() for the segment button
  */
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('segment: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/segment-button/segment-button.js

@@ -4,10 +4,11 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 let ids = 0;
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
@@ -76,10 +77,10 @@ export class SegmentButton {
     }
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'fc2262b4b1cb0c3e38b3de672910543211779b98', class: {
-                [mode]: true,
+        return (h(Host, { key: '85777c6a1659339f9a0fa98ebe3e7cfbabf1653f', class: {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'in-segment': hostContext('ion-segment', this.el),
@@ -94,23 +95,25 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'd73ffb0e52b86e41fff7aafac8bd77073b494b28', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'a3d76c3191a508f47782f17602d814920dc26694', class: "button-inner" }, h("slot", { key: 'ae6479c5eec1e0f4077066a6b0ca06c13af0847f' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '593a4ec0d186520485073dc2fcdf23899924399b', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '98bb77139779f40911c1892f48dc2d5e5e5e6514', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'dfe04b5169d6237dad431e6f14391bfcea3717bb', class: "button-inner" }, h("slot", { key: '531b69c1a6617708760da7f02be0fba4a377bcf8' })), theme === 'md' && h("ion-ripple-effect", null)), h("div", { key: '27e2db764e8a1820d20f29e521dc93df5a63fc0d', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'cfbd0d89a928cce0130da46b2be406c03ab3cddb', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '71edeedd4fe69afc2a70a8b8c64b9ea0f995fdb8', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment-button.ios.scss"],
-            "md": ["segment-button.md.scss"]
+            "md": ["segment-button.md.scss"],
+            "ionic": ["segment-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-button.ios.css"],
-            "md": ["segment-button.md.css"]
+            "md": ["segment-button.md.css"],
+            "ionic": ["segment-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/select/select.ios.css

@@ -64,6 +64,7 @@
    * @prop --placeholder-color: Color of the select placeholder text
    * @prop --placeholder-opacity: Opacity of the select placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the select. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the select when focused
    * @prop --highlight-color-invalid: The color of the highlight on the select when invalid
    * @prop --highlight-color-valid: The color of the highlight on the select when valid
@@ -562,12 +563,12 @@ button {
   flex-shrink: 0;
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
@@ -682,6 +683,10 @@ button {
  *   }
  * }
  */
+:host {
+  --highlight-height: 0px;
+}
+
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;

package/dist/collection/components/select/select.js

@@ -3,16 +3,17 @@
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
-import { focusVisibleElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  * @slot start - Content to display at the leading edge of the select.
@@ -301,8 +302,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const mode = getIonMode(this);
-        const showBackdrop = mode === 'md' ? false : true;
+        const theme = getIonTheme(this);
+        const showBackdrop = theme === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -313,7 +314,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -326,7 +327,7 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const popoverOpts = Object.assign(Object.assign({ mode,
+        const popoverOpts = Object.assign(Object.assign({ theme,
             event, alignment: 'center', size,
             showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
@@ -351,9 +352,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -370,8 +371,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const mode = getIonMode(this);
-        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const theme = getIonTheme(this);
+        const alertOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -488,8 +489,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -538,24 +539,24 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { isExpanded, toggleIcon, expandedIcon } = this;
         let icon;
         if (isExpanded && expandedIcon !== undefined) {
             icon = expandedIcon;
         }
         else {
-            const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+            const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
             icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
     get ariaLabel() {
-        var _a, _b;
-        const { placeholder, el, inputId, inheritedAttributes } = this;
+        var _a;
+        const { placeholder, inheritedAttributes } = this;
         const displayValue = this.getText();
-        const { labelText } = getAriaLabel(el, inputId);
-        const definedLabel = (_b = (_a = this.labelText) !== null && _a !== void 0 ? _a : inheritedAttributes['aria-label']) !== null && _b !== void 0 ? _b : labelText;
+        // The aria label should be preferred over visible text if both are specified
+        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
         /**
          * If developer has specified a placeholder
          * and there is nothing selected, the selectText
@@ -583,12 +584,12 @@ export class Select {
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
         const justifyEnabled = !hasFloatingOrStackedLabel;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -610,8 +611,8 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '39718ddb0685972f736089a6b4ec681aaa494bf4', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '337114bfda3c5a604454ebab1cd38da546922276', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -626,20 +627,22 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '6d51bb692bda00bf34251520eba872c408128a59', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'd1544ae348f6013940e77b4c2fb5e53b24322414', class: "select-wrapper-inner" }, h("slot", { key: '53f334dbe960619583c1fe196be18584edb196ac', name: "start" }), h("div", { key: '924ae05b68bc9811b80acb4a9973b3ecfde00379', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '916a4d542c8cffdf4be8f62c77eee6acc2e5ac7b', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
+            }) }, h("label", { key: '82de04dbd97ad93a450a22272277be58adbd8c71', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '279eb8a35c0d45b0db959e62333bd9d5960066e6', class: "select-wrapper-inner" }, h("slot", { key: 'dbd606bdf90addb0e10ecbe1bbeae2def48cb2fa', name: "start" }), h("div", { key: '3eda8840500347860639334014fdbd843b3f6e81', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '76c1c1e72e87531f7c106fc9d2f5e477c6c7e626', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select.ios.scss"],
-            "md": ["select.md.scss"]
+            "md": ["select.md.scss"],
+            "ionic": ["select.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"]
+            "md": ["select.md.css"],
+            "ionic": ["select.md.css"]
         };
     }
     static get properties() {
@@ -738,7 +741,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in the `\"md\"` theme."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -938,7 +941,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
+                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
                 },
                 "attribute": "toggle-icon",
                 "reflect": false
@@ -955,7 +958,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
+                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `\"md\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "attribute": "expanded-icon",
                 "reflect": false

package/dist/collection/components/select/select.md.css

@@ -64,6 +64,7 @@
    * @prop --placeholder-color: Color of the select placeholder text
    * @prop --placeholder-opacity: Opacity of the select placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the select. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the select when focused
    * @prop --highlight-color-invalid: The color of the highlight on the select when invalid
    * @prop --highlight-color-valid: The color of the highlight on the select when valid
@@ -562,12 +563,12 @@ button {
   flex-shrink: 0;
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
@@ -902,7 +903,7 @@ button {
  */
 :host(.select-fill-outline.select-expanded),
 :host(.select-fill-outline.ion-focused) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
@@ -1106,6 +1107,7 @@ button {
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --highlight-height: 2px;
 }
 
 .select-icon {
@@ -1137,7 +1139,7 @@ button {
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
   transform: scale(0);
   transition: transform 200ms;
   background: var(--highlight-color);
@@ -1185,31 +1187,6 @@ button {
   color: var(--highlight-color);
 }
 
-/**
- * Adjust the arrow so that it appears in the middle
- * of the item. If the item has fill="outline" then
- * we should adjust the entire ion-select rather than
- * just the outline so the selected value appears centered too.
- */
-:host-context(.item-label-stacked) .select-icon,
-:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
-:host-context(.item-label-floating.item-fill-outline) {
-  transform: translate3d(0,  -9px,  0);
-}
-
-:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon {
-  transform: rotate(180deg);
-}
-
-/**
- * Ensure that the translation we did
- * above is preserved when we rotate the select icon.
- */
-:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,
-:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon {
-  transform: translate3d(0,  -9px,  0) rotate(180deg);
-}
-
 :host(.select-shape-round) {
   --border-radius: 16px;
 }

package/dist/collection/components/select/test/a11y/select.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: a11y'), () => {
         test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/select/test/highlight/select.e2e.js

@@ -4,8 +4,8 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: highlights'), () => {
-        test.describe('input: no fill', () => {
+    test.describe(title('select: highlights'), () => {
+        test.describe('select: no fill', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -33,8 +33,36 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-no-fill-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-no-fill-custom-highlight`));
+            });
         });
-        test.describe('input: solid', () => {
+        test.describe('select: solid', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select fill="solid" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -62,8 +90,36 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-solid-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="solid" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-solid-custom-highlight`));
+            });
         });
-        test.describe('input: outline', () => {
+        test.describe('select: outline', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select fill="outline" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -91,6 +147,34 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-outline-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="outline" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-outline-custom-highlight`));
+            });
         });
     });
     test.describe(title('select: expanded highlight'), () => {

package/dist/collection/components/select/test/select.spec.js

@@ -56,6 +56,28 @@ describe('ion-select', () => {
         expect(propEl).not.toBe(null);
         expect(slotEl).toBe(null);
     });
+    it('should prefer aria label if both attribute and visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Select],
+            html: `
+        <ion-select aria-label="Aria Label Text" label="Label Prop Text"></ion-select>
+      `,
+        });
+        const select = page.body.querySelector('ion-select');
+        const nativeButton = select.shadowRoot.querySelector('button');
+        expect(nativeButton.getAttribute('aria-label')).toBe('Aria Label Text');
+    });
+    it('should prefer visible label if only visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Select],
+            html: `
+        <ion-select label="Label Prop Text"></ion-select>
+      `,
+        });
+        const select = page.body.querySelector('ion-select');
+        const nativeButton = select.shadowRoot.querySelector('button');
+        expect(nativeButton.getAttribute('aria-label')).toBe('Label Prop Text');
+    });
 });
 describe('select: slot interactivity', () => {
     test('should not prevent click handlers from firing', async () => {