@ionic/core 8.7.17-dev.11770319814.172b4f50 → 8.7.17-dev.11771359170.1fda0949

package/components/ion-datetime.js

@@ -1579,11 +1579,11 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
+        return (h("div", { class: "calendar-header", part: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "prev-next-buttons prev-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "prev-next-buttons next-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1815,7 +1815,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (h("div", { class: "datetime-header", part: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1895,7 +1895,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         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: '19e20c9b6b5f9467e91a2567b6dc7d9d38b56cc3', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '3d0787ecb3ad104c4a60d68a6e57140f018a70f2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1905,7 +1905,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'e31b5ef76cd6262dafd39f2d21980887880ec32e', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '6b245a0033d5ddd1918bc839f142141bf5ec54c5', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-refresher.js

@@ -23,8 +23,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
         this.ionRefresh = createEvent(this, "ionRefresh", 7);
         this.ionPull = createEvent(this, "ionPull", 7);
         this.ionStart = createEvent(this, "ionStart", 7);
-        this.ionPullStart = createEvent(this, "ionPullStart", 7);
-        this.ionPullEnd = createEvent(this, "ionPullEnd", 7);
         this.appliedStyles = false;
         this.didStart = false;
         this.progress = 0;
@@ -79,8 +77,8 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
          * than `1`. The default value is `1` which is equal to the speed of the cursor.
          * If a negative value is passed in, the factor will be `1` instead.
          *
-         * For example, If the value passed is `1.2` and the content is dragged by
-         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * For example: If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
          * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
          * will be `8` pixels, less than the amount the cursor has moved.
          *
@@ -130,9 +128,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
         this.animations = [];
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
-        this.ionPullEnd.emit({
-            reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-        });
     }
     async setupiOSNativeRefresher(pullingSpinner, refreshingSpinner) {
         this.elementToTransform = this.scrollEl;
@@ -165,7 +160,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                     if (!this.didStart) {
                         this.didStart = true;
                         this.ionStart.emit();
-                        this.ionPullStart.emit();
                     }
                     // emit "pulling" on every move
                     if (this.pointerDown) {
@@ -241,7 +235,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                 this.lastVelocityY = ev.velocityY;
             },
             onEnd: () => {
-                const hadStarted = this.didStart;
                 this.pointerDown = false;
                 this.didStart = false;
                 if (this.needsCompletion) {
@@ -251,13 +244,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                 else if (this.didRefresh) {
                     readTask(() => translateElement(this.elementToTransform, `${this.el.clientHeight}px`));
                 }
-                else if (hadStarted) {
-                    /**
-                     * User started pulling but released before reaching the refresh threshold.
-                     * Emit ionPullEnd to complete the event pair.
-                     */
-                    this.ionPullEnd.emit({ reason: 'cancel' });
-                }
             },
         });
         this.disabledChanged();
@@ -304,7 +290,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                     ev.data.animation = animation;
                     animation.progressStart(false, 0);
                     this.ionStart.emit();
-                    this.ionPullStart.emit();
                     this.animations.push(animation);
                     return;
                 }
@@ -327,7 +312,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                         this.animations = [];
                         this.gesture.enable(true);
                         this.state = 1 /* RefresherState.Inactive */;
-                        this.ionPullEnd.emit({ reason: 'cancel' });
                     });
                     return;
                 }
@@ -572,7 +556,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
         if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
-            this.ionPullStart.emit();
         }
         // emit "pulling" on every move
         this.ionPull.emit();
@@ -616,15 +599,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
              * available right away.
              */
             this.restoreOverflowStyle();
-            /**
-             * If ionPullStart was emitted, we need to emit ionPullEnd
-             * even though the gesture was aborted before reaching the
-             * pulling threshold.
-             */
-            if (this.didStart) {
-                this.didStart = false;
-                this.ionPullEnd.emit({ reason: 'cancel' });
-            }
         }
     }
     beginRefresh() {
@@ -671,9 +645,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
             if (this.contentFullscreen && this.backgroundContentEl) {
                 (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
             }
-            this.ionPullEnd.emit({
-                reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-            });
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -727,7 +698,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'bed0c2f44c32ecac24b7d8326ac7c7ef1d12c44f', slot: "fixed", class: {
+        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -1575,11 +1575,11 @@ const Datetime = class {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (index.h("div", { class: "calendar-header" }, index.h("div", { class: "calendar-action-buttons" }, index.h("div", { class: "calendar-month-year" }, index.h("button", { class: {
+        return (index.h("div", { class: "calendar-header", part: "calendar-header" }, index.h("div", { class: "calendar-action-buttons" }, index.h("div", { class: "calendar-month-year" }, index.h("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, index.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), index.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && index.h("ion-ripple-effect", null))), index.h("div", { class: "calendar-next-prev" }, index.h("ion-buttons", null, index.h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronBack, lazy: false, flipRtl: true })), index.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronForward, lazy: false, flipRtl: true }))))), index.h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, data.getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, index.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), index.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && index.h("ion-ripple-effect", null))), index.h("div", { class: "calendar-next-prev" }, index.h("ion-buttons", null, index.h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "prev-next-buttons prev-button" }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronBack, lazy: false, flipRtl: true })), index.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "prev-next-buttons next-button" }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronForward, lazy: false, flipRtl: true }))))), index.h("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "days-of-week" }, data.getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return index.h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1811,7 +1811,7 @@ const Datetime = class {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (index.h("div", { class: "datetime-header" }, index.h("div", { class: "datetime-title" }, index.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && index.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (index.h("div", { class: "datetime-header", part: "datetime-header" }, index.h("div", { class: "datetime-title" }, index.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && index.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1891,7 +1891,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index.h(index.Host, { key: '19e20c9b6b5f9467e91a2567b6dc7d9d38b56cc3', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '3d0787ecb3ad104c4a60d68a6e57140f018a70f2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1901,7 +1901,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, index.h("div", { key: 'e31b5ef76cd6262dafd39f2d21980887880ec32e', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, index.h("div", { key: '6b245a0033d5ddd1918bc839f142141bf5ec54c5', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -214,8 +214,6 @@ const Refresher = class {
         this.ionRefresh = index.createEvent(this, "ionRefresh", 7);
         this.ionPull = index.createEvent(this, "ionPull", 7);
         this.ionStart = index.createEvent(this, "ionStart", 7);
-        this.ionPullStart = index.createEvent(this, "ionPullStart", 7);
-        this.ionPullEnd = index.createEvent(this, "ionPullEnd", 7);
         this.appliedStyles = false;
         this.didStart = false;
         this.progress = 0;
@@ -270,8 +268,8 @@ const Refresher = class {
          * than `1`. The default value is `1` which is equal to the speed of the cursor.
          * If a negative value is passed in, the factor will be `1` instead.
          *
-         * For example, If the value passed is `1.2` and the content is dragged by
-         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * For example: If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
          * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
          * will be `8` pixels, less than the amount the cursor has moved.
          *
@@ -321,9 +319,6 @@ const Refresher = class {
         this.animations = [];
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
-        this.ionPullEnd.emit({
-            reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-        });
     }
     async setupiOSNativeRefresher(pullingSpinner, refreshingSpinner) {
         this.elementToTransform = this.scrollEl;
@@ -356,7 +351,6 @@ const Refresher = class {
                     if (!this.didStart) {
                         this.didStart = true;
                         this.ionStart.emit();
-                        this.ionPullStart.emit();
                     }
                     // emit "pulling" on every move
                     if (this.pointerDown) {
@@ -432,7 +426,6 @@ const Refresher = class {
                 this.lastVelocityY = ev.velocityY;
             },
             onEnd: () => {
-                const hadStarted = this.didStart;
                 this.pointerDown = false;
                 this.didStart = false;
                 if (this.needsCompletion) {
@@ -442,13 +435,6 @@ const Refresher = class {
                 else if (this.didRefresh) {
                     index.readTask(() => translateElement(this.elementToTransform, `${this.el.clientHeight}px`));
                 }
-                else if (hadStarted) {
-                    /**
-                     * User started pulling but released before reaching the refresh threshold.
-                     * Emit ionPullEnd to complete the event pair.
-                     */
-                    this.ionPullEnd.emit({ reason: 'cancel' });
-                }
             },
         });
         this.disabledChanged();
@@ -495,7 +481,6 @@ const Refresher = class {
                     ev.data.animation = animation;
                     animation.progressStart(false, 0);
                     this.ionStart.emit();
-                    this.ionPullStart.emit();
                     this.animations.push(animation);
                     return;
                 }
@@ -518,7 +503,6 @@ const Refresher = class {
                         this.animations = [];
                         this.gesture.enable(true);
                         this.state = 1 /* RefresherState.Inactive */;
-                        this.ionPullEnd.emit({ reason: 'cancel' });
                     });
                     return;
                 }
@@ -763,7 +747,6 @@ const Refresher = class {
         if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
-            this.ionPullStart.emit();
         }
         // emit "pulling" on every move
         this.ionPull.emit();
@@ -807,15 +790,6 @@ const Refresher = class {
              * available right away.
              */
             this.restoreOverflowStyle();
-            /**
-             * If ionPullStart was emitted, we need to emit ionPullEnd
-             * even though the gesture was aborted before reaching the
-             * pulling threshold.
-             */
-            if (this.didStart) {
-                this.didStart = false;
-                this.ionPullEnd.emit({ reason: 'cancel' });
-            }
         }
     }
     beginRefresh() {
@@ -862,9 +836,6 @@ const Refresher = class {
             if (this.contentFullscreen && this.backgroundContentEl) {
                 (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
             }
-            this.ionPullEnd.emit({
-                reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-            });
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -918,7 +889,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'bed0c2f44c32ecac24b7d8326ac7c7ef1d12c44f', slot: "fixed", class: {
+        return (index.h(index.Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -34,14 +34,21 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./ut
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
+ * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ * @part prev-next-buttons - The buttons used to navigate to the next or previous month when using a grid style layout.
+ * @part prev-button - The button used to navigate to the previous month when using a grid style layout.
+ * @part next-button - The button used to navigate to the next month when using a grid style layout.
+ * @part days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
  *
  * @part calendar-day - The individual buttons that display a day inside of the datetime
  * calendar.
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
+ *
+ * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
  */
 export class Datetime {
     constructor() {
@@ -1375,11 +1382,11 @@ export class Datetime {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
+        return (h("div", { class: "calendar-header", part: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "prev-next-buttons prev-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "prev-next-buttons next-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1611,7 +1618,7 @@ export class Datetime {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (h("div", { class: "datetime-header", part: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1691,7 +1698,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: '19e20c9b6b5f9467e91a2567b6dc7d9d38b56cc3', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '3d0787ecb3ad104c4a60d68a6e57140f018a70f2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1701,7 +1708,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'e31b5ef76cd6262dafd39f2d21980887880ec32e', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '6b245a0033d5ddd1918bc839f142141bf5ec54c5', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/refresher/refresher.js

@@ -68,8 +68,8 @@ export class Refresher {
          * than `1`. The default value is `1` which is equal to the speed of the cursor.
          * If a negative value is passed in, the factor will be `1` instead.
          *
-         * For example, If the value passed is `1.2` and the content is dragged by
-         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * For example: If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
          * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
          * will be `8` pixels, less than the amount the cursor has moved.
          *
@@ -119,9 +119,6 @@ export class Refresher {
         this.animations = [];
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
-        this.ionPullEnd.emit({
-            reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-        });
     }
     async setupiOSNativeRefresher(pullingSpinner, refreshingSpinner) {
         this.elementToTransform = this.scrollEl;
@@ -154,7 +151,6 @@ export class Refresher {
                     if (!this.didStart) {
                         this.didStart = true;
                         this.ionStart.emit();
-                        this.ionPullStart.emit();
                     }
                     // emit "pulling" on every move
                     if (this.pointerDown) {
@@ -230,7 +226,6 @@ export class Refresher {
                 this.lastVelocityY = ev.velocityY;
             },
             onEnd: () => {
-                const hadStarted = this.didStart;
                 this.pointerDown = false;
                 this.didStart = false;
                 if (this.needsCompletion) {
@@ -240,13 +235,6 @@ export class Refresher {
                 else if (this.didRefresh) {
                     readTask(() => translateElement(this.elementToTransform, `${this.el.clientHeight}px`));
                 }
-                else if (hadStarted) {
-                    /**
-                     * User started pulling but released before reaching the refresh threshold.
-                     * Emit ionPullEnd to complete the event pair.
-                     */
-                    this.ionPullEnd.emit({ reason: 'cancel' });
-                }
             },
         });
         this.disabledChanged();
@@ -293,7 +281,6 @@ export class Refresher {
                     ev.data.animation = animation;
                     animation.progressStart(false, 0);
                     this.ionStart.emit();
-                    this.ionPullStart.emit();
                     this.animations.push(animation);
                     return;
                 }
@@ -316,7 +303,6 @@ export class Refresher {
                         this.animations = [];
                         this.gesture.enable(true);
                         this.state = 1 /* RefresherState.Inactive */;
-                        this.ionPullEnd.emit({ reason: 'cancel' });
                     });
                     return;
                 }
@@ -561,7 +547,6 @@ export class Refresher {
         if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
-            this.ionPullStart.emit();
         }
         // emit "pulling" on every move
         this.ionPull.emit();
@@ -605,15 +590,6 @@ export class Refresher {
              * available right away.
              */
             this.restoreOverflowStyle();
-            /**
-             * If ionPullStart was emitted, we need to emit ionPullEnd
-             * even though the gesture was aborted before reaching the
-             * pulling threshold.
-             */
-            if (this.didStart) {
-                this.didStart = false;
-                this.ionPullEnd.emit({ reason: 'cancel' });
-            }
         }
     }
     beginRefresh() {
@@ -660,9 +636,6 @@ export class Refresher {
             if (this.contentFullscreen && this.backgroundContentEl) {
                 (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
             }
-            this.ionPullEnd.emit({
-                reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-            });
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -716,7 +689,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'bed0c2f44c32ecac24b7d8326ac7c7ef1d12c44f', slot: "fixed", class: {
+        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -836,7 +809,7 @@ export class Refresher {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example, If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
+                    "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
                 "getter": false,
                 "setter": false,
@@ -915,24 +888,6 @@ export class Refresher {
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `ionPullStart` instead."
-                        }],
-                    "text": "Emitted when the user begins to start pulling down.\nTODO(FW-7044): Remove this in a major release"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "ionPullStart",
-                "name": "ionPullStart",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when the user begins to start pulling down."
@@ -942,27 +897,6 @@ export class Refresher {
                     "resolved": "void",
                     "references": {}
                 }
-            }, {
-                "method": "ionPullEnd",
-                "name": "ionPullEnd",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the refresher has returned to the inactive state\nafter a pull gesture. This fires whether the refresh completed\nsuccessfully or was canceled."
-                },
-                "complexType": {
-                    "original": "RefresherPullEndEventDetail",
-                    "resolved": "RefresherPullEndEventDetail",
-                    "references": {
-                        "RefresherPullEndEventDetail": {
-                            "location": "import",
-                            "path": "./refresher-interface",
-                            "id": "src/components/refresher/refresher-interface.ts::RefresherPullEndEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {