voyager-ionic-core 8.8.12 → 8.8.17

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, h } from "@stencil/core";
-import { checkInvalidState } from "../../utils/forms/index";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
+import { checkInvalidState, createItemMultipleInputsObserver } from "../../utils/forms/index";
 import { inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -162,17 +162,21 @@ export class Checkbox {
         // Always set initial state
         this.isInvalid = checkInvalidState(el);
         this.hasLabelContent = this.el.textContent !== '';
+        this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
         this.hintTextId = this.getHintTextId();
     }
     disconnectedCallback() {
-        // Clean up validation observer to prevent memory leaks.
         if (this.validationObserver) {
             this.validationObserver.disconnect();
             this.validationObserver = undefined;
         }
+        if (this.itemFocusObserver) {
+            this.itemFocusObserver.disconnect();
+            this.itemFocusObserver = undefined;
+        }
     }
     /** @internal */
     async setFocus() {
@@ -208,23 +212,28 @@ export class Checkbox {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
+        const inItem = hostContext('ion-item', el);
+        const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
         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: '0da370f94c5cdf3b08bc9008395558334a300f35', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '6de0a71ffc45e65a4cf5ab0a1216f3ccd159d8de', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
-                'in-item': hostContext('ion-item', el),
+                'in-item': inItem,
                 'checkbox-checked': checked,
                 'checkbox-disabled': disabled,
                 'checkbox-indeterminate': indeterminate,
                 interactive: true,
+                // A single-input item has the input cover and draws the indicator itself.
+                // A multi-input item has no cover, so each control draws its own.
+                'ion-focusable': !inItem || inMultipleInputsItem,
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '991f1763356671230af119a5fbdc22d0a39974e7', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '982f8a7f84d013b272b17607936355d2b6c251f4', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: 'c8f9e8baa20ac68e69fd3c6fcf0e7a26a1084d83', class: {
+            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '6018205e0a73dec826c7881d687f1c2ca8dcb0ab' }), this.renderHintText()), h("div", { key: '57530b9d6ff59ee7ab98f960cd65d66ee87cfd1d', class: "native-wrapper" }, h("svg", { key: '63d719154ff44459e9ca448e3f5d7de94d9ab248', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), h("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, h("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, 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/checkbox/checkbox.md.css

@@ -153,8 +153,13 @@ input {
   display: none;
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 .native-wrapper {
   display: flex;
+  position: relative;
   align-items: center;
 }
 
@@ -178,6 +183,19 @@ input {
   opacity: 0;
 }
 
+:host(.ion-focused) .native-wrapper::after {
+  border-radius: 50%;
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+  inset-block-start: calc(50% - 36px / 2);
+  inset-inline-start: calc(50% - 36px / 2);
+}
+
 .checkbox-bottom {
   padding-top: 4px;
   display: flex;

package/dist/collection/components/datetime/datetime.js

@@ -9,6 +9,7 @@ import { FOCUS_TRAP_DISABLE_CLASS } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
+import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
@@ -780,10 +781,11 @@ export class Datetime {
                 return;
             }
             const left = nextMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
             calendarBodyRef.scrollTo({
                 top: 0,
                 left: left * (isRTL(this.el) ? -1 : 1),
-                behavior: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.prevMonth = () => {
@@ -796,10 +798,11 @@ export class Datetime {
                 return;
             }
             const left = prevMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
             calendarBodyRef.scrollTo({
                 top: 0,
                 left: left * (isRTL(this.el) ? 1 : -1),
-                behavior: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.toggleMonthAndYearView = () => {
@@ -914,6 +917,16 @@ export class Datetime {
             this.closeParentOverlay(CANCEL_ROLE);
         }
     }
+    /**
+     * Returns the default parts the datetime falls back to when no value is set:
+     * today's date and time snapped to the closest value allowed by the
+     * component's constraints (`min`, `max`, and the `*Values` props).
+     *
+     * @internal
+     */
+    async getDefaultPart() {
+        return this.defaultParts;
+    }
     get isCalendarPicker() {
         const { presentation } = this;
         return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -1326,7 +1339,10 @@ export class Datetime {
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+                if (!this.multiple) {
+                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                }
                 ev.stopPropagation();
             } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
@@ -1338,7 +1354,10 @@ export class Datetime {
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+                if (!this.multiple) {
+                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                }
                 ev.stopPropagation();
             } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
@@ -1735,7 +1754,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '323c8c2327088f00934b8c93c3306538cb9b5677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1745,7 +1764,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '1e0855c8909bc3f1e48a21ad68159fa782060691', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -2632,6 +2651,32 @@ export class Datetime {
                             "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."
                         }]
                 }
+            },
+            "getDefaultPart": {
+                "complexType": {
+                    "signature": "() => Promise<DatetimeParts>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DatetimeParts": {
+                            "location": "import",
+                            "path": "./datetime-interface",
+                            "id": "src/components/datetime/datetime-interface.ts::DatetimeParts",
+                            "referenceLocation": "DatetimeParts"
+                        }
+                    },
+                    "return": "Promise<DatetimeParts>"
+                },
+                "docs": {
+                    "text": "Returns the default parts the datetime falls back to when no value is set:\ntoday's date and time snapped to the closest value allowed by the\ncomponent's constraints (`min`, `max`, and the `*Values` props).",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }

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

@@ -6,7 +6,6 @@ import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
-import { getToday } from "../datetime/utils/data";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
@@ -54,7 +53,7 @@ export class DatetimeButton {
          * ion-datetime and then format it according
          * to the locale specified on ion-datetime.
          */
-        this.setDateTimeText = () => {
+        this.setDateTimeText = async () => {
             var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
@@ -63,10 +62,12 @@ export class DatetimeButton {
             const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
-             * Both ion-datetime and ion-datetime-button default
-             * to today's date and time if no value is set.
+             * Both ion-datetime and ion-datetime-button default to today's date and
+             * time if no value is set. We read the datetime's computed default so the
+             * button respects the same constraints (min, max, minuteValues, etc.) that
+             * the datetime applies to its own fallback, instead of using a raw "now".
              */
-            const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+            const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
             if (!parsedDatetimes) {
                 return;
             }
@@ -341,11 +342,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '11d037e6ab061e5116842970760b04850b42f2c7', class: createColorClasses(color, {
+        return (h(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (h("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
+            }) }, dateText && (h("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (h("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { close } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
@@ -15,6 +16,8 @@ import { getIonMode } from "../../global/ionic-global";
 export class FabButton {
     constructor() {
         this.fab = null;
+        this.formButtonEl = null;
+        this.formEl = null;
         this.inheritedAttributes = {};
         /**
          * If `true`, the fab button will be show a close icon.
@@ -55,34 +58,105 @@ export class FabButton {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.onClick = () => {
-            const { fab } = this;
-            if (!fab) {
-                return;
+        this.onClick = (ev) => {
+            const { el, fab } = this;
+            if (this.type !== 'button' && hasShadowDom(el)) {
+                this.submitForm(ev);
+            }
+            if (fab) {
+                fab.toggle();
             }
-            fab.toggle();
         };
     }
+    disabledChanged() {
+        const { disabled } = this;
+        if (this.formButtonEl) {
+            this.formButtonEl.disabled = disabled;
+        }
+    }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
     }
+    /**
+     * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
+     * does not participate in form submission, so a hidden native button is added
+     * to the associated form and clicked instead.
+     */
+    renderHiddenButton() {
+        const formEl = (this.formEl = this.findForm());
+        if (formEl) {
+            const { formButtonEl } = this;
+            // Reuse the existing hidden button, syncing values that changed since it was created.
+            if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+                formButtonEl.disabled = this.disabled;
+                formButtonEl.type = this.type;
+                return;
+            }
+            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+            newFormButtonEl.type = this.type;
+            newFormButtonEl.style.display = 'none';
+            newFormButtonEl.disabled = this.disabled;
+            formEl.appendChild(newFormButtonEl);
+        }
+    }
+    // TODO(FW-7663): share the hidden button and form lookup with ion-button
+    findForm() {
+        const { form } = this;
+        if (form instanceof HTMLFormElement) {
+            return form;
+        }
+        if (typeof form === 'string') {
+            const el = document.getElementById(form);
+            if (el) {
+                if (el instanceof HTMLFormElement) {
+                    return el;
+                }
+                else {
+                    printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
+                    return null;
+                }
+            }
+            else {
+                printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
+                return null;
+            }
+        }
+        if (form !== undefined) {
+            printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
+            return null;
+        }
+        return this.el.closest('form');
+    }
+    submitForm(ev) {
+        if (this.formEl && this.formButtonEl) {
+            ev.preventDefault();
+            this.formButtonEl.click();
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     render() {
-        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
         const inList = hostContext('ion-fab-list', el);
         const mode = getIonMode(this);
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
-            ? { type: this.type }
+            ? { type }
             : {
                 download: this.download,
                 href,
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        /**
+         * The hidden button is created during render so that setting `type` or
+         * `form` after the component loads still adds it to the form.
+         */
+        if (type !== 'button') {
+            this.renderHiddenButton();
+        }
+        return (h(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -93,7 +167,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, h("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && h("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
+            }) }, h(TagType, Object.assign({ key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }
@@ -364,6 +438,30 @@ export class FabButton {
                 "attribute": "type",
                 "defaultValue": "'button'"
             },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLFormElement",
+                    "resolved": "HTMLFormElement | string | undefined",
+                    "references": {
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -439,4 +537,10 @@ export class FabButton {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
 }

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

@@ -387,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+:host(.item-focus-indicator-room) .input-wrapper {
+  -webkit-margin-start: -12px;
+  margin-inline-start: -12px;
+  -webkit-margin-end: -12px;
+  margin-inline-end: -12px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+}
+
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
 :host(.item-multiple-inputs) ::slotted(ion-radio) {

package/dist/collection/components/item/item.js

@@ -1,11 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
+const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -23,9 +24,11 @@ export class Item {
         this.labelColorStyles = {};
         this.itemStyles = new Map();
         this.inheritedAriaAttributes = {};
+        this.didLoad = false;
         this.multipleInputs = false;
         this.focusable = true;
         this.isInteractive = false;
+        this.hasSlottedIndicatorControl = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -51,6 +54,7 @@ export class Item {
         this.updateInteractivityOnSlotChange = () => {
             this.setIsInteractive();
             this.setMultipleInputs();
+            this.setHasSlottedIndicatorControl();
         };
     }
     buttonChanged() {
@@ -92,6 +96,14 @@ export class Item {
     }
     connectedCallback() {
         this.hasStartEl();
+        /**
+         * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
+         * observer and re-read the light DOM, which may have changed while detached.
+         */
+        if (this.didLoad) {
+            this.watchForIndicatorControls();
+            this.updateInteractivityOnSlotChange();
+        }
     }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
@@ -100,8 +112,17 @@ export class Item {
         raf(() => {
             this.setMultipleInputs();
             this.setIsInteractive();
+            this.setHasSlottedIndicatorControl();
             this.focusable = this.isFocusable();
         });
+        this.watchForIndicatorControls();
+        this.didLoad = true;
+    }
+    disconnectedCallback() {
+        if (this.indicatorControlObserver) {
+            this.indicatorControlObserver.disconnect();
+            this.indicatorControlObserver = undefined;
+        }
     }
     totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
@@ -135,6 +156,50 @@ export class Item {
         const { covers, inputs, clickables } = this.totalNestedInputs();
         this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
     }
+    /**
+     * `slotchange` only fires for nodes assigned directly to a slot, so a control
+     * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
+     * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
+     *
+     * The callback runs the whole handler because a control below a wrapper can also
+     * make the item multi-input, which is what decides whether the controls draw
+     * their own indicator at all.
+     *
+     * `:host(:has())` would avoid the observer, but the `:has()` fallback in
+     * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
+     * in Android WebView. Worth revisiting when FW-6106 closes.
+     */
+    watchForIndicatorControls() {
+        var _a;
+        if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // `Node.moveBefore` relocates the item without either callback firing, so
+        // never leave a previous observer behind
+        (_a = this.indicatorControlObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.indicatorControlObserver = new MutationObserver((records) => {
+            // The subtree observer also fires for text and hidden input churn, so only
+            // re-read the DOM when a control was added or removed
+            if (records.some(touchesIndicatorControl)) {
+                this.updateInteractivityOnSlotChange();
+            }
+        });
+        this.indicatorControlObserver.observe(this.el, { childList: true, subtree: true });
+    }
+    // These controls paint a focus indicator that overhangs their own bounds, and
+    // only the default slot is clipped, so only a control there needs extra room.
+    setHasSlottedIndicatorControl() {
+        const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
+        this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
+            // The control isn't always a direct child, so walk up to the element the item
+            // slots, which is the one carrying the slot name.
+            let slotted = control;
+            while (slotted !== null && slotted.parentElement !== this.el) {
+                slotted = slotted.parentElement;
+            }
+            return slotted !== null && !slotted.getAttribute('slot');
+        });
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -236,7 +301,13 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '3977491399280a2aa3f796f0549235f3dc8b5681', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        /**
+         * A control in a single-input item defers its indicator to the item, so there's
+         * nothing to clip and nothing to make room for. It draws its own indicator in a
+         * multi-input item, and in a clickable item, which is a second tab stop.
+         */
+        const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
+        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -245,10 +316,11 @@ export class Item {
                 'item-disabled': disabled,
                 'in-list': inList,
                 'item-multiple-inputs': this.multipleInputs,
+                'item-focus-indicator-room': slottedIndicatorNeedsRoom,
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '8aff72457004553e83d74a4dda2f9a6b8cf523d7' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'aba9a0f2ad101be6598f364c83236ca3de437a04', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5e7851e49959e4ed114fcd51cb167db9bd8c0f00', class: "item-inner", part: "inner" }, h("div", { key: 'eee6511845d8459450ca856819839d83cd507c0c', class: "input-wrapper", part: "container" }, h("slot", { key: '76e13f86cd144951b1999eb333a2027b42cdf6e2', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'b264f7b4c367e7700a9a05343177abf7b17045d8', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '66b930bdfebb55ea0b2e784a1c902eb6c64b2370', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '06ab8e87917b545f3c221602b9b6d8004a1895ad' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -543,7 +615,8 @@ export class Item {
         return {
             "multipleInputs": {},
             "focusable": {},
-            "isInteractive": {}
+            "isInteractive": {},
+            "hasSlottedIndicatorControl": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -569,3 +642,11 @@ export class Item {
             }];
     }
 }
+const isIndicatorControl = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    const el = node;
+    return el.matches(INDICATOR_CONTROL_SELECTOR) || el.querySelector(INDICATOR_CONTROL_SELECTOR) !== null;
+};
+const touchesIndicatorControl = (record) => Array.from(record.addedNodes).some(isIndicatorControl) || Array.from(record.removedNodes).some(isIndicatorControl);