@ionic/core 8.4.4-dev.11741101920.155e1c29 → 8.4.4-dev.11741136034.11909e03

package/components/ion-segment-button.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as addEventListener, b as removeEventListener, d as inheritAttributes } from './helpers.js';
+import { a as addEventListener, b as removeEventListener, d as inheritAttributes, p as getNextSiblingOfType } from './helpers.js';
 import { h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
@@ -43,7 +43,35 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
     valueChanged() {
         this.updateState();
     }
-    connectedCallback() {
+    waitForSegmentContent(ionSegment, contentId) {
+        return new Promise((resolve, reject) => {
+            let timeoutId = undefined;
+            let animationFrameId;
+            const check = () => {
+                if (!ionSegment) {
+                    reject(new Error(`Segment not found when looking for Segment Content`));
+                    return;
+                }
+                const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes
+                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
+                if (segmentContent && timeoutId) {
+                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+                    cancelAnimationFrame(animationFrameId);
+                    resolve(segmentContent);
+                }
+                else {
+                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+                }
+            };
+            check();
+            // Set a timeout to reject the promise
+            timeoutId = setTimeout(() => {
+                cancelAnimationFrame(animationFrameId);
+                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+            }, 1000);
+        });
+    }
+    async connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
@@ -53,11 +81,14 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        // Attempt to find the Segment Content by its contentId
-        const segmentContent = document.getElementById(this.contentId);
-        // If no associated Segment Content exists, log an error and return
-        if (!segmentContent) {
-            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+        let segmentContent;
+        try {
+            // Attempt to find the Segment Content by its contentId
+            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+        }
+        catch (error) {
+            // If no associated Segment Content exists, log an error and return
+            console.error('Segment Button: ', error.message);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
@@ -103,7 +134,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         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: '79518fc8c0d1c72604397a281bdcfdcf4e070395', class: {
+        return (h(Host, { key: 'f9da656c8eccb80e4ef30e3fa977f2dbbefbc988', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -119,7 +150,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '07acbd21d0c8b89f40160b396115dfaf65235f71', "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: '03d28f57d195e36ed5512dfe5d62c7395c06dba7', class: "button-inner" }, h("slot", { key: '9040099c71aafd9e9491b268f9f2c55773de1542' })), mode === 'md' && h("ion-ripple-effect", { key: 'd3ab01738ea620b1e6ebbf5a06fb7028072ac3dc' })), h("div", { key: 'b4e0dd212c824f6b77f9cd7fd51c581710922c3b', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'd693d0f0b628771375c5bf9d4ac6da19d8930303', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '00dbcdbd81cd74abdd39803f6840a6e477cc7b0c', "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: '5200c082a9c4788010c4fc33fe75e2b2ad28364a', class: "button-inner" }, h("slot", { key: 'cf3fce2b5d22436b84cd4367a5885df7d6a2715f' })), mode === 'md' && h("ion-ripple-effect", { key: 'f1a2816465f4c2c06644be07315bff2da77e2342' })), h("div", { key: 'aaf31c0ed39641fca698ee98d0773131f4eea6bd', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'fc556651361b7ac305aaedd25ea4afe3173abd20', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-segment-content.js

@@ -13,7 +13,7 @@ const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent ext
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '64b3965b14c749e77e9ce13b59f349d971e245c8' }, h("slot", { key: '2d0bed34f9bc93f92e713cb51e42220f3cecd8f5' })));
+        return (h(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, h("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
     }
     static get style() { return IonSegmentContentStyle0; }
 }, [1, "ion-segment-content"]);

package/components/ion-segment-view.js

@@ -105,10 +105,10 @@ const SegmentView = /*@__PURE__*/ proxyCustomElement(class SegmentView extends H
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: 'fa528d2d9ae0f00fc3067defe2a047dce77c814a', class: {
+        return (h(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: '74dc8b4d073caeff1bab272d11b9ea3e1a215954' })));
+            } }, h("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-segment.js

@@ -538,14 +538,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a64e39352050b516f7dc82ce95a4bcff8431d1d0', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', 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: 'bb3f3ec30e59e0461fa620d8961ab730cc802a4e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-select-option.js

@@ -17,7 +17,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '8c96c199ce3a3065de3fe446500f567236e0610a', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }

package/components/ion-select.js

@@ -115,7 +115,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
-        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -607,8 +606,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded } = this;
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -639,7 +638,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '457f1130a291ff1f6fdb8a112f6c32b53efdad7a', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -655,7 +654,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '4a66b0da8142d5e83f061308ccaece0737bc1d30', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '62c964f75bca42d8ec0d5026b701b0848c14f701', class: "select-wrapper-inner" }, h("slot", { key: '1c59f789706d5308763465c6bbca218e14774c81', name: "start" }), h("div", { key: '22dc110d2fe3215bc23867eb1453192d2aed547e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '13e05653f277726ea4cd1c48318c182bd106e69b', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'eab497a5e69bb956884bd0522c1503f654651226', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -688,7 +687,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "expandedIcon": [1, "expanded-icon"],
         "shape": [1],
         "value": [1032],
-        "required": [4],
         "isExpanded": [32],
         "open": [64]
     }, undefined, {

package/components/ion-skeleton-text.js

@@ -32,11 +32,11 @@ const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends
         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: 'c193f9a8e8efab5139544f047bdae4b6d421aa86', class: {
+        return (h(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'e15db679bd3c359b4df5123efd2f92e5b380fde3' }, "\u00A0")));
+            } }, h("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     get el() { return this; }
     static get style() { return IonSkeletonTextStyle0; }

package/components/ion-split-pane.js

@@ -129,12 +129,12 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '76be70d7fbebc52646a5851f47accc1006615b85', class: {
+        return (h(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '9a859530f4fb18aff43255bc3940feb9aca625d7' })));
+            } }, h("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-bar.js

@@ -60,11 +60,11 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '62303a7f9d8c98ffab51a5900c144c5117b9c543', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '5771a9828f748c2bd6b5e26758b9723c6b3de5ff' })));
+            }) }, h("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-button.js

@@ -76,7 +76,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
             rel,
             target,
         };
-        return (h(Host, { key: 'a86d441d8df350fe991f2f948fc6b6ad007728f7', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5976c45943ea7ea8e7c1a85fc9996de421439f08', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -88,7 +88,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '8dfe1ccff2cf21601c5aea7f7f877c0fbe384e09' }, 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: '3f557cf6e96e22b9318b4aee19ede810eb7fb720', class: "button-inner" }, h("slot", { key: '836dd090dbe3c2ea97dc263fca7d01dea6ea0eb6' })), mode === 'md' && h("ion-ripple-effect", { key: '488a924fd04602c1b23e03d1a4c84dfa0f2ca03d', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, 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: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, h("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && h("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-tab.js

@@ -55,10 +55,10 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '2107ece2f1ebdf748bac8adb78a9ad67e7fc9057', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b4a1bc1aa79f6b82b8f77b544bcb74e65229b541' })));
+            } }, h("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tabs.js

@@ -150,7 +150,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'd357c4607cfc89fb88404fe12ea7ef5b397fe6bf', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '18661896589a4ab3c74164f448b928abec9b4db0', name: "top" }), h("div", { key: '3bf30ea2540a196e868a78a861824b4b5d933afd', class: "tabs-inner" }, h("slot", { key: '7cfc154d4d6c1642188ab6508a6be72c8234585e' })), h("slot", { key: '8057679c959195cbdfae156b8ae0cbfd978c5037', name: "bottom" })));
+        return (h(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), h("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, h("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), h("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
     }
     get el() { return this; }
     static get style() { return IonTabsStyle0; }

package/components/ion-text.js

@@ -17,9 +17,9 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0c2546ea3f24b0a6bfd606199441d0a4edfa4ca1', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'b7623ccb06f9461090a1f33e9f85886c7a4d5eff' })));
+            }) }, h("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
     }
     static get style() { return IonTextStyle0; }
 }, [1, "ion-text", {

package/components/ion-textarea.js

@@ -379,7 +379,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'c0dabc66193c41188c817799e45b36abbf097ba1', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd6e25c83d8eab8cb1a5b6ab411c9a13847f69f8d', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -388,7 +388,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'dce1ce6794b914975d93f16f4e1a5721a5f3fc73', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '361ce31a9a22d8d87fb2bbd134fda3d6c66ba0fe', class: "textarea-wrapper-inner" }, h("div", { key: 'e7a7e439d0e723c029951f9ee67adba1694b33d2', class: "start-slot-wrapper" }, h("slot", { key: 'efe797a88b0c2d6067217f7b32fea7526beed90f', name: "start" })), h("div", { key: '21375f64876bc68e25d2de13299a9f3acde2c370', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '3771fc6c31a61f7d9ba41f69fa12987aa2ec0c61', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: 'd81dfd5d6947c3b4ee1bff367080419b9e3ed81c', class: "end-slot-wrapper" }, h("slot", { key: '2b6ab3f6bb66652e6b31ad11bc849bd386014721', name: "end" }))), shouldRenderHighlight && h("div", { key: 'd37ad4cc35eb7fef873ab41ee164165d18703919', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'f840a5be2b776a4b9c18c6da24e0b7d3d4838fee', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '979461fc0d4684926d79d75759c63c6867b7622b', class: "textarea-wrapper-inner" }, h("div", { key: '88f0d5d4bac29597cc2588e5b2ed72fb4fbe153d', class: "start-slot-wrapper" }, h("slot", { key: '21dcca0e59c1260e3d0d1e126c1c590de15c4bad', name: "start" })), h("div", { key: '3c48a4bb3d763a389d3429123e7c110064b9b8d4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '1550599ad15b3f215c104c014e90711f073ace8b', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: '4f01ab4d2994a6de6f49eb9ed2e310d00daf21b2', class: "end-slot-wrapper" }, h("slot", { key: '501e288b6807e039972bb4f0b63906114255518a', name: "end" }))), shouldRenderHighlight && h("div", { key: 'd3008eed34494aa9f8e98a28eac3b465dc4c2bd0', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-thumbnail.js

@@ -14,7 +14,7 @@ const Thumbnail = /*@__PURE__*/ proxyCustomElement(class Thumbnail extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '7f5fd6c056da2d82feb2c3c33f3e6dec898787f5', class: getIonMode(this) }, h("slot", { key: 'd15fd2b6cdc03777edc1930be95ad838e1b376c8' })));
+        return (h(Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: getIonMode(this) }, h("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
     }
     static get style() { return IonThumbnailStyle0; }
 }, [1, "ion-thumbnail"]);

package/components/ion-toast.js

@@ -831,9 +831,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         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: '34036afc0701173d51c9c11ea4a2e1d65685ba41', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c05655ff06af8d0e48c2a85396b07ad942fa81b4', 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: 'd927e43957f47888ce4e64f1e99c935d55757af7', class: wrapperClass }, h("div", { key: 'ca43bc42478181acdf8cdea6601a85fa95d12216', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'fdd6fb8f6e947ed002bd2e63fdc8ec7e764f4a7d', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '37c16c81ee3e4304379dfbcabdffe73db73e4653', 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: '9393ead4de1bf28529661d6f64049d34e18d725c', class: wrapperClass }, h("div", { key: '3e9dd73c17c337849c3f26e8d0f395b3e5ee20a7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '5d15b18364301ad55e44e9f601014ac33181590b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'f6dd164502637a882c5caf18445d8509b85ad6f9', 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')))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toggle.js

@@ -75,7 +75,6 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
-        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -157,12 +156,12 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '381632cf12ef5d27d729e0d59efcb14efad12a51', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -172,10 +171,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '73f2bd13ccfc4a1efc68781155f603e665be3d7e', class: "toggle-wrapper" }, h("input", Object.assign({ key: '0c4b7663ddbf3b1ce94b5fd4c7c21e51db907d71', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'ef1e73bee832bf9ab58d1e47eb037c50b609c0ee', class: {
+            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', 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: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '67b7e20dc96503cb76dd5e31c5579752de465dcc' })), h("div", { key: '17f89960bcc3302ef8e0c0d4e10513241744e232', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -195,7 +194,6 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         "labelPlacement": [1, "label-placement"],
         "justify": [1],
         "alignment": [1],
-        "required": [4],
         "activated": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]

package/components/label.js

@@ -63,13 +63,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '4da84c95351a74b547f8224ecfa66924d21398c5', class: createColorClasses(this.color, {
+        return (h(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: 'ea158ebb620275e5492965234d0ab925d391f919' })));
+            }) }, h("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/list-header.js

@@ -22,10 +22,10 @@ const ListHeader = /*@__PURE__*/ proxyCustomElement(class ListHeader extends HTM
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '95ce2135e2b1ad4d7d6020b0fb9bc6e02b3c0851', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '3065b0a094bc31a90518898a5126a813c8a33816', class: "list-header-inner" }, h("slot", { key: 'fe15c87d7867f3e5d8185645c49c0228496697b8' }))));
+            }) }, h("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, h("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,