@ionic/core 8.3.4-dev.11730140347.1a5a7bee → 8.3.4-dev.11730315987.18af6259

package/dist/collection/components/{segment/segment.ionic.css → select-modal/select-modal.md.css}

@@ -1,12 +1,7 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/*
-Do not edit directly, this file was auto-generated.
-*/
+:host {
+  height: 100%;
+}
+
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -84,35 +79,32 @@ Do not edit directly, this file was auto-generated.
  *   }
  * }
  */
-:host {
-  /**
-   * @prop --background: Background of the segment button
-   */
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: grid;
-  grid-auto-columns: 1fr;
-  position: relative;
-  align-items: stretch;
-  justify-content: center;
-  width: 100%;
-  background: var(--background);
-  text-align: center;
-  contain: paint;
-  user-select: none;
+ion-list ion-radio::part(container) {
+  display: none;
 }
 
-:host(.segment-scrollable) {
-  justify-content: start;
-  width: auto;
-  overflow-x: auto;
-  grid-auto-columns: minmax(min-content, 1fr);
+ion-list ion-radio::part(label) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-:host(.segment-scrollable::-webkit-scrollbar) {
-  display: none;
+ion-item {
+  --inner-border-width: 0;
 }
 
-:host {
-  --background: var(--ion-primitives-base-white, #ffffff);
+.item-radio-checked {
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-focused-opacity: 0.2;
+  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover-opacity: 0.12;
+}
+
+.item-checkbox-checked {
+  --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
+  --color: var(--ion-color-primary, #0054e9);
 }

package/dist/collection/components/select-modal/test/fixtures.js

@@ -0,0 +1,48 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+export class SelectModalPage {
+    constructor(page) {
+        this.options = [];
+        this.page = page;
+    }
+    async setup(config, options, multiple = false) {
+        const { page } = this;
+        await page.setContent(`
+    <ion-modal>
+      <ion-select-modal></ion-select-modal>
+    </ion-modal>
+    <script>
+      const selectModal = document.querySelector('ion-select-modal');
+      selectModal.options = ${JSON.stringify(options)};
+      selectModal.multiple = ${multiple};
+    </script>
+    `, config);
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        this.modal = page.locator('ion-modal');
+        this.selectModal = page.locator('ion-select-modal');
+        this.multiple = multiple;
+        this.options = options;
+        await this.modal.evaluate((modal) => modal.present());
+        await ionModalDidPresent.next();
+    }
+    async screenshot(screenshot, name) {
+        await expect(this.selectModal).toHaveScreenshot(screenshot(name));
+    }
+    async clickOption(value) {
+        const option = this.getOption(value);
+        await option.click();
+    }
+    async pressSpaceOnOption(value) {
+        const option = this.getOption(value);
+        await option.press('Space');
+    }
+    getOption(value) {
+        const { multiple, selectModal } = this;
+        const selector = multiple ? 'ion-checkbox' : 'ion-radio';
+        const index = this.options.findIndex((o) => o.value === value);
+        return selectModal.locator(selector).nth(index);
+    }
+}

package/dist/collection/components/select-option/select-option.js

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SelectOption {
     constructor() {
         this.inputId = `ion-selopt-${selectOptionIds++}`;
@@ -14,10 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '1a977b2d7953ecbddf216c5b68d47104dda07bce', class: {
-                [theme]: true,
-            }, role: "option", id: this.inputId }));
+        return h(Host, { key: 'b874cf2085770674ea56ce978c1e7c55d002b266', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-popover/select-popover.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,12 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * 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
@@ -145,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/select-popover/select-popover.js

@@ -4,11 +4,8 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @internal
  */
 export class SelectPopover {
@@ -105,25 +102,20 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '6ac9472c819c6631cd64ad8810256dd03fde120b', class: {
-                [theme]: true,
-            } }, h("ion-list", { key: 'b485896c38c080bc42f92e962440cd3b8308e728' }, header !== undefined && h("ion-list-header", { key: '6a1df70265a4b9feec9521d5f946994345456925' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c4ecbcaa2c56c1cb900e039cbfe36c2fae03f2ac' }, h("ion-label", { key: 'e310d3445c6abfffb4ff00a1aec97dd09c94e1d3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '9a6ffdfd9df8aea92290caf317d855b262ac8998' }, subHeader), message !== undefined && h("p", { key: 'b5ca3c716d69e6a2c013df3fa3436b92953c4296' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '8baf834489a89d2e65554eb4241fe389a525f85c', class: getIonMode(this) }, h("ion-list", { key: '2646cd1047a308c4cbb89c3a936f9a13c307221b' }, header !== undefined && h("ion-list-header", { key: 'aec9975d382f9e97eb5b7bd036fbd08f645f6462' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'd9e3298ba2c289fdef7624e2cbddc247061d4d75' }, h("ion-label", { key: '6f068afe5db73092638dff9d1d3f60cefd1d2599', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '4403c78b13c3e861d199f4e75cca2876cb058267' }, subHeader), message !== undefined && h("p", { key: '6af680fd7ed7bf0c04baa63e7e9bc44ad2d7a057' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select-popover.ios.scss"],
-            "md": ["select-popover.md.scss"],
-            "ionic": ["select-popover.md.scss"]
+            "md": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"],
-            "ionic": ["select-popover.md.css"]
+            "md": ["select-popover.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/select-popover/select-popover.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,12 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * 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
@@ -145,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/skeleton-text/skeleton-text.css

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

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -4,11 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SkeletonText {
     constructor() {
         this.animated = false;
@@ -28,12 +24,12 @@ export class SkeletonText {
     render() {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '20170a23455836848210459749d9ba6a6eaaff53', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '8a822ebe9b4e097bdb22765b3becc2949ebefbfb', class: {
+                [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '96a9a18da286285abb647e7b69a4832cbe59b3b8' }, "\u00A0")));
+            } }, h("span", { key: '6d85ce8c7561af1cfd5145c7224d08352d271a1c' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/{spinner.ionic.css → spinner.css}

@@ -1,34 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/*
-Do not edit directly, this file was auto-generated.
-*/
-/**
- * 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
@@ -260,37 +229,4 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
-}
-:host {
-  --color: var(--ion-primitives-neutral-800, #626262);
-}
-
-/* Extra Small */
-:host(.spinner-xsmall) {
-  width: var(--ion-scale-600, 24px);
-  height: var(--ion-scale-600, 24px);
-}
-
-/* Small */
-:host(.spinner-small) {
-  width: var(--ion-scale-800, 32px);
-  height: var(--ion-scale-800, 32px);
-}
-
-/* Medium */
-:host(.spinner-medium) {
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
-}
-
-/* Large */
-:host(.spinner-large) {
-  width: var(--ion-scale-1200, 48px);
-  height: var(--ion-scale-1200, 48px);
-}
-
-/* Extra Large */
-:host(.spinner-xlarge) {
-  width: var(--ion-scale-1400, 56px);
-  height: var(--ion-scale-1400, 56px);
 }

package/dist/collection/components/spinner/spinner.js

@@ -4,19 +4,14 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme, getIonMode } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Spinner {
     constructor() {
         this.color = undefined;
         this.duration = undefined;
         this.name = undefined;
         this.paused = false;
-        this.size = undefined;
     }
     getName() {
         const spinnerName = this.name || config.get('spinner');
@@ -26,24 +21,11 @@ export class Spinner {
         }
         return mode === 'ios' ? 'lines' : 'circular';
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'xsmall';
-        }
-        return size;
-    }
     render() {
         var _a;
         const self = this;
-        const theme = getIonTheme(self);
+        const mode = getIonMode(self);
         const spinnerName = self.getName();
-        const size = this.getSize();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
         const svgs = [];
@@ -57,27 +39,22 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '49fd776ff3793a76b111c1f0e0fc0755d1d28d6c', class: createColorClasses(self.color, {
-                [theme]: true,
+        return (h(Host, { key: '1313eca457d022d1e5aed560b03d7f2c9eba31d3', class: createColorClasses(self.color, {
+                [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
-                [`spinner-${size}`]: size !== undefined,
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
     }
     static get is() { return "ion-spinner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["spinner.common.scss"],
-            "md": ["spinner.common.scss"],
-            "ionic": ["spinner.ionic.scss"]
+            "$": ["spinner.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["spinner.common.css"],
-            "md": ["spinner.common.css"],
-            "ionic": ["spinner.ionic.css"]
+            "$": ["spinner.css"]
         };
     }
     static get properties() {
@@ -162,23 +139,6 @@ export class Spinner {
                 "attribute": "paused",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"xsmall\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "attribute": "size",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -128,8 +116,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -140,8 +128,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -163,12 +151,6 @@
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/split-pane/split-pane.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -14,10 +14,6 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class SplitPane {
     constructor() {
         this.visible = false;
@@ -121,28 +117,26 @@ export class SplitPane {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'f2090ca1bf3210b4ba6e20adafbc6f5839704cdd', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '4b1685044b3a9a80e001a543d8c854450c4d54d2', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`split-pane-${theme}`]: true,
+                [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '3ecadb0aa95e4b7799b34122afe25d028bba8710' })));
+            } }, h("slot", { key: '4c3403788443770b356d671aeadabcf831623f46' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"],
-            "ionic": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"],
-            "ionic": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -128,8 +116,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -140,8 +128,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -163,12 +151,6 @@
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/tab/tab.js

@@ -3,10 +3,6 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Tab {
     constructor() {
         this.loaded = false;
@@ -52,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '91a0d6e7f70446804044b06eaf22e6fe0eb14510', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'efde265064f6ef0080adf7a62d7364988900304c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '6bb7036c2a8a149212b5afdc0a34c6131efd1aee' })));
+            } }, h("slot", { key: 'e66fc4de857ffb7a78686bf41ecaae81f7b86cdb' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }