voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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

@@ -122,33 +122,10 @@
   height: var(--knob-handle-size);
   text-align: center;
 }
-@supports (inset-inline-start: 0) {
-  .range-knob-handle {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-knob-handle {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .range-knob-handle {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .range-knob-handle {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-knob-handle:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.range-knob-handle {
+  inset-inline-start: 0;
 }
+
 :host-context([dir=rtl]) .range-knob-handle {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -176,33 +153,10 @@
   width: 100%;
   height: var(--bar-height);
 }
-@supports (inset-inline-start: 0) {
-  .range-bar-container {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-bar-container {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .range-bar-container {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .range-bar-container {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-bar-container:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.range-bar-container {
+  inset-inline-start: 0;
 }
+
 :host-context([dir=rtl]) .range-bar-container {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -240,33 +194,10 @@
   z-index: 2;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .range-knob {
-    inset-inline-start: calc(50% - var(--knob-size) / 2);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-knob {
-    left: calc(50% - var(--knob-size) / 2);
-  }
-  :host-context([dir=rtl]) .range-knob {
-    left: unset;
-    right: unset;
-    right: calc(50% - var(--knob-size) / 2);
-  }
-  [dir=rtl] .range-knob {
-    left: unset;
-    right: unset;
-    right: calc(50% - var(--knob-size) / 2);
-  }
-  @supports selector(:dir(rtl)) {
-    .range-knob:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% - var(--knob-size) / 2);
-    }
-  }
+.range-knob {
+  inset-inline-start: calc(50% - var(--knob-size) / 2);
 }
+
 :host-context([dir=rtl]) .range-knob {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -523,31 +454,17 @@
   --knob-box-shadow: none;
   --knob-size: 18px;
   --bar-height: 2px;
-  --bar-background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);
-  --bar-background-active: var(--ion-color-primary, #3880ff);
+  --bar-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);
+  --bar-background-active: var(--ion-color-primary, #0054e9);
   --bar-border-radius: 0;
   --height: 42px;
-  --pin-background: var(--ion-color-primary, #3880ff);
+  --pin-background: var(--ion-color-primary, #0054e9);
   --pin-color: var(--ion-color-primary-contrast, #fff);
 }
 
-:host(.legacy-range) ::slotted([slot=label]) {
-  font-size: initial;
-}
-
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=start]),
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=end]),
-:host(:not(.legacy-range)) .native-wrapper {
-  font-size: 0.75rem;
-}
-
-:host(.legacy-range) {
-  -webkit-padding-start: 14px;
-  padding-inline-start: 14px;
-  -webkit-padding-end: 14px;
-  padding-inline-end: 14px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+::slotted(:not(ion-icon)[slot=start]),
+::slotted(:not(ion-icon)[slot=end]),
+.native-wrapper {
   font-size: 0.75rem;
 }
 
@@ -643,32 +560,8 @@
   opacity: 0.13;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .range-knob::before {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-knob::before {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .range-knob::before {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .range-knob::before {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-knob::before:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.range-knob::before {
+  inset-inline-start: 0;
 }
 
 .range-tick {
@@ -725,33 +618,10 @@
   content: "";
   z-index: -1;
 }
-@supports (inset-inline-start: 0) {
-  .range-pin::before {
-    inset-inline-start: 50%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-pin::before {
-    left: 50%;
-  }
-  :host-context([dir=rtl]) .range-pin::before {
-    left: unset;
-    right: unset;
-    right: 50%;
-  }
-  [dir=rtl] .range-pin::before {
-    left: unset;
-    right: unset;
-    right: 50%;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-pin::before:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 50%;
-    }
-  }
+.range-pin::before {
+  inset-inline-start: 50%;
 }
+
 :host-context([dir=rtl]) .range-pin::before {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -803,13 +673,13 @@
 :host(.range-disabled) .range-bar-active,
 :host(.range-disabled) .range-bar,
 :host(.range-disabled) .range-tick {
-  background-color: var(--ion-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
 }
 
 :host(.range-disabled) .range-knob {
   transform: scale(0.55);
   outline: 5px solid #fff;
-  background-color: var(--ion-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
 }
 
 :host(.range-disabled) .label-text-wrapper,

package/dist/collection/components/range/test/a11y/range.e2e.js

@@ -4,22 +4,32 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('range: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/range/test/a11y`, config);
-            /**
-             * Axe does not take <slot> elements into account
-             * when checking color-contrast. As a result, it will
-             * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+            await page.setContent(`
+        <main>
+          <ion-range value="50"><span slot="label">my label</span></ion-range>
+          <ion-range label="my label"></ion-range>
+          <ion-range aria-label="my aria label"></ion-range>
+          <ion-range>
+            <span slot="label">temperature</span>
+            <ion-icon name="snow" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="flame" slot="end" aria-hidden="true"></ion-icon>
+          </ion-range>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
+    });
+});
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('range: a11y'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.setContent(`<ion-app>
           <ion-content>
-            <ion-range min="0" max="100" value="80" legacy="true"></ion-range>
+            <ion-range min="0" max="100" value="80" aria-label="Range"></ion-range>
           </ion-content>
         </ion-app>
           `, config);
@@ -43,7 +53,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         test('should not have visual regressions', async ({ page }) => {
             await page.setContent(`<ion-app>
           <ion-content>
-            <ion-range min="0" max="100" value="50" pin="true" legacy="true"></ion-range>
+            <ion-range min="0" max="100" value="50" pin="true" aria-label="Range"></ion-range>
           </ion-content>
         </ion-app>
         `, config);

package/dist/collection/components/range/test/range-events.e2e.js

@@ -57,7 +57,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             // TODO FW-2873
             test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => {
                 skip.browser('webkit', 'mouse.wheel is not available in WebKit');
-                await page.goto(`/src/components/range/test/legacy/basic`, config);
+                await page.goto(`/src/components/range/test/basic`, config);
                 const knobEl = page.locator('ion-range#stacked-range .range-knob-handle');
                 const scrollEl = page.locator('ion-content .inner-scroll');
                 expect(await scrollEl.evaluate((el) => el.scrollTop)).toEqual(0);

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

@@ -164,18 +164,6 @@ describe('range: item adjustments', () => {
         expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
         expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
     });
-    // TODO FW-2997 remove this
-    it('should not add adjustment with legacy syntax', async () => {
-        const page = await newSpecPage({
-            components: [Item, Range],
-            html: `
-        <ion-range legacy="true"></ion-range>
-      `,
-        });
-        const range = page.body.querySelector('ion-range');
-        expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
-        expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
-    });
     it('should not add start adjustment when with start adornment', async () => {
         const page = await newSpecPage({
             components: [Item, Range],

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

@@ -62,33 +62,10 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-@supports (inset-inline-start: 0) {
-  ion-refresher {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ion-refresher {
-    left: 0;
-  }
-  :host-context([dir=rtl]) ion-refresher {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] ion-refresher {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    ion-refresher:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+ion-refresher {
+  inset-inline-start: 0;
 }
+
 ion-refresher.refresher-active {
   display: block;
 }
@@ -274,7 +251,7 @@ ion-refresher.refresher-native ion-spinner {
 .refresher-native ion-spinner {
   width: 32px;
   height: 32px;
-  color: var(--ion-color-step-450, #747577);
+  color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
 }
 
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,

package/dist/collection/components/refresher/refresher.js

@@ -594,7 +594,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (h(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -62,33 +62,10 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-@supports (inset-inline-start: 0) {
-  ion-refresher {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ion-refresher {
-    left: 0;
-  }
-  :host-context([dir=rtl]) ion-refresher {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] ion-refresher {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    ion-refresher:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+ion-refresher {
+  inset-inline-start: 0;
 }
+
 ion-refresher.refresher-active {
   display: block;
 }
@@ -260,7 +237,7 @@ ion-refresher.refresher-native ion-spinner {
   margin-bottom: 0;
   width: 24px;
   height: 24px;
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 ion-refresher.refresher-native .spinner-arrow-container {
   display: inherit;
@@ -282,7 +259,7 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   right: 0;
   bottom: -4px;
   position: absolute;
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
   font-size: 12px;
 }
 ion-refresher.refresher-native.refresher-pulling ion-refresher-content .refresher-pulling, ion-refresher.refresher-native.refresher-ready ion-refresher-content .refresher-pulling {
@@ -310,7 +287,7 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  border: 1px solid var(--ion-color-step-200, #ececec);
-  background: var(--ion-color-step-250, #ffffff);
+  border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));
+  background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
 }

package/dist/collection/components/refresher/test/a11y/refresher.e2e.js

@@ -0,0 +1,26 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    test.describe(title('refresher: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-content>
+          <ion-refresher class="refresher-native" slot="fixed">
+            <ion-refresher-content></ion-refresher-content>
+          </ion-refresher>
+        </ion-content>
+      `, config);
+            const target = page.locator('body');
+            const refresher = await page.locator('ion-refresher');
+            await dragElementBy(target, page, 0, 320, undefined, undefined, false);
+            await expect(refresher).toHaveClass(/refresher-pulling/);
+            // TODO(FW-5937): Remove the disableRules once the ticket is resolved.
+            const results = await new AxeBuilder({ page }).disableRules('aria-progressbar-name').analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

package/dist/collection/components/refresher-content/refresher-content.js

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '537e4d601fd09804d072e9fed9b2c6ba8d890548', class: mode }, h("div", { key: '67f46df746f7da2fc60c47da9216a2920c25166f', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '216f96af452e1567df7906c4d9e6fbf8c397ad21', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, h("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '402b0e02cfee42358c4fd690b60c8eb39386569f', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

package/dist/collection/components/reorder/reorder.js

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'e625707b1810f93f5c667e38b8e2904988a3cff0', class: mode }, h("slot", { key: 'fd0c3167e8a7955a6f841b338345de0528535ff5' }, h("ion-icon", { key: '3fc7bb1adb0dde839ec4898361e359c640e81067', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, h("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, h("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -238,7 +238,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '067b8ff26887c4e458163f70f7308723c90a53f8', class: {
+        return (h(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -59,7 +59,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a9ff1956627908ee4071002ca018eaa80f87cd59', role: "presentation", class: {
+        return (h(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/router-link/router-link.css

@@ -59,7 +59,7 @@
    * @prop --color: Text color of the router link
    */
   --background: transparent;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
   background: var(--background);
   color: var(--color);
 }

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

@@ -23,10 +23,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '9944573e56abecc47afd2df03b386e38fc7ed2f3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '383de10c02eb9ab87e27890548ef681dccf2a765' }, attrs), h("slot", { key: '584a5a52e2b116f3827596cc5869a3557d6bcb6b' }))));
+            }) }, h("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), h("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-link/test/a11y/router-link.e2e.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('router-link: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+          <main>
+            <ion-router-link href="#">Router Link</ion-router-link>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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

@@ -178,7 +178,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '5e31ebd99536453783f5b6f9119d7fa2bf8a5aad' });
+        return h("slot", { key: '94fc9ea2d94548a7b4703498b9d740a0cf9b43a0' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: getIonMode(this) }, h("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (h(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }