voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.3

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

@@ -420,14 +420,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a0b1480e0f95ed9647871c749dbd93ef7ce5b28e', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '78c3072c35c9f62f62cd88e6a9d8eba52a09b030', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: 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: '11985d112b9a0d3a973d8b94408c793269f88225' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'fc2262b4b1cb0c3e38b3de672910543211779b98', class: {
+        return (h(Host, { key: 'b81255f116704fa84b0a3a57b16c6ab65ae07476', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ 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: '3d1a946472d5be4ec2d3ae897e795fdc8de18317', "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: 'e4ea2923bde903c79deb7f4f9608a37f05f62941', class: "button-inner" }, h("slot", { key: '2df19fbc41e1fb03ca2416ff2050c8225b0a5ce5' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '4cb31e2f3d78086d489f31ec072dad91bbfaae0e', 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: '6444409904e159e32c3901c1a0857a5558a6af55', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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,7 +3,7 @@
  */
 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";
@@ -551,11 +551,11 @@ export class Select {
         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
@@ -610,7 +610,7 @@ 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, {
+        return (h(Host, { key: '289b0bc809a87a8f66e2578f7b0155f4a8525637', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -626,7 +626,7 @@ 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: '37267c3b9e9171ff5467b9ed8f5052e9a93cbbea', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'd783e3394fa1219f858f1ff33ad982cb6732ae6d', class: "select-wrapper-inner" }, h("slot", { key: '8e274d4c6ad8d0ad876c35d3ecbeec56fa32c8b2', name: "start" }), h("div", { key: 'ed2259dfb409a45cee5ac674867699a27205d159', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '30ed3b3e19e6e9fdddbcb61dc4c84d60f90164ac', 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"; }

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 () => {

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

@@ -9,9 +9,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');
@@ -21,9 +25,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'e46b062b71c143792bb74527ba4980e02edc14b3', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '808e4cf8c5778604cfecc6f218d1d24ba06f0a87', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '07c094ea0b8ba353f6147a912eedc3c75719fd4e', class: getIonMode(this) }, h("ion-list", { key: '4d110e3e036bbfecc418d0e37fc9bc4ec0c18674' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'cc49bc02396957ee92f8cf63b363ad491d05c8d9', class: getIonMode(this) }, h("ion-list", { key: '99ef366c7a8211b7ccf8847259ed113544db6a31' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-popover/test/a11y/select-popover.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: ['dark', 'light'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
     test.describe(title('select-popover: a11y'), () => {
         test('should not have accessibility violations when header is defined', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e0a84e5017cde072087d5580dd370bbd36106f99', class: {
+        return (h(Host, { key: '57a8669d26c07a5200c221be455c38d7463077ad', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '3274a42e3fd4f1b9fb285f4b982416e1f68ac766' }, "\u00A0")));
+            } }, h("span", { key: 'a3c5ba1d02f32b81c3427c38908c0527d07edaff' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'bfb8b93a58da60686f6a1e6b8a5e0d1b7dea1f5d', class: createColorClasses(self.color, {
+        return (h(Host, { key: '794ae74de8e94b2d8877712362c0a24ccb7e87f2', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -118,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ea58eb10f1e0040f8b193684085dcf0b6fb70736', class: {
+        return (h(Host, { key: 'ba9cf1cd2963611627c841ccfbbf396bbf677de5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '568992064ae695fb4de01aef59d6f6e3359e1e0f' })));
+            } }, h("slot", { key: '0f4cf2471e100df2f35dc429fabba1cd264db480' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'e67484767fa4aab6bc90db390a90eb5e24e51f14', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '84b23a0a736aa6d060c2a7756bbc96b72ef53984', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'ad6523d5a128d457d09e88739f8218cdf16152de' })));
+            } }, h("slot", { key: '102092dedc7cd1eabc7f1fe0ac5d8880a6cda85f' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '2d30e75e19d86a1eb65cff8ddab0cb059f59b224', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7939a97d199bf8298684e87be6a8340b4e8d63df', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '5b739f1bbe21c887b7810383edd2f67143ac086e' })));
+            }) }, h("slot", { key: '275e4051d3c58904fb0870e3feb918d3777b1288' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'b59ea2572a066edc9aed8e027d1849a80734ddc2', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, h("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '426bf8ee7c7c233cd161f74bf7e46cbe939ac1d5' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '955b805c6e1ed576604ab0294a7479520573ff0f', class: "button-inner" }, h("slot", { key: 'f1e6dc9f80bc27c956f2333f28f5440a78f2dd6c' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), h("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, h("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), h("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
+        return (h(Host, { key: 'ee98a688e181f29f70bf67d8ac9a74f6863de070', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd0fab7c4acb24591931523584c8f2d0a0685058a', name: "top" }), h("div", { key: '0a71bcbc44d45b0f47834f055e13a4d5ad2ec189', class: "tabs-inner" }, h("slot", { key: 'df40115d87f04d6068b1d44d4eef26d51435405a' })), h("slot", { key: '1ba4b7ff756fec9954645f13b295121fe2dc3ca3', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '9b808f0e1c85e39e89df51ea0a8b97bf815907ec', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
+            }) }, h("slot", { key: '200d6bf3820c9428b645abf8ec2a6f9de849e78a' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/test/a11y/textarea.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(`