@ionic/core 8.8.6-dev.11777490150.1970e4f2 → 8.8.6-nightly.20260430

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

@@ -3,11 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { isEndSide } from "../../utils/helpers";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class ItemOptions {
     constructor() {
         /**
@@ -23,12 +19,12 @@ export class ItemOptions {
         });
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
-                [theme]: true,
+        return (h(Host, { key: '7b4b93984182222c64c7a2a22a18e52ac19e3049', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`item-options-${theme}`]: true,
+                [`item-options-${mode}`]: true,
                 /**
                  * Note: The "start" and "end" terms refer to the
                  * direction ion-item-option instances within ion-item-options flow.
@@ -45,15 +41,13 @@ export class ItemOptions {
     static get originalStyleUrls() {
         return {
             "ios": ["item-options.ios.scss"],
-            "md": ["item-options.md.scss"],
-            "ionic": ["item-options.ionic.scss"]
+            "md": ["item-options.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-options.ios.css"],
-            "md": ["item-options.md.css"],
-            "ionic": ["item-options.ionic.css"]
+            "md": ["item-options.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-options/item-options.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -30,6 +63,7 @@ ion-item-options {
   position: absolute;
   height: 100%;
   user-select: none;
+  z-index: 1;
 }
 :host-context([dir=rtl]) ion-item-options {
   justify-content: flex-start;
@@ -124,12 +158,6 @@ ion-item-options {
   visibility: visible;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -185,77 +213,6 @@ ion-item-options {
  *   }
  * }
  */
-ion-item-options {
-  z-index: 1;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/item-sliding/item-sliding.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -6,14 +6,10 @@ import { findClosestIonContent, disableContentScrollY, resetContentScrollY } fro
 import { isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class ItemSliding {
     constructor() {
         this.item = null;
@@ -64,18 +60,10 @@ export class ItemSliding {
         this.disabledChanged();
     }
     disconnectedCallback() {
-        var _a;
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        if (this.tmr !== undefined) {
-            clearTimeout(this.tmr);
-            this.tmr = undefined;
-        }
-        // Abort any in-progress animation. The abort handler rejects the pending
-        // promise, causing animateFullSwipe's finally block to run cleanup.
-        (_a = this.animationAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.item = null;
         this.leftOptions = this.rightOptions = undefined;
         if (openSlidingItem === this.el) {
@@ -109,9 +97,6 @@ export class ItemSliding {
      */
     async open(side) {
         var _a;
-        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
-            return;
-        }
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -163,9 +148,6 @@ export class ItemSliding {
      * Close the sliding item. Items can also be closed from the [List](./list).
      */
     async close() {
-        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
-            return;
-        }
         this.setOpenAmount(0, true);
     }
     /**
@@ -196,111 +178,6 @@ export class ItemSliding {
             return this.rightOptions;
         }
     }
-    /**
-     * Check if the given item options element contains at least one expandable, non-disabled option.
-     */
-    hasExpandableOptions(options) {
-        if (!options)
-            return false;
-        const optionElements = options.querySelectorAll('ion-item-option');
-        return Array.from(optionElements).some((option) => {
-            return option.expandable === true && !option.disabled;
-        });
-    }
-    /**
-     * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
-     * given AbortSignal is fired before the timer expires.
-     */
-    delay(ms, signal) {
-        return new Promise((resolve, reject) => {
-            const id = setTimeout(resolve, ms);
-            signal.addEventListener('abort', () => {
-                clearTimeout(id);
-                reject(new DOMException('Animation cancelled', 'AbortError'));
-            }, { once: true });
-        });
-    }
-    /**
-     * Animate the item to a specific position using CSS transitions.
-     * Returns a Promise that resolves when the animation completes, or rejects if
-     * the given AbortSignal is fired.
-     */
-    animateToPosition(position, duration, signal) {
-        return new Promise((resolve, reject) => {
-            if (!this.item) {
-                return resolve();
-            }
-            this.item.style.transition = `transform ${duration}ms ease-out`;
-            this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
-            const id = setTimeout(resolve, duration);
-            signal.addEventListener('abort', () => {
-                clearTimeout(id);
-                reject(new DOMException('Animation cancelled', 'AbortError'));
-            }, { once: true });
-        });
-    }
-    /**
-     * Calculate the swipe threshold distance required to trigger a full swipe animation.
-     * Returns the maximum options width plus a margin to ensure it's achievable.
-     */
-    getSwipeThreshold(direction) {
-        const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
-        return maxWidth + SWIPE_MARGIN;
-    }
-    /**
-     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
-     * This is used when an expandable option is swiped beyond the threshold.
-     */
-    async animateFullSwipe(direction) {
-        const abortController = new AbortController();
-        this.animationAbortController = abortController;
-        const { signal } = abortController;
-        // Prevent interruption during animation
-        if (this.gesture) {
-            this.gesture.enable(false);
-        }
-        try {
-            const options = direction === 'end' ? this.rightOptions : this.leftOptions;
-            // Trigger expandable state without moving the item
-            // Set state directly so expandable option fills its container, starting from
-            // the exact position where the user released, without any visual snap.
-            this.state =
-                direction === 'end'
-                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ | 128 /* SlidingState.AnimatingFullSwipe */
-                    : 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ | 128 /* SlidingState.AnimatingFullSwipe */;
-            await this.delay(100, signal);
-            // Animate off-screen while maintaining the expanded state
-            const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
-            await this.animateToPosition(offScreenDistance, 250, signal);
-            // Trigger action
-            if (options) {
-                options.fireSwipeEvent();
-            }
-            // Small delay before returning
-            await this.delay(300, signal);
-            // Return to closed state
-            await this.animateToPosition(0, 250, signal);
-        }
-        catch (_a) {
-            // Animation was aborted (e.g. component disconnected). finally handles cleanup.
-        }
-        finally {
-            this.animationAbortController = undefined;
-            // Reset state
-            if (this.item) {
-                this.item.style.transition = '';
-                this.item.style.transform = '';
-            }
-            this.openAmount = 0;
-            this.state = 2 /* SlidingState.Disabled */;
-            if (openSlidingItem === this.el) {
-                openSlidingItem = undefined;
-            }
-            if (this.gesture) {
-                this.gesture.enable(!this.disabled);
-            }
-        }
-    }
     async updateOptions() {
         var _a;
         const options = this.el.querySelectorAll('ion-item-options');
@@ -407,23 +284,6 @@ export class ItemSliding {
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
-        // Check for full swipe conditions with expandable options
-        const rawSwipeDistance = Math.abs(gesture.deltaX);
-        const direction = gesture.deltaX < 0 ? 'end' : 'start';
-        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
-        const hasExpandable = this.hasExpandableOptions(options);
-        const shouldTriggerFullSwipe = hasExpandable &&
-            (rawSwipeDistance > this.getSwipeThreshold(direction) ||
-                (Math.abs(gesture.velocityX) > 0.5 &&
-                    rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
-        if (shouldTriggerFullSwipe) {
-            this.animateFullSwipe(direction).catch(() => {
-                if (this.gesture) {
-                    this.gesture.enable(!this.disabled);
-                }
-            });
-            return;
-        }
         const velocity = gesture.velocityX;
         let restingPoint = this.openAmount > 0 ? this.optsWidthRightSide : -this.optsWidthLeftSide;
         // Check if the drag didn't clear the buttons mid-point
@@ -530,9 +390,9 @@ export class ItemSliding {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '321925e5582cc08b14031231603b1f1c49828b0a', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '8fd81d74701402294a48b79c56d6eceadafd4881', class: {
+                [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
                 'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -129,12 +123,6 @@
   overflow: inherit;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -190,12 +178,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/label/label.js

@@ -3,10 +3,9 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Label {
     constructor() {
@@ -58,29 +57,27 @@ export class Label {
     }
     render() {
         const position = this.position;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', class: createColorClasses(this.color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
+            }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["label.ios.scss"],
-            "md": ["label.md.scss"],
-            "ionic": ["label.md.scss"]
+            "md": ["label.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["label.ios.css"],
-            "md": ["label.md.css"],
-            "ionic": ["label.md.css"]
+            "md": ["label.md.css"]
         };
     }
     static get properties() {

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -129,12 +123,6 @@
   overflow: inherit;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -190,12 +178,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,45 +1,3 @@
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-ion-list {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  display: block;
-  contain: content;
-  list-style-type: none;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -95,17 +53,25 @@ ion-list {
  *   }
  * }
  */
+ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: block;
+  contain: content;
+  list-style-type: none;
+}
+
 ion-list.list-inset {
   transform: translateZ(0);
   overflow: hidden;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -161,12 +127,6 @@ ion-list.list-inset {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use