@ionic/core 8.2.2-dev.11717790867.100c8d5e → 8.2.2-dev.11717796763.1aa87d5c

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import ghostDuotone from "@phosphor-icons/core/assets/duotone/ghost-duotone.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -41,17 +42,21 @@ export class BackButton {
         }
     }
     get backButtonIcon() {
-        const icon = this.icon;
-        if (icon != null) {
-            // Icon is set on the component or by the config.
-            return icon;
+        // Return the icon if it is explicitly set
+        if (this.icon) {
+            return this.icon;
         }
-        if (getIonTheme(this) === 'ios') {
-            // default ios back button icon
-            return config.get('backButtonIcon', chevronBack);
-        }
-        // default md back button icon
-        return config.get('backButtonIcon', arrowBackSharp);
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronBack,
+            ionic: ghostDuotone,
+            md: arrowBackSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured back button icon or the default icon
+        return config.get('backButtonIcon', defaultIcon);
     }
     get backButtonText() {
         const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
@@ -73,7 +78,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '2a5ed71efffb6cad9e0d2182cfa77f291a6e044b', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '2312557fad91c04bc77bc79feb55dc83e7820429', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -83,7 +88,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: 'e380bfec2ce8c6bf8da3029183a2533d15c67393', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '7e9092d5ef0761488d573ded9bf5fee893400c7d', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '35e43b83a2776f2339700850f2b28ccb81dbc8bf', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '8a448be4ee9074d973ab1eafab3e423f86a0cb0d', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '9ed811f7cb7fb1111b1242a6156582acceea4b98', type: this.rippleType }))));
+            }) }, h("button", { key: '309ba8ef79ac364a065a69aa9df9980b0acc9ce0', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'c1aabce609fd6a6d4474bd2a76a011c461b5f5f8', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'f372b3d13faaa5c2e2f5b1a6c4468c708176cf27', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '4cfa2579dbb36b85cfd30a17ab2c93fdeef621dc', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '1a18479d6c3130cf19188f1422639f953724c913', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.ionic.css

@@ -4,32 +4,6 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-/**
- * 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 font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -63,18 +37,49 @@
  * @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;
+ *   }
+ * }
+ */
 :host {
-  --border-width: var(--ionic-border-size-025, 1px);
-  --border-style: var(--ionic-border-style-solid, solid);
-  --border-color: var(--ionic-color-neutral-800, #626262);
-  --checkmark-width: 3;
-  --focus-ring-color: var(--ionic-state-focus-1, #9ec4fd);
-  --focus-ring-width: var(--ionic-border-size-050, 2px);
-  --focus-ring-offset: var(--ionic-space-050, 2px);
-  --size: var(--ionic-scale-600, 24px);
-  --checkbox-background-checked: var(--ionic-color-primary-base, #105cef);
-  --border-color-checked: var(--ionic-color-primary-base, #105cef);
-  --checkmark-color: var(--ionic-color-base-white, #ffffff);
+  /**
+   * @prop --size: Size of the checkbox icon
+   *
+   * @prop --checkbox-background: Background of the checkbox icon
+   * @prop --checkbox-background-checked: Background of the checkbox icon when checked
+   *
+   * @prop --border-color: Border color of the checkbox icon
+   * @prop --border-radius: Border radius of the checkbox icon
+   * @prop --border-width: Border width of the checkbox icon
+   * @prop --border-style: Border style of the checkbox icon
+   * @prop --border-color-checked: Border color of the checkbox icon when checked
+   *
+   * @prop --transition: Transition of the checkbox icon
+   *
+   * @prop --checkmark-color: Color of the checkbox checkmark when checked
+   * @prop --checkmark-width: Stroke width of the checkbox checkmark
+   */
+  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
+  --border-color-checked: var(--ion-color-primary, #0054e9);
+  --checkmark-color: var(--ion-color-primary-contrast, #fff);
   --transition: none;
   display: inline-block;
   position: relative;
@@ -82,21 +87,6 @@
   user-select: none;
   z-index: 2;
 }
-:host::after {
-  right: 0;
-  left: 0;
-  top: 50%;
-  position: absolute;
-  height: 100%;
-  min-height: var(--ionic-scale-1200, 48px);
-  transform: translateY(-50%);
-  content: "";
-  cursor: pointer;
-  z-index: 1;
-}
-:host .native-wrapper {
-  position: relative;
-}
 
 :host(.in-item) {
   flex: 1 1 0;
@@ -116,6 +106,12 @@
   width: auto;
 }
 
+:host(.ion-color) {
+  --checkbox-background-checked: var(--ion-color-base);
+  --border-color-checked: var(--ion-color-base);
+  --checkmark-color: var(--ion-color-contrast);
+}
+
 .checkbox-wrapper {
   display: flex;
   flex-grow: 1;
@@ -131,17 +127,17 @@
 }
 
 :host(.in-item) .label-text-wrapper {
-  margin-top: var(--ionic-space-250, 10px);
-  margin-bottom: var(--ionic-space-250, 10px);
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  margin-top: var(--ionic-space-250, 10px);
-  margin-bottom: var(--ionic-space-400, 16px);
+  margin-top: 10px;
+  margin-bottom: 16px;
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--ionic-space-250, 10px);
+  margin-bottom: 10px;
 }
 
 /**
@@ -233,8 +229,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ionic-space-400, 16px);
-  margin-inline-end: var(--ionic-space-400, 16px);
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
 }
 
 /**
@@ -251,8 +247,8 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: var(--ionic-space-400, 16px);
-  margin-inline-start: var(--ionic-space-400, 16px);
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
@@ -265,8 +261,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ionic-space-400, 16px);
-  margin-inline-end: var(--ionic-space-400, 16px);
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
 }
 
 /**
@@ -296,16 +292,38 @@ input {
    */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: var(--ionic-space-400, 16px);
+  margin-bottom: 16px;
   /**
    * Label text should not extend
    * beyond the bounds of the checkbox.
    */
-  max-width: 133.3333333333%;
+  max-width: calc(100% / 0.75);
 }
 
-:host(.checkbox-size-small) {
-  --size: var(--ionic-scale-400, 16px);
+:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
 }
 
 :host(.checkbox-checked) .checkbox-icon,
@@ -319,68 +337,162 @@ input {
   opacity: 1;
 }
 
-:host(.ion-invalid) {
-  --focus-ring-color: var(--ionic-state-focus-2, #ffafaf);
+:host(.checkbox-disabled) {
+  pointer-events: none;
 }
-:host(.ion-invalid) .checkbox-icon {
-  border-color: var(--ionic-color-danger-800, #bf2222);
+
+/**
+ * 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;
+ *   }
+ * }
+ */
+/* Rectangular */
+:host {
+  --border-radius: calc(var(--size) / 4 - 2px);
+  --border-width: 1px;
+  --border-style: solid;
+  --border-color: var(--ion-color-step-400, var(--ion-background-color-step-400, #999999));
+  --checkmark-width: 3;
+  --focus-ring-color: #9ec4fd;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --size: 24px;
+}
+:host::after {
+  right: 0;
+  left: 0;
+  top: 50%;
+  position: absolute;
+  height: 100%;
+  min-height: 48px;
+  transform: translateY(-50%);
+  content: "";
+  cursor: pointer;
+  z-index: 1;
+}
+:host .native-wrapper {
+  position: relative;
 }
 
-:host(.checkbox-disabled) {
-  pointer-events: none;
+:host(.checkbox-size-small) {
+  --size: 16px;
+}
+
+:host(.ion-invalid) {
+  --focus-ring-color: #ffafaf;
+}
+:host(.ion-invalid) .checkbox-icon {
+  border-color: #f72c2c;
 }
 
 :host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  border-width: var(--ionic-border-size-0, 0px);
-  background-color: var(--ionic-color-base-white, #ffffff);
+  /* TODO(FW-6183): Use design token variables */
+  border-width: 0;
+  background-color: var(--ion-color-step-600, var(--ion-background-color-step-600, #666666));
 }
 
 :host(.checkbox-disabled) .checkbox-icon {
-  border-color: var(--ionic-color-neutral-800, #626262);
-  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
+  /* TODO(FW-6183): Use design token variables */
+  border-color: #c9c9c9;
+  background-color: #f5f5f5;
 }
 
 :host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
-  border-width: var(--ionic-border-size-0, 0px);
-  background-color: var(--ionic-color-primary-base, #105cef);
-  opacity: 0.6;
+  border-width: 0;
+  background-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 @media (any-hover: hover) {
   :host(:hover) .checkbox-icon {
-    background-color: var(--ionic-color-neutral-100, #f1f1f1);
+    /* TODO(FW-6183): Use design token variables */
+    background-color: #ececec;
   }
   :host(:hover.checkbox-checked) .checkbox-icon,
   :host(:hover.checkbox-indeterminate) .checkbox-icon {
-    background-color: var(--ionic-color-primary-800, #0f54da);
+    /* TODO(FW-6183): Use design token variables */
+    background-color: #1061da;
   }
 }
 :host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon {
-  outline: var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
   outline-offset: var(--focus-ring-offset);
 }
 
 :host(.ion-activated) .checkbox-icon {
-  background-color: var(--ionic-color-neutral-200, #e7e7e7);
+  /* TODO(FW-6183): Use design token variables */
+  background-color: #e3e3e3;
 }
 
 :host(.ion-activated.checkbox-checked) .checkbox-icon,
 :host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  background-color: var(--ionic-color-primary-900, #0d4bc3);
+  /* TODO(FW-6183): Use design token variables */
+  background-color: #105ed1;
 }
 
 :host(.checkbox-shape-soft) {
-  --border-radius: var(--ionic-border-radius-100, 4px);
-}
-
-:host(.checkbox-size-small.checkbox-shape-soft) {
-  --border-radius: var(--ionic-border-radius-050, 2px);
+  --border-radius: calc(var(--size) / 4 - 2px);
 }
 
 :host(.checkbox-shape-rectangular) {
-  --border-radius: var(--ionic-border-radius-0, 0px);
+  --border-radius: 0;
 }
 
 .checkbox-wrapper {
-  min-height: var(--ionic-scale-1200, 48px);
+  min-height: 48px;
 }

package/dist/collection/components/input/input.js

@@ -569,7 +569,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+                    "resolved": "\"name\" | \"email\" | \"country\" | \"on\" | \"off\" | \"tel\" | \"url\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",

package/dist/collection/components/item/item.ionic.css

@@ -66,7 +66,6 @@
 :host {
   /**
     * @prop --background: Background of the item
-    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
     *
     * @prop --border-color: Color of the item border
     * @prop --border-style: Style of the item border
@@ -81,7 +80,6 @@
     *
     */
   --background: var(--ionic-color-base-white, #ffffff);
-  --background-activated: var(--ionic-color-neutral-200, #e7e7e7);
   --border-color: var(--ionic-color-neutral-300, #cfcfcf);
   --border-style: var(--ionic-border-style-solid, solid);
   --border-width: var(--ionic-border-size-025, 1px);
@@ -136,34 +134,4 @@
   flex: 1;
   overflow: inherit;
   box-sizing: border-box;
-}
-
-:host(.item-disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-:host(.item-disabled)::after {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  background: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
-  content: "";
-}
-
-:host(.ion-activated) .item-native {
-  background: var(--background-activated);
-}
-
-:host(.ion-focused) .item-native::after {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  border-width: var(--ionic-border-size-050, 2px);
-  border-style: var(--ionic-border-style-solid, solid);
-  border-color: var(--ionic-state-focus-1, #9ec4fd);
-  content: "";
 }

package/dist/collection/components/item/test/disabled/item.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
  */
-configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('item: disabled state'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/item/test/disabled`, config);

package/dist/collection/components/item/test/states/item.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
  */
-configs({ modes: ['ionic-md', 'ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('item: states'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/item/test/states`, config);

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

@@ -1576,7 +1576,7 @@ export class Nav {
                             "docs": "The component params."
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": "A direction hint."
                         }, {
                             "name": "animation",

package/dist/collection/components/router/router.js

@@ -387,7 +387,7 @@ export class Router {
                             "docs": "The path to navigate to."
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": "The direction of the animation. Defaults to `\"forward\"`."
                         }, {
                             "name": "animation",
@@ -465,7 +465,7 @@ export class Router {
                     "signature": "(direction: RouterDirection) => Promise<boolean>",
                     "parameters": [{
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/router-outlet/router-outlet.js

@@ -421,7 +421,7 @@ export class RouterOutlet {
                             "docs": ""
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": ""
                         }, {
                             "name": "animation",