voyager-ionic-core 8.5.6 → 8.5.7

package/components/checkbox.js

@@ -64,6 +64,13 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             }
             this.toggleChecked(ev);
         };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
         this.color = undefined;
         this.name = this.inputId;
         this.checked = false;
@@ -120,7 +127,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: '90bb17a4fae17088524555968a002327400807cf', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+        return (h(Host, { key: '26cbe7220e555107200e9b5deeae754aa534a80b', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -130,10 +137,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '58b5762aa358dff81910874631e06620a2ae1561', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '6abe299d690c345d36d6fd76ab113fdccfbbac52', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '2654168e45ccfdbcfe13af8c97e0e21d61ba0150', class: {
+            }), onClick: this.onClick }, h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId }, h("slot", { key: 'a91f3f67d9ddd6b616e48799aba11cae3564d1ab' }), this.renderHintText()), h("div", { key: 'd5a9170b084d09df6b02f416e744085b5bcf0dde', class: "native-wrapper" }, h("svg", { key: 'b1968ce4aa9d652a9f2bdc427ea3a65e6c04df51', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: 'd472a06ec6c8b74dfb651415d2236db8080f6805', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/components/ion-input.js

@@ -82,6 +82,17 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             this.value = '';
             this.emitInputChange(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'off';
@@ -442,7 +453,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '1094be43093d71694bf0e503d3015401b8cd9574', class: createColorClasses(this.color, {
+        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -453,7 +464,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '367d1a1c2eb69d4887fe29ab96ead3230d7dd513', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'aa7cb47ac287140a68c5cb0ee9359abaa611e21b', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -468,7 +479,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '69afc5c7ea6bfa1bff301635281b536e84277965', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6f770a0ab703b4d19e936a0e1955274bc9f3e941', name: "end" })), shouldRenderHighlight && h("div", { key: 'a048e240432c4d5e11b2c92fa99a0cff07f9a778', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'cd03e46b97299d9db5cedf81944ae9bbe72bacdc', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'de36b79a89c4b413beba22e8a74c53dbf57a84ab', name: "end" })), shouldRenderHighlight && h("div", { key: 'f088509073845bf767ea7ccfde1e917e1cf93cc1', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-select.js

@@ -100,6 +100,17 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.hasFocus = false;
             this.ionBlur.emit();
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.isExpanded = false;
         this.hasFocus = false;
         this.cancelText = 'Cancel';
@@ -710,7 +721,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: 'e6c0498d6c275f89344f4b5146752a047058ad88', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6dd3c92dc3c587960d767c7dd1c142fc20bef8ed', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -728,7 +739,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: 'f030b6bd329f8014c7227f5e5f1aeb7efa0e641a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '7480e1b40d09e53a2942295d6c9dae474c9de810', class: "select-wrapper-inner" }, h("slot", { key: '250fd2ff08b3e6ed04c7062455a044863481fe1c', name: "start" }), h("div", { key: '11b73ad5b7decfe2d307f9d54293c21c0df3ddb8', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ddedafc89061372567bd46354ef972f08c60e19d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '792ce27aea18a0020c17dceb0f0e293171ded3a3', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'bc80ee471debb20b33d1cf55f55932b621f1744a', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'deea85c3a3769e90af0933c522028148ee5781a3', class: "select-wrapper-inner" }, h("slot", { key: 'af8192f4d8d5426b39a00ef2ed96f3c4a9e12908', name: "start" }), h("div", { key: '6c278fc6c56b18e26cae930d375aa1da05af135b', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'c459d54471029872b8b3e63f7dfb6bdb869b4942', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '718960718fa91163dd4412e1865f476fef089127', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-textarea.js

@@ -68,6 +68,17 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         this.onKeyDown = (ev) => {
             this.checkClearOnEdit(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'none';
@@ -401,7 +412,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: 'f53b9060248d885b0b8639401871e52017e497db', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7eb390b79de0d671a785bbb783f97e09169472f9', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -410,7 +421,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: '3bc32a0799d1dd7253eb5a963877964de620ccd0', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'f5302723f4561b179b249cb28f5a31223c5c4394', class: "textarea-wrapper-inner" }, h("div", { key: '75b85c5bd85af72a41da3310f10877a654397eaf', class: "start-slot-wrapper" }, h("slot", { key: '7adc67b4c2917d20c35eecc11a5530e93bc581ea', name: "start" })), h("div", { key: '35cbeca046ec7a40bcbcbc4a70eb83628350ba54', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e3496262d163b70558a0188abdf322cbd8b44dfd', 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: 'f274576d2e0bb6dace2ec36c362cb68ecfcd2c69', class: "end-slot-wrapper" }, h("slot", { key: '70c881103410e74b3a3ffda4cc889be66f89bf20', name: "end" }))), shouldRenderHighlight && h("div", { key: 'cf33a473dfb637d284acc2b62ca59c2839ee1104', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'f5835d8d56fadbd24637fc063a84834064aefc6d', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7ca9391a0cdcf47991bd529bfd38d06a3f92d6ec', class: "textarea-wrapper-inner" }, h("div", { key: '12e893e7c4b56f5e9f91ff81cdaf8d76f68988fe', class: "start-slot-wrapper" }, h("slot", { key: 'd9ff42e8989eb1462747fe67575f6c3478f4f8b3', name: "start" })), h("div", { key: '0b9f575368c9c4d990761c390c163825eb311963', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '2c80fc07518265458f27201e15af9578e372fbcf', 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: '6647296719b79eb3ebe7146f9bfd77a6c37f6c30', class: "end-slot-wrapper" }, h("slot", { key: 'ec3ec3feb6b35ffe11bdcab94b521922b2f7e91f', name: "end" }))), shouldRenderHighlight && h("div", { key: '49e7dca783bc2eee320631859264772be876eaba', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toggle.js

@@ -65,6 +65,13 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 this.toggleChecked();
             }
         };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -203,7 +210,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '63c67d52dc47661c5758049f6278e873ab867a22', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+        return (h(Host, { key: 'd9dad2132e9d6cf8e9844fefa009402e1a637ef8', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -213,10 +220,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: '723cfac071ee5ec5c75984fc64762209452e9eea', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '8fa79f49348afbce5e083d454b751f7f9cc04d3f', 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 }, inheritedAttributes)), h("div", { key: '00a4415539ef677be9f6981afddcec61f7fe9487', class: {
+            }) }, h("label", { key: '4becda2f40a735e941ecaba26f14231271e38197', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'c1946dd6aa23dee3562915a7165e012c48b79890', 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 }, inheritedAttributes)), h("div", { key: '2493dc0aa587f5f9d9a7d0a388f92928f2db0cf3', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId }, h("slot", { key: '7ce338bd5116337c9ea90805fdee7285ef7c5811' }), this.renderHintText()), h("div", { key: 'ecb5dfd2c7b534e357cba272dd4f189728555b3a', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '798220850b311a26b081914d5c774b757bde2992' }), this.renderHintText()), h("div", { key: '3c6142c9697b60646f286f6fd59f54609377f7d0', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/ion-checkbox.cjs.entry.js

@@ -67,6 +67,13 @@ const Checkbox = class {
             }
             this.toggleChecked(ev);
         };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
         this.color = undefined;
         this.name = this.inputId;
         this.checked = false;
@@ -123,7 +130,7 @@ const Checkbox = class {
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (index.h(index.Host, { key: '90bb17a4fae17088524555968a002327400807cf', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '26cbe7220e555107200e9b5deeae754aa534a80b', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -133,10 +140,10 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, index.h("label", { key: '58b5762aa358dff81910874631e06620a2ae1561', class: "checkbox-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '6abe299d690c345d36d6fd76ab113fdccfbbac52', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), index.h("div", { key: '2654168e45ccfdbcfe13af8c97e0e21d61ba0150', class: {
+            }), onClick: this.onClick }, index.h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), index.h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId }, index.h("slot", { key: 'a91f3f67d9ddd6b616e48799aba11cae3564d1ab' }), this.renderHintText()), index.h("div", { key: 'd5a9170b084d09df6b02f416e744085b5bcf0dde', class: "native-wrapper" }, index.h("svg", { key: 'b1968ce4aa9d652a9f2bdc427ea3a65e6c04df51', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), index.h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, index.h("svg", { key: 'd472a06ec6c8b74dfb651415d2236db8080f6805', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (index.h("path", { d: "M6 12L18 12", part: "mark" })) : (index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/cjs/ion-input.cjs.entry.js

@@ -86,6 +86,17 @@ const Input = class {
             this.value = '';
             this.emitInputChange(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'off';
@@ -446,7 +457,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: '1094be43093d71694bf0e503d3015401b8cd9574', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -457,7 +468,7 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, index.h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, index.h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), index.h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: '367d1a1c2eb69d4887fe29ab96ead3230d7dd513', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, index.h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), index.h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'aa7cb47ac287140a68c5cb0ee9359abaa611e21b', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -472,7 +483,7 @@ const Input = class {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '69afc5c7ea6bfa1bff301635281b536e84277965', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '6f770a0ab703b4d19e936a0e1955274bc9f3e941', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'a048e240432c4d5e11b2c92fa99a0cff07f9a778', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'cd03e46b97299d9db5cedf81944ae9bbe72bacdc', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: 'de36b79a89c4b413beba22e8a74c53dbf57a84ab', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'f088509073845bf767ea7ccfde1e917e1cf93cc1', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -85,6 +85,17 @@ const Select = class {
             this.hasFocus = false;
             this.ionBlur.emit();
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.isExpanded = false;
         this.hasFocus = false;
         this.cancelText = 'Cancel';
@@ -695,7 +706,7 @@ const Select = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'e6c0498d6c275f89344f4b5146752a047058ad88', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '6dd3c92dc3c587960d767c7dd1c142fc20bef8ed', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', el),
@@ -713,7 +724,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, index.h("label", { key: 'f030b6bd329f8014c7227f5e5f1aeb7efa0e641a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), index.h("div", { key: '7480e1b40d09e53a2942295d6c9dae474c9de810', class: "select-wrapper-inner" }, index.h("slot", { key: '250fd2ff08b3e6ed04c7062455a044863481fe1c', name: "start" }), index.h("div", { key: '11b73ad5b7decfe2d307f9d54293c21c0df3ddb8', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: 'ddedafc89061372567bd46354ef972f08c60e19d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: '792ce27aea18a0020c17dceb0f0e293171ded3a3', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, index.h("label", { key: 'bc80ee471debb20b33d1cf55f55932b621f1744a', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'deea85c3a3769e90af0933c522028148ee5781a3', class: "select-wrapper-inner" }, index.h("slot", { key: 'af8192f4d8d5426b39a00ef2ed96f3c4a9e12908', name: "start" }), index.h("div", { key: '6c278fc6c56b18e26cae930d375aa1da05af135b', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: 'c459d54471029872b8b3e63f7dfb6bdb869b4942', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: '718960718fa91163dd4412e1865f476fef089127', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-textarea.cjs.entry.js

@@ -73,6 +73,17 @@ const Textarea = class {
         this.onKeyDown = (ev) => {
             this.checkClearOnEdit(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'none';
@@ -406,7 +417,7 @@ const Textarea = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'f53b9060248d885b0b8639401871e52017e497db', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '7eb390b79de0d671a785bbb783f97e09169472f9', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -415,7 +426,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, index.h("label", { key: '3bc32a0799d1dd7253eb5a963877964de620ccd0', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'f5302723f4561b179b249cb28f5a31223c5c4394', class: "textarea-wrapper-inner" }, index.h("div", { key: '75b85c5bd85af72a41da3310f10877a654397eaf', class: "start-slot-wrapper" }, index.h("slot", { key: '7adc67b4c2917d20c35eecc11a5530e93bc581ea', name: "start" })), index.h("div", { key: '35cbeca046ec7a40bcbcbc4a70eb83628350ba54', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: 'e3496262d163b70558a0188abdf322cbd8b44dfd', 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)), index.h("div", { key: 'f274576d2e0bb6dace2ec36c362cb68ecfcd2c69', class: "end-slot-wrapper" }, index.h("slot", { key: '70c881103410e74b3a3ffda4cc889be66f89bf20', name: "end" }))), shouldRenderHighlight && index.h("div", { key: 'cf33a473dfb637d284acc2b62ca59c2839ee1104', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, index.h("label", { key: 'f5835d8d56fadbd24637fc063a84834064aefc6d', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '7ca9391a0cdcf47991bd529bfd38d06a3f92d6ec', class: "textarea-wrapper-inner" }, index.h("div", { key: '12e893e7c4b56f5e9f91ff81cdaf8d76f68988fe', class: "start-slot-wrapper" }, index.h("slot", { key: 'd9ff42e8989eb1462747fe67575f6c3478f4f8b3', name: "start" })), index.h("div", { key: '0b9f575368c9c4d990761c390c163825eb311963', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '2c80fc07518265458f27201e15af9578e372fbcf', 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)), index.h("div", { key: '6647296719b79eb3ebe7146f9bfd77a6c37f6c30', class: "end-slot-wrapper" }, index.h("slot", { key: 'ec3ec3feb6b35ffe11bdcab94b521922b2f7e91f', name: "end" }))), shouldRenderHighlight && index.h("div", { key: '49e7dca783bc2eee320631859264772be876eaba', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-toggle.cjs.entry.js

@@ -68,6 +68,13 @@ const Toggle = class {
                 this.toggleChecked();
             }
         };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -206,7 +213,7 @@ const Toggle = class {
         const value = this.getValue();
         const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (index.h(index.Host, { key: '63c67d52dc47661c5758049f6278e873ab867a22', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'd9dad2132e9d6cf8e9844fefa009402e1a637ef8', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -216,10 +223,10 @@ const Toggle = class {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, index.h("label", { key: '723cfac071ee5ec5c75984fc64762209452e9eea', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '8fa79f49348afbce5e083d454b751f7f9cc04d3f', 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 }, inheritedAttributes)), index.h("div", { key: '00a4415539ef677be9f6981afddcec61f7fe9487', class: {
+            }) }, index.h("label", { key: '4becda2f40a735e941ecaba26f14231271e38197', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: 'c1946dd6aa23dee3562915a7165e012c48b79890', 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 }, inheritedAttributes)), index.h("div", { key: '2493dc0aa587f5f9d9a7d0a388f92928f2db0cf3', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId }, index.h("slot", { key: '7ce338bd5116337c9ea90805fdee7285ef7c5811' }), this.renderHintText()), index.h("div", { key: 'ecb5dfd2c7b534e357cba272dd4f189728555b3a', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '798220850b311a26b081914d5c774b757bde2992' }), this.renderHintText()), index.h("div", { key: '3c6142c9697b60646f286f6fd59f54609377f7d0', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/checkbox/checkbox.js

@@ -63,6 +63,13 @@ export class Checkbox {
             }
             this.toggleChecked(ev);
         };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
         this.color = undefined;
         this.name = this.inputId;
         this.checked = false;
@@ -119,7 +126,7 @@ export class Checkbox {
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: '90bb17a4fae17088524555968a002327400807cf', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+        return (h(Host, { key: '26cbe7220e555107200e9b5deeae754aa534a80b', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -129,10 +136,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '58b5762aa358dff81910874631e06620a2ae1561', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '6abe299d690c345d36d6fd76ab113fdccfbbac52', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '2654168e45ccfdbcfe13af8c97e0e21d61ba0150', class: {
+            }), onClick: this.onClick }, h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId }, h("slot", { key: 'a91f3f67d9ddd6b616e48799aba11cae3564d1ab' }), this.renderHintText()), h("div", { key: 'd5a9170b084d09df6b02f416e744085b5bcf0dde', class: "native-wrapper" }, h("svg", { key: 'b1968ce4aa9d652a9f2bdc427ea3a65e6c04df51', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: 'd472a06ec6c8b74dfb651415d2236db8080f6805', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/collection/components/input/input.js

@@ -76,6 +76,17 @@ export class Input {
             this.value = '';
             this.emitInputChange(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'off';
@@ -436,7 +447,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '1094be43093d71694bf0e503d3015401b8cd9574', class: createColorClasses(this.color, {
+        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -447,7 +458,7 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '367d1a1c2eb69d4887fe29ab96ead3230d7dd513', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'aa7cb47ac287140a68c5cb0ee9359abaa611e21b', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -462,7 +473,7 @@ export class Input {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '69afc5c7ea6bfa1bff301635281b536e84277965', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6f770a0ab703b4d19e936a0e1955274bc9f3e941', name: "end" })), shouldRenderHighlight && h("div", { key: 'a048e240432c4d5e11b2c92fa99a0cff07f9a778', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'cd03e46b97299d9db5cedf81944ae9bbe72bacdc', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'de36b79a89c4b413beba22e8a74c53dbf57a84ab', name: "end" })), shouldRenderHighlight && h("div", { key: 'f088509073845bf767ea7ccfde1e917e1cf93cc1', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -79,6 +79,17 @@ export class Select {
             this.hasFocus = false;
             this.ionBlur.emit();
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.isExpanded = false;
         this.hasFocus = false;
         this.cancelText = 'Cancel';
@@ -735,7 +746,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'e6c0498d6c275f89344f4b5146752a047058ad88', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6dd3c92dc3c587960d767c7dd1c142fc20bef8ed', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -753,7 +764,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'f030b6bd329f8014c7227f5e5f1aeb7efa0e641a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '7480e1b40d09e53a2942295d6c9dae474c9de810', class: "select-wrapper-inner" }, h("slot", { key: '250fd2ff08b3e6ed04c7062455a044863481fe1c', name: "start" }), h("div", { key: '11b73ad5b7decfe2d307f9d54293c21c0df3ddb8', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ddedafc89061372567bd46354ef972f08c60e19d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '792ce27aea18a0020c17dceb0f0e293171ded3a3', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'bc80ee471debb20b33d1cf55f55932b621f1744a', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'deea85c3a3769e90af0933c522028148ee5781a3', class: "select-wrapper-inner" }, h("slot", { key: 'af8192f4d8d5426b39a00ef2ed96f3c4a9e12908', name: "start" }), h("div", { key: '6c278fc6c56b18e26cae930d375aa1da05af135b', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'c459d54471029872b8b3e63f7dfb6bdb869b4942', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '718960718fa91163dd4412e1865f476fef089127', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,6 +63,17 @@ export class Textarea {
         this.onKeyDown = (ev) => {
             this.checkClearOnEdit(ev);
         };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
         this.hasFocus = false;
         this.color = undefined;
         this.autocapitalize = 'none';
@@ -396,7 +407,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'f53b9060248d885b0b8639401871e52017e497db', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7eb390b79de0d671a785bbb783f97e09169472f9', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -405,7 +416,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '3bc32a0799d1dd7253eb5a963877964de620ccd0', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'f5302723f4561b179b249cb28f5a31223c5c4394', class: "textarea-wrapper-inner" }, h("div", { key: '75b85c5bd85af72a41da3310f10877a654397eaf', class: "start-slot-wrapper" }, h("slot", { key: '7adc67b4c2917d20c35eecc11a5530e93bc581ea', name: "start" })), h("div", { key: '35cbeca046ec7a40bcbcbc4a70eb83628350ba54', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e3496262d163b70558a0188abdf322cbd8b44dfd', 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: 'f274576d2e0bb6dace2ec36c362cb68ecfcd2c69', class: "end-slot-wrapper" }, h("slot", { key: '70c881103410e74b3a3ffda4cc889be66f89bf20', name: "end" }))), shouldRenderHighlight && h("div", { key: 'cf33a473dfb637d284acc2b62ca59c2839ee1104', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'f5835d8d56fadbd24637fc063a84834064aefc6d', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7ca9391a0cdcf47991bd529bfd38d06a3f92d6ec', class: "textarea-wrapper-inner" }, h("div", { key: '12e893e7c4b56f5e9f91ff81cdaf8d76f68988fe', class: "start-slot-wrapper" }, h("slot", { key: 'd9ff42e8989eb1462747fe67575f6c3478f4f8b3', name: "start" })), h("div", { key: '0b9f575368c9c4d990761c390c163825eb311963', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '2c80fc07518265458f27201e15af9578e372fbcf', 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: '6647296719b79eb3ebe7146f9bfd77a6c37f6c30', class: "end-slot-wrapper" }, h("slot", { key: 'ec3ec3feb6b35ffe11bdcab94b521922b2f7e91f', name: "end" }))), shouldRenderHighlight && h("div", { key: '49e7dca783bc2eee320631859264772be876eaba', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }