@ionic/core 7.5.8-dev.11701876182.1e71e7a0 → 7.5.8-dev.11702056888.11188f48

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

@@ -13,8 +13,6 @@ import { getCounterText } from "../input/input.utils";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
- * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
- * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
  */
 export class Textarea {
     constructor() {
@@ -123,7 +121,7 @@ export class Textarea {
     connectedCallback() {
         const { el } = this;
         this.legacyFormController = createLegacyFormController(el);
-        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+        this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.emitStyle();
         this.debounceChanged();
@@ -193,8 +191,6 @@ export class Textarea {
                 'has-placeholder': this.placeholder !== undefined,
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
-                // TODO(FW-2876): remove this
-                legacy: !!this.legacy,
             });
         }
     }
@@ -366,41 +362,20 @@ Developers can use the "legacy" property to continue using the legacy form marku
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     renderTextarea() {
-        const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
+        const { inputId, disabled, fill, shape, labelPlacement } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
-        const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
-        /**
-         * If the label is stacked, it should always sit above the textarea.
-         * For floating labels, the label should move above the textarea if
-         * the textarea has a value, is focused, or has anything in either
-         * the start or end slot.
-         *
-         * If there is content in the start slot, the label would overlap
-         * it if not forced to float. This is also applied to the end slot
-         * because with the default or solid fills, the textarea is not
-         * vertically centered in the container, but the label is. This
-         * causes the slots and label to appear vertically offset from each
-         * other when the label isn't floating above the input. This doesn't
-         * apply to the outline fill, but this was not accounted for to keep
-         * things consistent.
-         *
-         * TODO(FW-5592): Remove hasStartEndSlots condition
-         */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
         return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
-                'has-value': hasValue,
-                'has-focus': hasFocus,
-                'label-floating': labelShouldFloat,
+                'has-value': this.hasValue(),
+                'has-focus': this.hasFocus,
                 [`textarea-fill-${fill}`]: fill !== undefined,
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "textarea-wrapper-inner" }, h("div", { class: "start-slot-wrapper" }, h("slot", { name: "start" })), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { class: "end-slot-wrapper" }, h("slot", { name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { class: "textarea-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     render() {
         const { legacyFormController } = this;

package/dist/collection/components/textarea/textarea.md.css

@@ -356,7 +356,9 @@
 }
 
 .native-wrapper {
+  display: flex;
   position: relative;
+  flex-grow: 1;
   width: 100%;
   height: 100%;
 }
@@ -427,12 +429,6 @@
   word-break: break-word;
 }
 
-.textarea-wrapper-inner {
-  display: flex;
-  width: 100%;
-  min-height: inherit;
-}
-
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -708,13 +704,6 @@
   margin-bottom: 0px;
 }
 
-:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 8px;
-}
-
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -740,7 +729,9 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.label-floating) .label-text-wrapper {
+:host(.textarea-label-placement-stacked) .label-text-wrapper,
+:host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
+:host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -749,29 +740,6 @@
   max-width: calc(100% / 0.75);
 }
 
-.start-slot-wrapper, .end-slot-wrapper {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  flex-shrink: 0;
-  align-self: start;
-}
-
-::slotted([slot=start]),
-::slotted([slot=end]) {
-  margin-top: 0;
-}
-
-::slotted([slot=start]) {
-  margin-inline-end: 16px;
-}
-
-::slotted([slot=end]) {
-  margin-inline-start: 16px;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -1069,7 +1037,9 @@
   }
 }
 
-:host(.label-floating.textarea-fill-solid) .label-text-wrapper {
+:host(.textarea-fill-solid.textarea-label-placement-stacked) .label-text-wrapper,
+:host(.has-focus.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper,
+:host(.has-value.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -1223,7 +1193,9 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.label-floating.textarea-fill-outline) .label-text-wrapper {
+:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
+:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
+:host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1255,13 +1227,6 @@
   margin-bottom: 0px;
 }
 
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 12px;
-}
-
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1397,7 +1362,9 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.label-floating.textarea-fill-outline) .textarea-outline-notch {
+:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
+:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
+:host(.textarea-fill-outline.textarea-label-placement-stacked) .textarea-outline-notch {
   border-top: none;
 }
 

package/dist/collection/components/toast/animations/ios.enter.js

@@ -3,7 +3,6 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
-import { getOffsetForMiddlePosition } from "./utils";
 /**
  * iOS Toast Enter Animation
  */
@@ -19,7 +18,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
             wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
             break;
         case 'middle':
-            const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
+            const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
             wrapperEl.style.top = `${topPosition}px`;
             wrapperAnimation.fromTo('opacity', 0.01, 1);
             break;

package/dist/collection/components/toast/animations/md.enter.js

@@ -3,7 +3,6 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
-import { getOffsetForMiddlePosition } from "./utils";
 /**
  * MD Toast Enter Animation
  */
@@ -16,16 +15,16 @@ export const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(wrapperEl);
     switch (position) {
         case 'top':
-            wrapperEl.style.setProperty('transform', `translateY(${top})`);
+            wrapperEl.style.top = top;
             wrapperAnimation.fromTo('opacity', 0.01, 1);
             break;
         case 'middle':
-            const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
+            const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
             wrapperEl.style.top = `${topPosition}px`;
             wrapperAnimation.fromTo('opacity', 0.01, 1);
             break;
         default:
-            wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
+            wrapperEl.style.bottom = bottom;
             wrapperAnimation.fromTo('opacity', 0.01, 1);
             break;
     }

package/dist/collection/components/toast/animations/utils.js

@@ -7,12 +7,10 @@ import { printIonWarning } from "../../../utils/logging/index";
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * The default animations for both MD and iOS
- * use translateY, which calculates from the
- * top edge of the screen. This behavior impacts
- * how we compute the offset when a toast has
- * position='bottom' since we need to calculate from
- * the bottom edge of the screen instead.
+ * Note that MD animates bottom-positioned toasts using style.bottom,
+ * which calculates from the bottom edge of the screen, while iOS uses
+ * translateY, which calculates from the top edge of the screen. This
+ * is why the bottom calculates differ slightly between modes.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -27,7 +25,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
      */
     let offset;
     if (mode === 'md') {
-        offset = position === 'top' ? 8 : -8;
+        offset = 8;
     }
     else {
         offset = position === 'top' ? 10 : -10;
@@ -50,7 +48,12 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
              * to the top edge of the anchor. We want to calculate from the
              * bottom edge of the screen instead.
              */
-            offset -= win.innerHeight - box.top;
+            if (mode === 'md') {
+                offset += win.innerHeight - box.top;
+            }
+            else {
+                offset -= win.innerHeight - box.top;
+            }
         }
         /**
          * We don't include safe area here because that should already be
@@ -64,7 +67,9 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
     else {
         return {
             top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-            bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+            bottom: mode === 'md'
+                ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
+                : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
         };
     }
 }
@@ -78,14 +83,3 @@ function warnIfAnchorIsHidden(positionAnchor, toast) {
         printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
     }
 }
-/**
- * Returns the top offset required to place
- * the toast in the middle of the screen.
- * Only needed when position="toast".
- * @param toastHeight - The height of the ion-toast element
- * @param wrapperHeight - The height of the .toast-wrapper element
- * inside the toast's shadow root.
- */
-export const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
-    return Math.floor(toastHeight / 2 - wrapperHeight / 2);
-};

package/dist/collection/components/toast/test/toast.spec.js

@@ -4,7 +4,6 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { config } from "../../../global/config";
-import { createAnimation } from "../../../utils/animation/animation";
 import { Toast } from "../toast";
 describe('toast: custom html', () => {
     it('should not allow for custom html by default', async () => {
@@ -119,82 +118,3 @@ describe('toast: button cancel', () => {
         expect(buttonCancel.getAttribute('part')).toBe('button cancel');
     });
 });
-describe('toast: swipe gesture', () => {
-    describe('prefersSwipeGesture()', () => {
-        let toast;
-        beforeEach(() => {
-            toast = new Toast();
-        });
-        it('should return true if set to a valid swipe value', () => {
-            toast.swipeGesture = 'vertical';
-            expect(toast.prefersSwipeGesture()).toBe(true);
-        });
-        it('should return false if set to undefined', () => {
-            toast.swipeGesture = undefined;
-            expect(toast.prefersSwipeGesture()).toBe(false);
-        });
-        it('should return false if set to null', () => {
-            toast.swipeGesture = null;
-            expect(toast.prefersSwipeGesture()).toBe(false);
-        });
-        it('should return false if set to invalid string', () => {
-            toast.swipeGesture = 'limit'; // `'limit'` doesn't exist
-            expect(toast.prefersSwipeGesture()).toBe(false);
-        });
-    });
-    describe('swipeGesture property', () => {
-        let toast;
-        beforeEach(() => {
-            toast = new Toast();
-            // Stub the enter animation so we aren't querying elements in the DOM that may not exist
-            toast.enterAnimation = () => createAnimation();
-        });
-        it('should not create a swipe gesture on present if swipeGesture is undefined', async () => {
-            expect(toast.gesture).toBe(undefined);
-            await toast.present();
-            expect(toast.gesture).toBe(undefined);
-        });
-        it('should create a swipe gesture on present', async () => {
-            toast.swipeGesture = 'vertical';
-            expect(toast.gesture).toBe(undefined);
-            await toast.present();
-            expect(toast.gesture).not.toBe(undefined);
-        });
-        it('should destroy a swipe gesture on dismiss', async () => {
-            toast.swipeGesture = 'vertical';
-            await toast.present();
-            expect(toast.gesture).not.toBe(undefined);
-            await toast.dismiss();
-            expect(toast.gesture).toBe(undefined);
-        });
-        it('should create a swipe gesture if swipeGesture is set after present', async () => {
-            await toast.present();
-            expect(toast.gesture).toBe(undefined);
-            /**
-             * Manually invoke the watch
-             * callback synchronously.
-             */
-            toast.swipeGesture = 'vertical';
-            toast.swipeGestureChanged();
-            expect(toast.gesture).not.toBe(undefined);
-        });
-        it('should destroy a swipe gesture if swipeGesture is cleared after present', async () => {
-            toast.swipeGesture = 'vertical';
-            await toast.present();
-            expect(toast.gesture).not.toBe(undefined);
-            /**
-             * Manually invoke the watch
-             * callback synchronously.
-             */
-            toast.swipeGesture = undefined;
-            toast.swipeGestureChanged();
-            expect(toast.gesture).toBe(undefined);
-        });
-        it('should not create a swipe gesture if the toast is not presented', async () => {
-            expect(toast.gesture).toBe(undefined);
-            toast.swipeGesture = 'vertical';
-            toast.swipeGestureChanged();
-            expect(toast.gesture).toBe(undefined);
-        });
-    });
-});

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

@@ -189,16 +189,6 @@
   }
 }
 
-.toast-wrapper.toast-top {
-  transform: translate3d(0,  -100%,  0);
-  top: 0;
-}
-
-.toast-wrapper.toast-bottom {
-  transform: translate3d(0,  100%,  0);
-  bottom: 0;
-}
-
 .toast-container {
   display: flex;
   align-items: center;
@@ -353,10 +343,20 @@
     background: rgba(var(--ion-color-base-rgb), 0.8);
   }
 }
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
 .toast-wrapper.toast-middle {
   opacity: 0.01;
 }
 
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-content {
   -webkit-padding-start: 15px;
   padding-inline-start: 15px;

package/dist/collection/components/toast/toast.js

@@ -6,7 +6,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -16,7 +16,6 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { getAnimationPosition } from "./animations/utils";
-import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -42,41 +41,6 @@ export class Toast {
                 this.callButtonHandler(cancelButton);
             }
         };
-        /**
-         * Create a new swipe gesture so Toast
-         * can be swiped to dismiss.
-         */
-        this.createSwipeGesture = (toastPosition) => {
-            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-                /**
-                 * If the gesture completed then
-                 * we should dismiss the toast.
-                 */
-                this.dismiss(undefined, GESTURE);
-            }));
-            gesture.enable(true);
-        };
-        /**
-         * Destroy an existing swipe gesture
-         * so Toast can no longer be swiped to dismiss.
-         */
-        this.destroySwipeGesture = () => {
-            const { gesture } = this;
-            if (gesture === undefined) {
-                return;
-            }
-            gesture.destroy();
-            this.gesture = undefined;
-        };
-        /**
-         * Returns `true` if swipeGesture
-         * is configured to a value that enables the swipe behavior.
-         * Returns `false` otherwise.
-         */
-        this.prefersSwipeGesture = () => {
-            const { swipeGesture } = this;
-            return swipeGesture === 'vertical';
-        };
         this.revealContentToScreenReader = false;
         this.overlayIndex = undefined;
         this.delegate = undefined;
@@ -97,37 +61,9 @@ export class Toast {
         this.animated = true;
         this.icon = undefined;
         this.htmlAttributes = undefined;
-        this.swipeGesture = undefined;
         this.isOpen = false;
         this.trigger = undefined;
     }
-    swipeGestureChanged() {
-        /**
-         * If the Toast is presented, then we need to destroy
-         * any actives gestures before a new gesture is potentially
-         * created below.
-         *
-         * If the Toast is dismissed, then no gesture should be available
-         * since the Toast is not visible. This case should never
-         * happen since the "dismiss" method handles destroying
-         * any active swipe gestures, but we keep this code
-         * around to handle the first case.
-         */
-        this.destroySwipeGesture();
-        /**
-         * A new swipe gesture should only be created
-         * if the Toast is presented. If the Toast is not
-         * yet presented then the "present" method will
-         * handle calling the swipe gesture setup function.
-         */
-        if (this.presented && this.prefersSwipeGesture()) {
-            /**
-             * If the Toast is presented then
-             * lastPresentedPosition is defined.
-             */
-            this.createSwipeGesture(this.lastPresentedPosition);
-        }
-    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -199,14 +135,6 @@ export class Toast {
         if (this.duration > 0) {
             this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
         }
-        /**
-         * If the Toast has a swipe gesture then we can
-         * create the gesture so users can swipe the
-         * presented Toast.
-         */
-        if (this.prefersSwipeGesture()) {
-            this.createSwipeGesture(animationPosition);
-        }
         unlock();
     }
     /**
@@ -241,11 +169,6 @@ export class Toast {
             this.revealContentToScreenReader = false;
         }
         this.lastPresentedPosition = undefined;
-        /**
-         * If the Toast has a swipe gesture then we can
-         * safely destroy it now that it is dismissed.
-         */
-        this.destroySwipeGesture();
         unlock();
         return dismissed;
     }
@@ -786,29 +709,6 @@ export class Toast {
                     "text": "Additional attributes to pass to the toast."
                 }
             },
-            "swipeGesture": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ToastSwipeGestureDirection",
-                    "resolved": "\"vertical\" | undefined",
-                    "references": {
-                        "ToastSwipeGestureDirection": {
-                            "location": "import",
-                            "path": "./toast-interface",
-                            "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
-                },
-                "attribute": "swipe-gesture",
-                "reflect": false
-            },
             "isOpen": {
                 "type": "boolean",
                 "mutable": false,
@@ -1119,9 +1019,6 @@ export class Toast {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "swipeGesture",
-                "methodName": "swipeGestureChanged"
-            }, {
                 "propName": "isOpen",
                 "methodName": "onIsOpenChange"
             }, {

package/dist/collection/components/toast/toast.md.css

@@ -189,16 +189,6 @@
   }
 }
 
-.toast-wrapper.toast-top {
-  transform: translate3d(0,  -100%,  0);
-  top: 0;
-}
-
-.toast-wrapper.toast-bottom {
-  transform: translate3d(0,  100%,  0);
-  bottom: 0;
-}
-
 .toast-container {
   display: flex;
   align-items: center;

package/dist/collection/components/toggle/test/toggle.spec.js

@@ -37,18 +37,6 @@ describe('toggle', () => {
             expect(t.enableOnOffLabels).toBe(true);
         });
     });
-    describe('shadow parts', () => {
-        it('should have shadow parts', async () => {
-            const page = await newSpecPage({
-                components: [Toggle],
-                html: `<ion-toggle>Label</ion-toggle>`,
-            });
-            const toggle = page.body.querySelector('ion-toggle');
-            expect(toggle).toHaveShadowPart('label');
-            expect(toggle).toHaveShadowPart('track');
-            expect(toggle).toHaveShadowPart('handle');
-        });
-    });
 });
 describe('ion-toggle: disabled', () => {
     it('clicking disabled toggle should not toggle checked state', async () => {

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

@@ -184,6 +184,12 @@ input {
 }
 
 .label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the input
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;