@ionic/core 8.0.0-beta.2 → 8.0.0-beta.3

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: '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: '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: '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: '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: '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: 'b52025909e5353fd8f0626b168f89ef211d3cbaf', class: createColorClasses(this.color, {
+        return (h(Host, { key: '9b808f0e1c85e39e89df51ea0a8b97bf815907ec', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '7fbaf1cfb6da0244e98c54bb79f18b6641b8ca0c' })));
+            }) }, 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(`

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: '031dd0f49d577017faa1c5ec87184f8047e1be86', 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: '867331fa40e10931dc3b476ce96a5c1bf24f10d8', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0e63c53cdf36b2f5abc80f5e0327c50407785d75', class: "textarea-wrapper-inner" }, h("div", { key: '762d406affec3ff1cc42349b926f39d1a03bb86e', class: "start-slot-wrapper" }, h("slot", { key: '94f5c12011301d17c61c05794e162c06257b1e3f', name: "start" })), h("div", { key: '9f4c77548e14e61cf003c3876270838ee7ccb1c4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '7677c92431fd88cda4b3318e0eabb5747b23416c', 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: 'a3d97905a3e526a6a65fac13cc379c981bfeedd2', class: "end-slot-wrapper" }, h("slot", { key: '3edf3ecd1917595917aa960f99698eabf3268a6f', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

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: 'a399199598f8eb605a2c41e0b372609e0c1df8ee', class: getIonMode(this) }, h("slot", { key: 'a63159fa02a1339273066bf7d74ec7d5d2ed0c53' })));
     }
     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: '2e4240e81db3a6c9293b7cc0589226429c82790d', 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: '2dccef7ee6ec217b12844e0ed72401eb834ac54e', class: "toolbar-title" }, h("slot", { key: '8d109bb5cd4e883d1e47aaa6b26ac9a345de525e' }))));
     }
     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: '66dcfb5335d7476659c05a3df8f8b49f198197c5', 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: 'fb798e74b5ebcb1e17f368679d4947a490d0fdeb', class: wrapperClass }, h("div", { key: '0b39964d740f1172d172dca5af306c083f3435ae', 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: '265b36d5c914ac6a42a9a8e622237e026035a658', 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: '4a786aed54ad9c746cc3fb4cc73dc831d5cc39dc', 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: '7e0d74361076d55bf500a08c7f24856c1f712afa', class: "toggle-wrapper" }, h("input", Object.assign({ key: '1112f0a15dd0e8b39a1cb60e2bdef19e37e9a4ce', 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: 'ff94aa7e50d1b68d8131f54141209ca67b4889b9', 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: 'd43b70d600179d41f98b17b2e249b8e672096ccd' })), h("div", { key: 'c8e1bec8e42a09e3947209fdc7a31c66a474702f', 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: 'ccdad3d73213ea96f320bedcfc77dba0b1d5a1e6', 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: 'a7511bff77244f06648e7a9fa88dba7cfa341736', class: "toolbar-background" }), h("div", { key: '11347fdb377f492d454709d552754b71c0d62754', class: "toolbar-container" }, h("slot", { key: '49b7e5f7fa17329b9160f1017d00c0d39fbd1e59', name: "start" }), h("slot", { key: '23f248e4273880e4629f1149dfb3081f873d9fcb', name: "secondary" }), h("div", { key: '4f2d1b71e624c2e63427c13a1e5c4c37a422004e', class: "toolbar-content" }, h("slot", { key: '3554cda5a394ec59b6161ce45fd1c71e41dfc26c' })), h("slot", { key: 'de77e5bca3c49d3c961838681fca239ff4d4bba9', name: "primary" }), h("slot", { key: 'e3e32c04cd0558ea1cd2af1a99d527eb67de5863', 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 }) => {

package/dist/collection/utils/helpers.js

@@ -247,52 +247,6 @@ export const focusVisibleElement = (el) => {
         }
     }
 };
-/**
- * This method is used for Ionic's input components that use Shadow DOM. In
- * order to properly label the inputs to work with screen readers, we need
- * to get the text content of the label outside of the shadow root and pass
- * it to the input inside of the shadow root.
- *
- * Referencing label elements by id from outside of the component is
- * impossible due to the shadow boundary, read more here:
- * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- *
- * @param componentEl The shadow element that needs the aria label
- * @param inputId The unique identifier for the input
- */
-export const getAriaLabel = (componentEl, inputId) => {
-    let labelText;
-    // If the user provides their own label via the aria-labelledby attr
-    // we should use that instead of looking for an ion-label
-    const labelledBy = componentEl.getAttribute('aria-labelledby');
-    // Grab the id off of the component in case they are using
-    // a custom label using the label element
-    const componentId = componentEl.id;
-    let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
-    let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : null;
-    if (label) {
-        if (labelledBy === null) {
-            label.id = labelId;
-        }
-        labelText = label.textContent;
-        label.setAttribute('aria-hidden', 'true');
-        // if there is no label, check to see if the user has provided
-        // one by setting an id on the component and using the label element
-    }
-    else if (componentId.trim() !== '') {
-        label = document.querySelector(`label[for="${componentId}"]`);
-        if (label) {
-            if (label.id !== '') {
-                labelId = label.id;
-            }
-            else {
-                label.id = labelId = `${componentId}-lbl`;
-            }
-            labelText = label.textContent;
-        }
-    }
-    return { label, labelId, labelText };
-};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which

package/dist/collection/utils/test/playwright/generator.js

@@ -8,34 +8,34 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction, theme } = config;
-    if (theme === 'light') {
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
         /**
          * Ionic has many existing tests that existed prior to
-         * the introduction of theme testing. To maintain backwards
-         * compatibility, we will not include the theme in the test
-         * title if the theme is set to light.
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the test
+         * title if the palette is set to light.
          */
         return `${title} - ${mode}/${direction}`;
     }
-    return `${title} - ${mode}/${direction}/${theme}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { mode, direction, theme } = config;
-    if (theme === 'light') {
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
         /**
          * Ionic has many existing tests that existed prior to
-         * the introduction of theme testing. To maintain backwards
-         * compatibility, we will not include the theme in the screenshot
-         * name if the theme is set to light.
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the screenshot
+         * name if the palette is set to light.
          */
         return `${fileName}-${mode}-${direction}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${theme}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -50,11 +50,11 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      */
     const processedMode = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
-    const processedTheme = (_a = testConfig.themes) !== null && _a !== void 0 ? _a : DEFAULT_THEMES;
+    const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : DEFAULT_PALETTES;
     processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
-            processedTheme.forEach((theme) => {
-                configs.push({ mode, direction, theme });
+            processedPalette.forEach((palette) => {
+                configs.push({ mode, direction, palette });
             });
         });
     });
@@ -68,9 +68,9 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
 };
 const DEFAULT_MODES = ['ios', 'md'];
 const DEFAULT_DIRECTIONS = ['ltr', 'rtl'];
-const DEFAULT_THEMES = ['light'];
+const DEFAULT_PALETTES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,
-    themes: DEFAULT_THEMES,
+    palettes: DEFAULT_PALETTES,
 };

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -18,16 +18,16 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
-    let theme;
+    let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
-        theme = testInfo.project.metadata.theme;
+        palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
-        theme = options.theme;
+        palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     const output = `
@@ -39,7 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
+        ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -56,8 +56,8 @@ export const setContent = async (page, html, testInfo, options) => {
     </html>
   `;
     testInfo.annotations.push({
-        type: 'theme',
-        description: theme,
+        type: 'palette',
+        description: palette,
     });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-03-13T14:34:12",
+  "timestamp": "2024-03-20T14:30:27",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.5",
+    "version": "4.12.6",
     "typescriptVersion": "5.3.3"
   },
   "components": [
@@ -28837,7 +28837,7 @@
           "mutable": false,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "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.",
+          "docs": "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.",
           "docsTags": [],
           "default": "'center'",
           "values": [

package/dist/esm/{animation-9a23ed8d.js → animation-6a3c0abb.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-a5d50daf.js';
-import { r as raf } from './helpers-f51cf76f.js';
+import { r as raf } from './helpers-eab4f597.js';
 
 let animationPrefix;
 /**

package/dist/esm/{framework-delegate-3fd96df8.js → framework-delegate-3dede018.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-f51cf76f.js';
+import { c as componentOnReady } from './helpers-eab4f597.js';
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/esm/{helpers-f51cf76f.js → helpers-eab4f597.js}

@@ -247,52 +247,6 @@ const focusVisibleElement = (el) => {
         }
     }
 };
-/**
- * This method is used for Ionic's input components that use Shadow DOM. In
- * order to properly label the inputs to work with screen readers, we need
- * to get the text content of the label outside of the shadow root and pass
- * it to the input inside of the shadow root.
- *
- * Referencing label elements by id from outside of the component is
- * impossible due to the shadow boundary, read more here:
- * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- *
- * @param componentEl The shadow element that needs the aria label
- * @param inputId The unique identifier for the input
- */
-const getAriaLabel = (componentEl, inputId) => {
-    let labelText;
-    // If the user provides their own label via the aria-labelledby attr
-    // we should use that instead of looking for an ion-label
-    const labelledBy = componentEl.getAttribute('aria-labelledby');
-    // Grab the id off of the component in case they are using
-    // a custom label using the label element
-    const componentId = componentEl.id;
-    let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
-    let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : null;
-    if (label) {
-        if (labelledBy === null) {
-            label.id = labelId;
-        }
-        labelText = label.textContent;
-        label.setAttribute('aria-hidden', 'true');
-        // if there is no label, check to see if the user has provided
-        // one by setting an id on the component and using the label element
-    }
-    else if (componentId.trim() !== '') {
-        label = document.querySelector(`label[for="${componentId}"]`);
-        if (label) {
-            if (label.id !== '') {
-                labelId = label.id;
-            }
-            else {
-                label.id = labelId = `${componentId}-lbl`;
-            }
-            labelText = label.textContent;
-        }
-    }
-    return { label, labelId, labelText };
-};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -408,4 +362,4 @@ const shallowEqualStringMap = (map1, map2) => {
     return true;
 };
 
-export { addEventListener as a, removeEventListener as b, componentOnReady as c, renderHiddenInput as d, debounceEvent as e, focusVisibleElement as f, getElementRoot as g, inheritAttributes as h, inheritAriaAttributes as i, clamp as j, hasLazyBuild as k, getAriaLabel as l, hasShadowDom as m, assert as n, isEndSide as o, debounce as p, now as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, pointerCoord as u };
+export { addEventListener as a, removeEventListener as b, componentOnReady as c, renderHiddenInput as d, debounceEvent as e, focusVisibleElement as f, getElementRoot as g, inheritAttributes as h, inheritAriaAttributes as i, clamp as j, hasLazyBuild as k, hasShadowDom as l, assert as m, isEndSide as n, debounce as o, now as p, pointerCoord as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t };

package/dist/esm/{index-86688780.js → index-044b5a86.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-f51cf76f.js';
+import { c as componentOnReady } from './helpers-eab4f597.js';
 import { b as printRequiredElementError } from './index-9b0d46f4.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/esm/{index-6da05eef.js → index-136e99c8.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask, B as Build } from './index-5d6a0317.js';
-import { r as raf } from './helpers-f51cf76f.js';
+import { r as raf } from './helpers-eab4f597.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-fbde96b0.js');
-const mdTransitionAnimation = () => import('./md.transition-76e0020b.js');
+const iosTransitionAnimation = () => import('./ios.transition-d1c8eea2.js');
+const mdTransitionAnimation = () => import('./md.transition-0d2de76d.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/esm/{index-9d7e5d3e.js → index-95a691d4.js}

@@ -4,9 +4,9 @@
 import { d as doc } from './index-a5d50daf.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-fb295e3a.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
-import { c as componentOnReady } from './helpers-f51cf76f.js';
+import { c as componentOnReady } from './helpers-eab4f597.js';
 import { b as getIonMode } from './ionic-global-a589c12c.js';
-import { c as createAnimation } from './animation-9a23ed8d.js';
+import { c as createAnimation } from './animation-6a3c0abb.js';
 
 /**
  * baseAnimation

package/dist/esm/{index-1262064c.js → index-fa221975.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-a5d50daf.js';
-import { q as now, u as pointerCoord } from './helpers-f51cf76f.js';
+import { p as now, q as pointerCoord } from './helpers-eab4f597.js';
 
 const startTapClick = (config) => {
     if (doc === undefined) {