voyager-ionic-core 8.0.0-beta.2 → 8.0.0-rc.0

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

@@ -563,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;
 }

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: '00e3a22ca92044556f50b029d5d52178eedd00ca', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '34a8ad246debbd7f1220ba1816d6cf427a24df8f', 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: 'b286c77110501d17e7defa9b3c4f02a1aba620f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'e2de491d3cb57678d30c0383a0782cfdd28abba0', class: "select-wrapper-inner" }, h("slot", { key: '7b9054dbcdab00505a9195eb1674d96322741614', name: "start" }), h("div", { key: '874e4da16c1140be0b5043330e0538936d13ac56', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '64256b876c88e02852c8745f14c10636c48a6a72', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
+            }) }, h("label", { key: 'b4deb5c56fd7d97d8d09850e9b2758cecc59160a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '5608f30189b941e8d737480308633376d7c554ec', class: "select-wrapper-inner" }, h("slot", { key: '5448dcd362880effebec59b84ca81b140bf078b7', name: "start" }), h("div", { key: 'ee140365597d0857621b4c4cd0577e0c51355f85', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0aff40616a2ffaae06dfbb1282072d48435b220f', 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

@@ -563,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;
 }

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/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: 'd26050569d40011a686a66ab7bc59ffa7163d264', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '7830b6152ba185b327d02fe96fd415cdcd16f48d', 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: '7b93c55895f66fc6431862b7b47eeb60eaa8c292', class: getIonMode(this) }, h("ion-list", { key: '3a74ec35ec9b627a192d8ad3a206f81df838342b' }, 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: '81e4df60ad6dab49bdde30f4c3e460ba425f0c89', class: getIonMode(this) }, h("ion-list", { key: '940f13aab8c6cebbeb7d4b6d4d64b3c67d4c953d' }, 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: 'f6b1a1888a3cac52acbeb4957ca32befd6bc52f8', class: {
+        return (h(Host, { key: 'a093b75e3cac98eed870a682f55a6a305d6ba0ba', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '1e61b9d249f8e3bcb55c06de8311c224866b9632' }, "\u00A0")));
+            } }, h("span", { key: 'e73bb72ba6e57b4e5ddbe03acdb844b0ba63a0b9' }, "\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: 'd33d08486ee9d9069abbe37b17e58fc2c321a414', class: createColorClasses(self.color, {
+        return (h(Host, { key: '68452be6b1ad1699bb8167dfaf235328cb7f5358', 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: '0f83e45ded140540bf43da4c5ff2c3540cc3b74b', class: {
+        return (h(Host, { key: 'a8dd60d8f80847cd406bf1776c89209192a424b9', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '77ff2487fa265f9f5e96fdffad80dc9c417f896a' })));
+            } }, h("slot", { key: '85c037c53bf8447724aac28260a0d8dab3102525' })));
     }
     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: '4892bdb4aab5f2e2bb08e78fd7f67b3902ada693', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '1a58c58f3d721e840fc2bb09a4f93c47ff0ce1dc', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'd919df91de8fd547581329e566bddacac64509a0' })));
+            } }, h("slot", { key: '0189bc368d456b93c376c363216d6535f45a8822' })));
     }
     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: 'cbebdd59017a50a71e4e9e6ae831f4ca6eb64884', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '1a8f53e428102e3433006244351fd45616d469f3', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'b58c66562e91f3584a270c4c755c6bd8c165e634' })));
+            }) }, h("slot", { key: 'f7b344751801feeada1e1fbd3e35442b9cce578e' })));
     }
     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: '6cbc09067f12f3b643f2bfc3bdc1eddf81b00daa', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '2311364c7e028b9e6658f78405983e895c5f30ed', 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: '5626f8bf8ddb30fb03773d816ec5fd6417d59391' }, 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: 'ad789c6d82860eed68fc6c56d15143f989756ba3', class: "button-inner" }, h("slot", { key: '1cf17817e025e371664bedcfd8268b452674159d' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: 'a5835459b16a4c2db298de8cb75c78a88b349dcc' }, 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: 'e19e23bbb63f8ceb9e047fc4e3b518f824645398', class: "button-inner" }, h("slot", { key: 'f6cbfa231dde5f46147bccd99c40ab974be549b2' })), 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: 'ec86c6800e70022ebd33b9c7fa39bf14cee242ba', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '51f603c67624eccc49c916acac0cf67e6386c665', name: "top" }), h("div", { key: '69c8654e9b5be1cc36603c3c314d4acf14dfeef9', class: "tabs-inner" }, h("slot", { key: 'ff8c8349f2bfd218e85be3abac695d1bc9ffadba' })), h("slot", { key: 'ab95302bfe9a2d704f6e95545b1eee6ce73c34d8', name: "bottom" })));
+        return (h(Host, { key: '05f1607d092d5bef9f1f42dd46d4bec6caa58f15', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '8e175dbf3afeb76c0b3a794b3064a2191b1b5fbc', name: "top" }), h("div", { key: 'd7120d2f0dc58cca23c0854e042a4d4b8fde4db6', class: "tabs-inner" }, h("slot", { key: 'a3651076ad9ab1c6cf56a7b82172ff59930d1963' })), h("slot", { key: 'a719a23f813740dc2c03d21af0c2fe28f1b4f8bb', 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: 'b52025909e5353fd8f0626b168f89ef211d3cbaf', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7481d3ae97e8623e9cdbf7702b16465f9aaa13bf', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '7fbaf1cfb6da0244e98c54bb79f18b6641b8ca0c' })));
+            }) }, h("slot", { key: 'ae2ed8d29d2e52914f0d38b804e1cdc8941c9c64' })));
     }
     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(`

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

@@ -9,9 +9,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="start" fill="solid" value="100" 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-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');
@@ -21,9 +25,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="floating" fill="solid" value="100" 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-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');

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

@@ -670,12 +670,12 @@
   margin-top: 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;
 }

package/dist/collection/components/textarea/textarea.js

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'e2ac4428f0e3268ac0507b331b0badd8dbfa5010', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bb02bfa6a2f0f80d98df5a556941dfe4e6167f1a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'a5a566c5d91e8d74449f172fb64093777e1bf9c3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'fc2bbf87535d133f52e27be986e5fcfac987f986', class: "textarea-wrapper-inner" }, h("div", { key: '8834f1e7bf4853087a8e7fd0dfe23106cdba5ef3', class: "start-slot-wrapper" }, h("slot", { key: 'd4014b4b58f3c1ee1bc25ff712a45d4720b38c4d', name: "start" })), h("div", { key: 'f9f34505f0e2dfb647ae1b727e406b522d0891a2', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '4bcb6eb6becdc47ce2056162cb8bb0d727879260', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '0605291843bd7c4cf59b44a970cb43830e825362', class: "end-slot-wrapper" }, h("slot", { key: '61a90e1625860e662e4526d4b88653edb6ecb5b4', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '1b94ad5bc71dd4441fe6d35690ba2d8e19e4f59c', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'cd3143f63bf715782f849a4d29549473d5ee9a80', class: "textarea-wrapper-inner" }, h("div", { key: 'bebcda4eed228f9742fb3446e5b5d27daf2d2dd4', class: "start-slot-wrapper" }, h("slot", { key: '4cc32fbeae35ae04914183abc4e300aa21863ec6', name: "start" })), h("div", { key: '6f43f54dd8e0a548bc8b376025fb8f914d705130', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '11b30015d9b5daf6781651a1d0111d2be893f4c6', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '7dc55f082b3268b78b1f8230ce81c9b870d945a8', class: "end-slot-wrapper" }, h("slot", { key: '054c0a7e052a301c00f8fe3cb975e61e7a7b4d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -928,30 +928,6 @@ export class Textarea {
                         }
                     }
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }, {
                 "method": "ionBlur",
                 "name": "ionBlur",

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

@@ -670,12 +670,12 @@
   margin-top: 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;
 }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '85a0eb73f012ab18ad8b03e63aca9488dd11a4d7', class: getIonMode(this) }, h("slot", { key: 'a335c711d1987615cfcc953958edc0d63fbccca2' })));
+        return (h(Host, { key: 'b1fe245cf42f0462336519d07afd6c91eef388cf', class: getIonMode(this) }, h("slot", { key: '5e0f575864fcd9ae03ec8f5f7eb915efcf568337' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '13fcf9c4fea765a4580a2c99aa03a25304d310de', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4e7a269caceb9cf7a71c3ba5dc15903a72203132', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'a0ad40298bdea5687c6ee4c873bd2926603df0f7', class: "toolbar-title" }, h("slot", { key: 'b08edc05432144aec791c10eec1ad23030fcfa1f' }))));
+            }) }, h("div", { key: 'e42d43e85a57a2ac16579021df43ade524f1d9bf', class: "toolbar-title" }, h("slot", { key: '2319bcfdb2b79eec9c03db84bea2a9f133cc8576' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/test/a11y/toast.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(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
     test.describe(title('toast: Axe testing'), () => {
         test('should not have any axe violations with inline toasts', async ({ page }) => {
             await page.setContent(`
@@ -178,7 +178,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * High contrast mode tests
  */
-configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], palettes: ['high-contrast-dark', 'high-contrast'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('toast: high contrast: buttons'), () => {
         test.beforeEach(async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/toast/toast.js

@@ -388,9 +388,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '23e039d40ed3f698142abbf2eff13acc0d70b52e', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ebab697ab245b8ffe7163c59ee059d143242845a', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'c3b790f76618c70f00c0ac319faab0bf5d30fd07', class: wrapperClass }, h("div", { key: 'b05c2a16b23d9d5ebe8e9e8448ca74ce9ee2aeaa', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '06da7439fe6ac393b19721edd4b4c21cfc3d4521', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '94d1bcbb17cb4ed81ec67d63ccf61822fedbed94', class: wrapperClass }, h("div", { key: 'd10a99dcdf94d70003b70dea7d965c05baefa934', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '6475020a6890eb79bb37638c0ad0267f1cbf89fb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/test/a11y/toggle.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('toggle: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/toggle/toggle.js

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '4404b52b62c84c2b9c7fa6358f8faf5a7f6a2e02', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '9ea705862e0a6c8c3250d19d6487ba5a312557f4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'b626abcebb56f70fc3849ae3f7cdd4d99e92ee02', class: "toggle-wrapper" }, h("input", Object.assign({ key: '30bf51409249b0195e802eb7c68a2a67a8fa7855', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '24da2e034d1c2fcbd851438b2680dd5683ec50df', class: {
+            }) }, h("label", { key: '6347141bd48c42c10f358bdf95ee5c3e9719f7e7', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'a81935c322ccdec55723986bc69556833e057b7b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '0ab294895807335c63c9a31685d861a9f75f0129', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '69b07934847a1c374e1016fd5cbcb7aba27a03ba' })), h("div", { key: 'a8a33696c7aa287ccea05e6560b5433b1da00598', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '918de14911b5c1453ac1b817a92614d80fe81082' })), h("div", { key: 'f7f8b23c1de4eacdf912034286d51d88dde09699', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -349,7 +349,7 @@ export class Toggle {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+                    "text": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
                 },
                 "attribute": "alignment",
                 "reflect": false,

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'a7b140e85cb60a8bef52dcc01c0ca95cf4dd2339', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'bdca37c9e022475501993660e60549aae897a1c6', class: "toolbar-background" }), h("div", { key: '586abce4db3f2726ce00876565cfc966df54db2c', class: "toolbar-container" }, h("slot", { key: '124b60b8fdd6b3f9bf3c97122890444bc7e1c13d', name: "start" }), h("slot", { key: '8581916125eb38d66b4f6e0e2c674eb09a4a54a0', name: "secondary" }), h("div", { key: '0f786a72d646957fa445e30c04a0ce2c2dbe1a2b', class: "toolbar-content" }, h("slot", { key: 'be4e90c43db8c0cd596def6239381913169621b7' })), h("slot", { key: '00c87247e89b99e7c1f68367247d590b12f7a106', name: "primary" }), h("slot", { key: 'b2548f6ed8bec893e6f1e782eb27c3be24cac10c', name: "end" }))));
+            })) }, h("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), h("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, h("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), h("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), h("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, h("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), h("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), h("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -31,7 +31,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
         });
     });
 });
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     test.describe(title('typography: a11y'), () => {
         test('should not have accessibility violations for anchor tags', async ({ page }) => {
             /**

package/dist/collection/themes/test/colors/theme.e2e.js

@@ -50,7 +50,7 @@ const styleTestHelpers = `
  * 6) The base color as the text color against the base color at 0.12 opacity as the background color
  * 7) The base color as the text color against the base color at 0.16 opacity as the background color
  */
-configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
     test.describe(title('theme'), () => {
         test.beforeEach(({ skip }) => {
@@ -117,7 +117,7 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa
         }
     });
 });
-configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-contrast-dark'] }).forEach(({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
     test.describe(title('theme'), () => {
         test.beforeEach(({ skip }) => {