voyager-ionic-core 8.8.10 → 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/input-otp/input-otp.js

@@ -620,7 +620,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '5c1386ae6b8038ec33ca94fd818c9353b1b37f75', class: createColorClasses(color, {
+        return (h(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -628,10 +628,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: '9a19129688e55095f8386826c73ef3f9744becff', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '7853819c3610c4691191f1836b947bf4ec17939d', class: {
+            }) }, h("div", Object.assign({ key: 'f42471e4ed8054f07162a52b42a0ca49c3d57bb0', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'b06461605b2404476b856785b7116e18b4dbaeaa', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: 'f4674d47d3d3991f21a0a79321ebc323968071dc' }))));
+            } }, h("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }

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) {