@ionic/core 8.8.14-dev.11784243422.11f0110c → 8.8.14-dev.11785447127.1dbdd22e

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

@@ -218,6 +218,10 @@
   justify-content: space-between;
 }
 
+:host .datetime-action-buttons ion-button {
+  --color: var(--ion-color-primary, #0054e9);
+}
+
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -372,6 +376,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -603,6 +620,11 @@ ion-picker {
 
 :host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
+:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }
 
@@ -768,15 +790,23 @@ ion-picker {
 }
 
 .calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-base-rgb), 0.2);
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
   font-size: min(1.375rem, 35.2px);
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
 /**
  * Day that today but not selected
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   color: var(--ion-color-base);
 }
 
@@ -787,16 +817,26 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
-  color: var(--ion-color-base);
+  color: var(--ion-color-primary, #0054e9);
   font-weight: 600;
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-base);
+}
+
 /**
  * Day that is selected and is today
  * should have base background color
  * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }

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

@@ -75,12 +75,6 @@ export class Datetime {
             isAdjacentDay: false,
         };
         this.isTimePopoverOpen = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -1256,7 +1250,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, items.map((item) => (h("ion-picker-column-option", { color: this.color, part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1329,7 +1323,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, days.map((day) => (h("ion-picker-column-option", { color: this.color, part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -1344,7 +1338,7 @@ export class Datetime {
                     this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, months.map((month) => (h("ion-picker-column-option", { color: this.color, part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -1359,7 +1353,7 @@ export class Datetime {
                     this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, years.map((year) => (h("ion-picker-column-option", { color: this.color, part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1392,7 +1386,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, hoursData.map((hour) => (h("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
@@ -1403,7 +1397,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, minutesData.map((minute) => (h("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -1417,7 +1411,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { color: this.color, part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1754,7 +1748,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: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '79b906669d3e0d9ff356421a5f571d5cf12b6793', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1764,7 +1758,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'e29ce6edd79f3efb8f7cc4a81bb543d580e5f4c6', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1806,8 +1800,7 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "name": {
                 "type": "string",

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

@@ -218,6 +218,10 @@
   justify-content: space-between;
 }
 
+:host .datetime-action-buttons ion-button {
+  --color: var(--ion-color-primary, #0054e9);
+}
+
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -372,6 +376,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -548,6 +565,10 @@ ion-picker {
  */
 :host {
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --title-color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) {
   --title-color: var(--ion-color-contrast);
 }
 
@@ -558,10 +579,14 @@ ion-picker {
   padding-inline-end: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
-  background: var(--ion-color-base);
+  background: var(--ion-color-primary, #0054e9);
   color: var(--title-color);
 }
 
+:host(.ion-color) .datetime-header {
+  background: var(--ion-color-base);
+}
+
 :host .datetime-header .datetime-title {
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -643,6 +668,11 @@ ion-picker {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   border: 1px solid var(--ion-color-base);
   color: var(--ion-color-base);
 }
@@ -654,11 +684,22 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active:focus {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-active:focus {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

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

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }
 

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

@@ -23,12 +23,6 @@ export class DatetimeButton {
         this.overlayEl = null;
         this.datetimePresentation = 'date-time';
         this.datetimeActive = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * If `true`, the user cannot interact with the button.
          */
@@ -342,11 +336,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses(color, {
+        return (h(Host, { key: '2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (h("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
+            }) }, dateText && (h("button", { key: 'd9698471fa5d5c834ca73db57f9ed98dfc705b4c', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c8761a7f25ae5b93c953b3486dd6335f5ad4fd53', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '3dd5e97af8d35a2b008de4ab01f690b3c2223135' }))), timeText && (h("button", { key: '1107ca2382940b642b551f885f7ca763012c236c', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5cff53e486923b03715b9ab4dc0947e26f4ea1d9', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '5aac1facb6fc7457307c4f59a241e3a5b31facc8' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
@@ -388,8 +382,7 @@ export class DatetimeButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/datetime-button/datetime-button.md.css

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }
 

package/dist/collection/components/nav/nav.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -9,12 +9,11 @@ import { lifecycle, setPageHidden, transition } from "../../utils/transition/ind
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
-import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
+import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews } from "./view-controller";
 export class Nav {
     constructor() {
         this.transInstr = [];
         this.gestureOrAnimationInProgress = false;
-        this.useRouter = false;
         this.isTransitioning = false;
         this.destroyed = false;
         this.views = [];
@@ -30,7 +29,6 @@ export class Nav {
         }
     }
     rootChanged() {
-        const isDev = Build.isDev;
         if (this.root === undefined) {
             return;
         }
@@ -41,17 +39,9 @@ export class Nav {
              */
             return;
         }
-        if (!this.useRouter) {
-            if (this.root !== undefined) {
-                this.setRoot(this.root, this.rootParams);
-            }
-        }
-        else if (isDev) {
-            printIonWarning('[ion-nav] - A root attribute is not supported when using ion-router.', this.el);
-        }
+        this.setRoot(this.root, this.rootParams);
     }
     componentWillLoad() {
-        this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
         if (this.swipeGesture === undefined) {
             const mode = getIonMode(this);
             this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
@@ -216,78 +206,6 @@ export class Nav {
             opts,
         }, done);
     }
-    /**
-     * Called by the router to update the view.
-     *
-     * @param id The component tag.
-     * @param params The component params.
-     * @param direction A direction hint.
-     * @param animation an AnimationBuilder.
-     *
-     * @return the status.
-     * @internal
-     */
-    setRouteId(id, params, direction, animation) {
-        const active = this.getActiveSync();
-        if (matches(active, id, params)) {
-            return Promise.resolve({
-                changed: false,
-                element: active.element,
-            });
-        }
-        let resolve;
-        const promise = new Promise((r) => (resolve = r));
-        let finish;
-        const commonOpts = {
-            updateURL: false,
-            viewIsReady: (enteringEl) => {
-                let mark;
-                const p = new Promise((r) => (mark = r));
-                resolve({
-                    changed: true,
-                    element: enteringEl,
-                    markVisible: async () => {
-                        mark();
-                        await finish;
-                    },
-                });
-                return p;
-            },
-        };
-        if (direction === 'root') {
-            finish = this.setRoot(id, params, commonOpts);
-        }
-        else {
-            // Look for a view matching the target in the view stack.
-            const viewController = this.views.find((v) => matches(v, id, params));
-            if (viewController) {
-                finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
-            }
-            else if (direction === 'forward') {
-                finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
-            }
-            else if (direction === 'back') {
-                finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
-            }
-        }
-        return promise;
-    }
-    /**
-     * Called by <ion-router> to retrieve the current component.
-     *
-     * @internal
-     */
-    async getRouteId() {
-        const active = this.getActiveSync();
-        if (active) {
-            return {
-                id: active.element.tagName,
-                params: active.params,
-                element: active.element,
-            };
-        }
-        return undefined;
-    }
     /**
      * Get the active view.
      */
@@ -353,25 +271,6 @@ export class Nav {
             ti.reject = reject;
         });
         ti.done = done;
-        /**
-         * If using router, check to see if navigation hooks
-         * will allow us to perform this transition. This
-         * is required in order for hooks to work with
-         * the ion-back-button or swipe to go back.
-         */
-        if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                const canTransition = await router.canTransition();
-                if (canTransition === false) {
-                    return false;
-                }
-                if (typeof canTransition === 'string') {
-                    router.push(canTransition, ti.opts.direction || 'back');
-                    return false;
-                }
-            }
-        }
         // Normalize empty
         if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             ti.insertViews = undefined;
@@ -392,13 +291,6 @@ export class Nav {
             ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
         }
         ti.resolve(result.hasCompleted);
-        if (ti.opts.updateURL !== false && this.useRouter) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                const direction = result.direction === 'back' ? 'back' : 'forward';
-                router.navChanged(direction);
-            }
-        }
     }
     failed(rejectReason, ti) {
         if (this.destroyed) {
@@ -828,7 +720,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
+        return h("slot", { key: 'bb4a201a3a8079548f5474ff42293b28fc7599fb' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -1601,113 +1493,6 @@ export class Nav {
                         }]
                 }
             },
-            "setRouteId": {
-                "complexType": {
-                    "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
-                    "parameters": [{
-                            "name": "id",
-                            "type": "string",
-                            "docs": "The component tag."
-                        }, {
-                            "name": "params",
-                            "type": "ComponentProps | undefined",
-                            "docs": "The component params."
-                        }, {
-                            "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
-                            "docs": "A direction hint."
-                        }, {
-                            "name": "animation",
-                            "type": "AnimationBuilder | undefined",
-                            "docs": "an AnimationBuilder."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "RouteWrite": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouteWrite",
-                            "referenceLocation": "RouteWrite"
-                        },
-                        "ComponentProps": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentProps",
-                            "referenceLocation": "ComponentProps"
-                        },
-                        "RouterDirection": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouterDirection",
-                            "referenceLocation": "RouterDirection"
-                        },
-                        "AnimationBuilder": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder",
-                            "referenceLocation": "AnimationBuilder"
-                        },
-                        "NavOptions": {
-                            "location": "import",
-                            "path": "./nav-interface",
-                            "id": "src/components/nav/nav-interface.ts::NavOptions",
-                            "referenceLocation": "NavOptions"
-                        }
-                    },
-                    "return": "Promise<RouteWrite>"
-                },
-                "docs": {
-                    "text": "Called by the router to update the view.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "id The component tag."
-                        }, {
-                            "name": "param",
-                            "text": "params The component params."
-                        }, {
-                            "name": "param",
-                            "text": "direction A direction hint."
-                        }, {
-                            "name": "param",
-                            "text": "animation an AnimationBuilder."
-                        }, {
-                            "name": "return",
-                            "text": "the status."
-                        }, {
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getRouteId": {
-                "complexType": {
-                    "signature": "() => Promise<RouteID | undefined>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "RouteID": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouteID",
-                            "referenceLocation": "RouteID"
-                        }
-                    },
-                    "return": "Promise<RouteID | undefined>"
-                },
-                "docs": {
-                    "text": "Called by <ion-router> to retrieve the current component.",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
             "getActive": {
                 "complexType": {
                     "signature": "() => Promise<ViewController | undefined>",