@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

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

@@ -9,18 +9,6 @@ import { watchForOptions } from "../../utils/watch-options";
 import { getIonTheme } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
-const IONIC_ELASTIC_FACTOR = 0.15;
-const IONIC_SNAP_OPEN_RATIO = 0.4;
-const IONIC_EXPAND_TRIGGER = 40;
-const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
-const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
-const IONIC_ACTION_BASE_WIDTH = 64;
-const IONIC_CONFIRM_PAUSE = 300;
-const FULL_SWIPE_TRANSITION_MS = 250;
-const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
-/** Expandable, non-disabled option (matches item-option expandable class). */
-const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
-const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
 let openSlidingItem;
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -37,17 +25,12 @@ export class ItemSliding {
         this.optsDirty = true;
         this.contentEl = null;
         this.initialContentScrollY = true;
-        this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
-        this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
         this.state = 2 /* SlidingState.Disabled */;
         /**
          * If `true`, the user cannot interact with the sliding item.
          */
         this.disabled = false;
     }
-    isIonicTheme() {
-        return getIonTheme(this) === 'ionic';
-    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -247,7 +230,7 @@ export class ItemSliding {
             if (!this.item) {
                 return resolve();
             }
-            this.el.classList.add('item-sliding-full-swipe-transition');
+            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', () => {
@@ -265,8 +248,8 @@ export class ItemSliding {
         return maxWidth + SWIPE_MARGIN;
     }
     /**
-     * Native (ios/md) full swipe: off-screen → fire swipe → return.
-     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
+     * 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();
@@ -288,7 +271,7 @@ export class ItemSliding {
             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, FULL_SWIPE_TRANSITION_MS, signal);
+            await this.animateToPosition(offScreenDistance, 250, signal);
             // Trigger action
             if (options) {
                 options.fireSwipeEvent();
@@ -296,7 +279,7 @@ export class ItemSliding {
             // Small delay before returning
             await this.delay(300, signal);
             // Return to closed state
-            await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
+            await this.animateToPosition(0, 250, signal);
         }
         catch (_a) {
             // Animation was aborted (e.g. component disconnected). finally handles cleanup.
@@ -304,8 +287,8 @@ export class ItemSliding {
         finally {
             this.animationAbortController = undefined;
             // Reset state
-            this.el.classList.remove('item-sliding-full-swipe-transition');
             if (this.item) {
+                this.item.style.transition = '';
                 this.item.style.transform = '';
             }
             this.openAmount = 0;
@@ -318,160 +301,6 @@ export class ItemSliding {
             }
         }
     }
-    queryExpandableOption(options) {
-        if (!options) {
-            return undefined;
-        }
-        const expandableOptions = Array.from(options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR));
-        if (expandableOptions.length === 0) {
-            return undefined;
-        }
-        if (expandableOptions.length === 1) {
-            return expandableOptions[0];
-        }
-        const isRTL = document.dir === 'rtl';
-        const isEndSide = options.classList.contains('item-options-end');
-        // Match native edge behavior for multi-expandable configs
-        const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
-        return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
-    }
-    getExpandableOption(direction) {
-        return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
-    }
-    getOpenDirectionFromAmount(openAmount) {
-        if (openAmount > 0) {
-            return 'end';
-        }
-        if (openAmount < 0) {
-            return 'start';
-        }
-        return undefined;
-    }
-    getOptionsWidthForDirection(direction) {
-        return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
-    }
-    getExpandableBaseWidth(direction) {
-        return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
-    }
-    setIonicExpandableWidth(direction, width) {
-        const expandableOption = this.getExpandableOption(direction);
-        if (!expandableOption) {
-            return;
-        }
-        const style = expandableOption.style;
-        const baseWidth = this.getExpandableBaseWidth(direction);
-        style.width = `${Math.max(baseWidth, width)}px`;
-    }
-    resetIonicExpandableOptions() {
-        [this.leftOptions, this.rightOptions].forEach((options) => {
-            if (!options) {
-                return;
-            }
-            options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
-                node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
-            });
-            const expandableOption = this.queryExpandableOption(options);
-            if (!expandableOption) {
-                return;
-            }
-            expandableOption.style.width = '';
-            expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
-        });
-    }
-    updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
-        var _a;
-        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
-            return;
-        }
-        const direction = this.getOpenDirectionFromAmount(openAmount);
-        if (direction === undefined) {
-            const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
-            if (previousDirection === undefined) {
-                this.resetIonicExpandableOptions();
-                return;
-            }
-            (_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
-            this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection));
-            return;
-        }
-        const baseWidth = this.getExpandableBaseWidth(direction);
-        const optionsWidth = this.getOptionsWidthForDirection(direction);
-        const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
-        const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
-        const targetWidth = baseWidth + resistedExtraWidth;
-        const expandableOption = this.getExpandableOption(direction);
-        if (expandableOption) {
-            if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
-                expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
-            }
-            else {
-                expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
-            }
-        }
-        this.setIonicExpandableWidth(direction, targetWidth);
-    }
-    async animateIonicFullSwipe(direction) {
-        const abortController = new AbortController();
-        this.animationAbortController = abortController;
-        const { signal } = abortController;
-        const expandableOption = this.getExpandableOption(direction);
-        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
-        if (this.gesture) {
-            this.gesture.enable(false);
-        }
-        try {
-            this.state =
-                direction === 'end'
-                    ? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
-                    : 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
-            if (!this.item) {
-                return;
-            }
-            const itemWidth = this.el.offsetWidth || window.innerWidth;
-            const baseWidth = this.getExpandableBaseWidth(direction);
-            const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
-            const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
-            if (expandableOption) {
-                expandableOption.classList.remove('item-sliding-expandable-width-back');
-                expandableOption.classList.add('item-sliding-expandable-width-in');
-                expandableOption.style.width = `${expandableTargetWidth}px`;
-            }
-            this.el.classList.remove('item-sliding-confirm-item-back');
-            this.el.classList.add('item-sliding-confirm-item-in');
-            this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
-            await this.delay(150, signal);
-            options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
-            await this.delay(IONIC_CONFIRM_PAUSE, signal);
-            if (expandableOption) {
-                expandableOption.classList.remove('item-sliding-expandable-width-in');
-                expandableOption.classList.add('item-sliding-expandable-width-back');
-                expandableOption.style.width = `${baseWidth}px`;
-            }
-            this.el.classList.remove('item-sliding-confirm-item-in');
-            this.el.classList.add('item-sliding-confirm-item-back');
-            this.item.style.transform = 'translate3d(0, 0, 0)';
-            await this.delay(500, signal);
-        }
-        catch (_a) {
-            // Animation was aborted. finally handles cleanup.
-        }
-        finally {
-            this.animationAbortController = undefined;
-            this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
-            if (this.item) {
-                this.item.style.transform = '';
-            }
-            this.resetIonicExpandableOptions();
-            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');
@@ -539,12 +368,7 @@ export class ItemSliding {
         }
         this.initialOpenAmount = this.openAmount;
         if (this.item) {
-            if (this.isIonicTheme()) {
-                this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
-            }
-            else {
-                this.el.classList.add('item-sliding-dragging');
-            }
+            this.item.style.transition = 'none';
         }
     }
     onMove(gesture) {
@@ -567,46 +391,22 @@ export class ItemSliding {
                 printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
                 break;
         }
-        if (this.isIonicTheme()) {
-            if (openAmount > this.optsWidthRightSide) {
-                const overDrag = openAmount - this.optsWidthRightSide;
-                openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
-            }
-            else if (openAmount < -this.optsWidthLeftSide) {
-                const overDrag = openAmount + this.optsWidthLeftSide;
-                openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
-            }
+        let optsWidth;
+        if (openAmount > this.optsWidthRightSide) {
+            optsWidth = this.optsWidthRightSide;
+            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
         }
-        else {
-            let optsWidth;
-            if (openAmount > this.optsWidthRightSide) {
-                optsWidth = this.optsWidthRightSide;
-                openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
-            }
-            else if (openAmount < -this.optsWidthLeftSide) {
-                optsWidth = -this.optsWidthLeftSide;
-                openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
-            }
+        else if (openAmount < -this.optsWidthLeftSide) {
+            optsWidth = -this.optsWidthLeftSide;
+            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
         }
         this.setOpenAmount(openAmount, false);
     }
     onEnd(gesture) {
-        this.el.classList.remove('item-sliding-dragging');
-        this.restoreContentScrollAfterSlide();
-        if (this.isIonicTheme()) {
-            this.onEndIonic(gesture);
-        }
-        else {
-            this.onEndNative(gesture);
-        }
-    }
-    restoreContentScrollAfterSlide() {
         const { contentEl, initialContentScrollY } = this;
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
-    }
-    onEndNative(gesture) {
         // Check for full swipe conditions with expandable options
         const rawSwipeDistance = Math.abs(gesture.deltaX);
         const direction = gesture.deltaX < 0 ? 'end' : 'start';
@@ -643,64 +443,17 @@ export class ItemSliding {
             this.leftOptions.fireSwipeEvent();
         }
     }
-    onEndIonic(gesture) {
-        const velocity = gesture.velocityX;
-        const velocityX = velocity * 1000;
-        const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
-        if (activeDirection === undefined) {
-            this.setOpenAmount(0, true);
-            return;
-        }
-        const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
-        const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
-        const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
-        const closeDirection = activeDirection === 'end'
-            ? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
-            : velocityX < -IONIC_FULL_SWIPE_VELOCITY_THRESHOLD;
-        if (closeDirection) {
-            this.setOpenAmount(0, true);
-            return;
-        }
-        if (hasExpandable &&
-            (extraWidth >= IONIC_EXPAND_TRIGGER ||
-                (extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))) {
-            this.animateIonicFullSwipe(activeDirection).catch(() => {
-                if (this.gesture) {
-                    this.gesture.enable(!this.disabled);
-                }
-            });
-            return;
-        }
-        const flickOpen = activeDirection === 'end'
-            ? velocityX < -IONIC_OPEN_VELOCITY_THRESHOLD
-            : velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
-        const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
-        const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
-        const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
-        const restingPoint = shouldSnapOpen ? fullOpen : 0;
-        this.setOpenAmount(restingPoint, true);
-    }
     calculateOptsWidth() {
         this.optsWidthRightSide = 0;
         if (this.rightOptions) {
             this.rightOptions.style.display = 'flex';
             this.optsWidthRightSide = this.rightOptions.offsetWidth;
-            const rightExpandable = this.queryExpandableOption(this.rightOptions);
-            if (rightExpandable) {
-                rightExpandable.style.width = '';
-                this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
-            }
             this.rightOptions.style.display = '';
         }
         this.optsWidthLeftSide = 0;
         if (this.leftOptions) {
             this.leftOptions.style.display = 'flex';
             this.optsWidthLeftSide = this.leftOptions.offsetWidth;
-            const leftExpandable = this.queryExpandableOption(this.leftOptions);
-            if (leftExpandable) {
-                leftExpandable.style.width = '';
-                this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
-            }
             this.leftOptions.style.display = '';
         }
         this.optsDirty = false;
@@ -715,30 +468,35 @@ export class ItemSliding {
         }
         const { el } = this;
         const style = this.item.style;
-        const previousOpenAmount = this.openAmount;
         this.openAmount = openAmount;
-        if (this.isIonicTheme()) {
-            this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
-        }
-        if (this.isIonicTheme() && isFinal) {
-            const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
-            if (closing) {
-                this.el.classList.add('item-sliding-transition-snapback');
-            }
-            else {
-                this.el.classList.add('item-sliding-transition-open');
-            }
+        if (isFinal) {
+            style.transition = '';
         }
         if (openAmount > 0) {
-            const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
-            this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
+            this.state =
+                openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
+                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
+                    : 8 /* SlidingState.End */;
         }
         else if (openAmount < 0) {
-            const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
-            this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
+            this.state =
+                openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
+                    ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
+                    : 16 /* SlidingState.Start */;
         }
         else {
+            /**
+             * The sliding options should not be
+             * clickable while the item is closing.
+             */
             el.classList.add('item-sliding-closing');
+            /**
+             * Item sliding cannot be interrupted
+             * while closing the item. If it did,
+             * it would allow the item to get into an
+             * inconsistent state where multiple
+             * items are then open at the same time.
+             */
             if (this.gesture) {
                 this.gesture.enable(false);
             }
@@ -773,7 +531,7 @@ export class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '47de8c8a9721f9223b42d6722a9ad32f378818aa', class: {
+        return (h(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -785,16 +543,12 @@ export class ItemSliding {
     static get is() { return "ion-item-sliding"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["item-sliding.native.scss"],
-            "md": ["item-sliding.native.scss"],
-            "ionic": ["item-sliding.ionic.scss"]
+            "$": ["item-sliding.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["item-sliding.native.css"],
-            "md": ["item-sliding.native.css"],
-            "ionic": ["item-sliding.ionic.css"]
+            "$": ["item-sliding.css"]
         };
     }
     static get properties() {

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

@@ -330,7 +330,7 @@
 }
 
 ::slotted(p) {
-  color: var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));
+  color: var(--ion-text-color-step-600, #999999);
 }
 
 :host(.in-item-color)::slotted(p) {

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

@@ -59,13 +59,13 @@ export class Label {
     render() {
         const position = this.position;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b1f261db441bcb0a325a5b3e21da17764a56f17c', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd730045c08ba576082563398ab51fc903577d214', class: createColorClasses(this.color, {
                 [theme]: 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: '490444c8c0d4cf72eae3f8abfb7ed7ecc30bb213' })));
+            }) }, h("slot", { key: '604289ef567339c83fb409371224906819a9d7cc' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -298,7 +298,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),
@@ -356,7 +356,7 @@
 }
 
 ::slotted(p) {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-text-color-step-400, #666666);
 }
 
 :host(.in-item-color)::slotted(p) {

package/dist/collection/components/list/list.js

@@ -46,7 +46,7 @@ export class List {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: '9be30ff6e75e020c0db7054800cb874efef26bd8', role: "list", class: {
+        return (h(Host, { key: 'dcdfb595a6b45307f9810e1ded25ba635c947940', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,

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

@@ -280,8 +280,8 @@
  */
 :host {
   --background: transparent;
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --color: var(--ion-text-color-step-150, #262626);
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   /* stylelint-disable */
   padding-right: var(--ion-safe-area-right);
   padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);

package/dist/collection/components/list-header/list-header.js

@@ -14,10 +14,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7a1632a069317285210f4aeae50a6f2ef6955c56', class: createColorClasses(this.color, {
+        return (h(Host, { key: '0be4fb7d4f9cd6f50229cf7b361c74e94fbfce91', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: 'a9a9463f209023da222f38a78126d5aaeb2f03b9', class: "list-header-inner", part: "inner" }, h("slot", { key: 'e3c6ec1b588392d347844d59d338abc339e80634' }))));
+            }) }, h("div", { key: '4dcc3374685728ae9270d8d58b1ea1c08b0bbc08', class: "list-header-inner", part: "inner" }, h("slot", { key: '5658cc9185680bfa96328685d817b84b18e9ab5a' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-header/list-header.md.css

@@ -281,7 +281,7 @@
 :host {
   --background: transparent;
   --color: var(--ion-text-color, #000);
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   /* stylelint-disable */
   padding-right: var(--ion-safe-area-right);
   padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);

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

@@ -182,10 +182,10 @@ ion-spinner {
  * }
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
+  --background: var(--ion-overlay-background-color, var(--ion-background-color-step-100, #f9f9f9));
   --max-width: 270px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --spinner-color: var(--ion-text-color-step-400, #666666);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   color: var(--ion-text-color, #000);
   font-size: 0.875rem;

package/dist/collection/components/loading/loading.js

@@ -180,9 +180,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '2ffae36b20a7d7f3a752a062d90062583e31d053', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'a6d8cac2c34a0905ec67a2c64be7ec12cc84f168', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cd011d86f20869096a8546f098fb5edad44033a1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '70298be2139d6004e0f8fc5a85c5d05f1efdc347', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '32aef90695d91e0a82696abbce96ba29cb1a2608', class: "loading-spinner" }, h("ion-spinner", { key: '7ae69c27be273cf3e83230dae043168df27ac27e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'f13a01b31516c3fe85dd3a623962290c03e7412f', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, h("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

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

@@ -182,12 +182,12 @@ ion-spinner {
  * }
  */
 :host {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --background: var(--ion-background-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-primary, #0054e9);
+  --spinner-color: var(--ion-color-primary, var(--ion-color-primary-bold));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
   font-size: 0.875rem;
 }
 

package/dist/collection/components/menu/menu.js

@@ -661,14 +661,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '76e15d710fbbbd2e64795224decc3673fd160db0', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '12bd2c4e9aa2f314ffc45d7f43290bd9910ca8b0', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [theme]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'cc0a0773caff97aefa98015bf3e36631173d2b4f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '0b90d1248bdf3bedafda7913189635c8d010abb6' })), h("ion-backdrop", { key: '4fb7013bc61161e6e336541ed25605219410f749', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'd43e12f2502ae5da847eb0d2a70d0a3945733739', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '19977e6584bdbb5b01e6e0a4a7f4558087175b33' })), h("ion-backdrop", { key: '22e79a7edca409248bd3637474d6783f1d7de1b3', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -295,7 +295,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: 0.1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
   --padding-start: 5px;
   --padding-end: 5px;
   min-height: 32px;

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

@@ -67,7 +67,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '341ca3bfac81ce4432eef5d2fd738becd1dfb07e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '206b8482b58e7ee49ea89393a15e9cf30578297b', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -76,7 +76,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '6e6229df2fc1f2d18294a5fbf7fe71e7dd47666a' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '0216acbf67d7aa5edc52328f7ded4cb98bc8a237', class: "button-inner" }, h("slot", { key: '5c2cdae42add9a25d3e6323048fcbc6b5fc9b32e' }, h("ion-icon", { key: '5b38c283957cd2f1ad659427dec612fc84fc054f', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'adabe4ffa1d66fe36d55294d774db9c4bba1ad76', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '33017f0cde4835383f65b82f24e088dc2cf46517' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '63aadc2910f7fd7ae070fe108822c51441dd8ea5', class: "button-inner" }, h("slot", { key: '6696b67329bdf6a0a7db0739d16717eb9ffc5f3b' }, h("ion-icon", { key: '7f88dd0caa7003db810bce76189ecbaba9ff6317', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '1a2063529bb63cc055fb4bb7d1ad3032df2a74b4', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }