@ionic/core 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb

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

@@ -1,167 +1,3 @@
-/**
- * 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
- * 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.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
- */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-end > ion-avatar {
-  width: 40px;
-  height: 40px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  font-size: 24px;
-}
-
-.select-option-start > ion-img,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-start > ion-thumbnail,
-.select-option-end > ion-img,
-.select-option-end > img,
-.select-option-end > svg,
-.select-option-end > ion-thumbnail {
-  width: 56px;
-  height: 56px;
-}
-
-.select-option-start > video,
-.select-option-end > video {
-  width: 114px;
-  height: 56px;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -3,15 +3,8 @@
  */
 import { expect } from "@playwright/test";
 export class SelectPopoverPage {
-    page;
-    multiple;
-    options = [];
-    // Locators
-    popover;
-    selectPopover;
-    // Event spies
-    ionPopoverDidDismiss;
     constructor(page) {
+        this.options = [];
         this.page = page;
     }
     async setup(config, options, multiple = false) {

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

@@ -6,16 +6,12 @@ import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class SkeletonText {
-    el;
-    /**
-     * If `true`, the skeleton text will animate.
-     */
-    animated = false;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
+    constructor() {
+        /**
+         * If `true`, the skeleton text will animate.
+         */
+        this.animated = false;
+    }
     componentWillLoad() {
         this.emitStyle();
     }
@@ -32,11 +28,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '887d958d982345ce610730ab5c9ae35010430f75', class: {
+        return (h(Host, { key: 'cb8da9aba121811b9a4ffdae60ed88105897cb3c', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
+            } }, h("span", { key: '5379deee3c76d46d615be0cba14b4f60129ffa25' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,25 +7,12 @@ import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 export class Spinner {
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
-     */
-    duration;
-    /**
-     * The name of the SVG spinner to use. If a name is not provided, the platform's default
-     * spinner will be used.
-     */
-    name;
-    /**
-     * If `true`, the spinner's animation will be paused.
-     */
-    paused = false;
+    constructor() {
+        /**
+         * If `true`, the spinner's animation will be paused.
+         */
+        this.paused = false;
+    }
     getName() {
         const spinnerName = this.name || config.get('spinner');
         const mode = getIonMode(this);
@@ -35,10 +22,11 @@ export class Spinner {
         return mode === 'ios' ? 'lines' : 'circular';
     }
     render() {
+        var _a;
         const self = this;
         const mode = getIonMode(self);
         const spinnerName = self.getName();
-        const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
+        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 = [];
         if (spinner.circles !== undefined) {
@@ -51,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'c35ebd01186e860acb9cac260193f0836424fdf4', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -16,31 +16,19 @@ const QUERY = {
     never: '',
 };
 export class SplitPane {
-    rmL;
-    el;
-    visible = false;
-    /**
-     * The `id` of the main content. When using
-     * a router this is typically `ion-router-outlet`.
-     * When not using a router, this is typically
-     * your main view's `ion-content`. This is not the
-     * id of the `ion-content` inside of your `ion-menu`.
-     */
-    contentId;
-    /**
-     * If `true`, the split pane will be hidden.
-     */
-    disabled = false;
-    /**
-     * When the split-pane should be shown.
-     * Can be a CSS media query expression, or a shortcut expression.
-     * Can also be a boolean expression.
-     */
-    when = QUERY['lg'];
-    /**
-     * Expression to be called when the split-pane visibility has changed
-     */
-    ionSplitPaneVisible;
+    constructor() {
+        this.visible = false;
+        /**
+         * If `true`, the split pane will be hidden.
+         */
+        this.disabled = false;
+        /**
+         * When the split-pane should be shown.
+         * Can be a CSS media query expression, or a shortcut expression.
+         * Can also be a boolean expression.
+         */
+        this.when = QUERY['lg'];
+    }
     visibleChanged(visible) {
         this.ionSplitPaneVisible.emit({ visible });
     }
@@ -138,12 +126,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '694e989fafcfe2453e0a83b3cb736efaa1eb4fec', class: {
+        return (h(Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'dde7e9382b62cc11971aa233cf98c2314ae4f720' })));
+            } }, h("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,21 +5,10 @@ import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
 export class Tab {
-    loadPromise;
-    el;
-    /** @internal */
-    active = false;
-    /** @internal */
-    delegate;
-    /**
-     * A tab id must be provided for each `ion-tab`. It's used internally to reference
-     * the selected tab or by the router to switch between them.
-     */
-    tab;
-    /**
-     * The component to display inside of the tab.
-     */
-    component;
+    constructor() {
+        /** @internal */
+        this.active = false;
+    }
     async componentWillLoad() {
         if (Build.isDev) {
             if (this.component !== undefined && this.el.childElementCount > 0) {
@@ -65,10 +54,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'b0c7c9eeb322d1c8a4b3e07a331b603a8028fa2f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'd22fc996eff4976c4b37405ed1dd7bcd90e32f2a' })));
+            } }, h("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,21 +9,18 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class TabBar {
-    keyboardCtrl = null;
-    keyboardCtrlPromise = null;
-    didLoad = false;
-    el;
-    keyboardVisible = 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).
-     */
-    color;
-    /**
-     * The selected tab component
-     */
-    selectedTab;
+    constructor() {
+        this.keyboardCtrl = null;
+        this.keyboardCtrlPromise = null;
+        this.didLoad = false;
+        this.keyboardVisible = false;
+        /**
+         * If `true`, the tab bar will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         */
+        this.translucent = false;
+    }
     selectedTabChanged() {
         // Skip the initial watcher call that happens during component load
         // We handle that in componentDidLoad to ensure children are ready
@@ -36,21 +33,6 @@ export class TabBar {
             });
         }
     }
-    /**
-     * If `true`, the tab bar will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     */
-    translucent = false;
-    /** @internal */
-    ionTabBarChanged;
-    /**
-     * @internal
-     * This event is used in IonContent to correctly
-     * calculate the fullscreen content offsets
-     * when IonTabBar is used.
-     */
-    ionTabBarLoaded;
     componentDidLoad() {
         this.ionTabBarLoaded.emit();
         // Set the flag to indicate the component has loaded
@@ -105,11 +87,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '148f65df0818e9d220a9b46db74cb89ab94e62d2', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'a64e235f3703662e2dd7a834f752cc5b1490adbc' })));
+            }) }, h("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,65 +11,34 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML anchor element that wraps all child elements.
  */
 export class TabButton {
-    inheritedAttributes = {};
-    el;
-    /**
-     * If `true`, the user cannot interact with the tab button.
-     */
-    disabled = false;
-    /**
-     * This attribute instructs browsers to download a URL instead of navigating to
-     * it, so the user will be prompted to save it as a local file. If the attribute
-     * has a value, it is used as the pre-filled file name in the Save prompt
-     * (the user can still change the file name if they want).
-     */
-    download;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * Set the layout of the text and icon in the tab bar.
-     * It defaults to `"icon-top"`.
-     */
-    layout;
-    /**
-     * The selected tab component
-     */
-    selected = false;
-    /**
-     * A tab id must be provided for each `ion-tab`. It's used internally to reference
-     * the selected tab or by the router to switch between them.
-     */
-    tab;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * Emitted when the tab bar is clicked
-     * @internal
-     */
-    ionTabButtonClick;
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the user cannot interact with the tab button.
+         */
+        this.disabled = false;
+        /**
+         * The selected tab component
+         */
+        this.selected = false;
+        this.onKeyUp = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                this.selectTab(ev);
+            }
+        };
+        this.onClick = (ev) => {
+            this.selectTab(ev);
+        };
+    }
     onTabBarChanged(ev) {
         const dispatchedFrom = ev.target;
         const parent = this.el.parentElement;
-        if (ev.composedPath().includes(parent) || dispatchedFrom?.contains(this.el)) {
+        if (ev.composedPath().includes(parent) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
             this.selected = this.tab === ev.detail.tab;
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this.el, ['aria-label']),
-        };
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
         if (this.layout === undefined) {
             this.layout = config.get('tabButtonLayout', 'icon-top');
         }
@@ -92,14 +61,6 @@ export class TabButton {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
-    onKeyUp = (ev) => {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-            this.selectTab(ev);
-        }
-    };
-    onClick = (ev) => {
-        this.selectTab(ev);
-    };
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const mode = getIonMode(this);
@@ -109,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '1034b5a928ecec49bd8efec3730ea1b11a579cf3', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -121,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", { key: '4cc8e695425956ffc7622af27c1b88a45f8a0c68', ...attrs, class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined, ...inheritedAttributes }, h("span", { key: 'c529c166f557e1a5c744873c075b564c49786a2c', class: "button-inner" }, h("slot", { key: 'f832355934d80267cd6e81e58b9c5afce0b42907' })), mode === 'md' && h("ion-ripple-effect", { key: '90e79bdf38ba1cd89fca9ce63465e26a29b49316', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, h("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && h("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -9,25 +9,23 @@ import { printIonError } from "../../utils/logging/index";
  * @slot bottom - Content is placed at the bottom of the screen.
  */
 export class Tabs {
-    transitioning = false;
-    leavingTab;
-    el;
-    selectedTab;
-    /** @internal */
-    useRouter = false;
-    /**
-     * Emitted when the navigation will load a component.
-     * @internal
-     */
-    ionNavWillLoad;
-    /**
-     * Emitted when the navigation is about to transition to a new component.
-     */
-    ionTabsWillChange;
-    /**
-     * Emitted when the navigation has finished transitioning to a new component.
-     */
-    ionTabsDidChange;
+    constructor() {
+        this.transitioning = false;
+        /** @internal */
+        this.useRouter = false;
+        this.onTabClicked = (ev) => {
+            const { href, tab } = ev.detail;
+            if (this.useRouter && href !== undefined) {
+                const router = document.querySelector('ion-router');
+                if (router) {
+                    router.push(href);
+                }
+            }
+            else {
+                this.select(tab);
+            }
+        };
+    }
     async componentWillLoad() {
         if (!this.useRouter) {
             /**
@@ -116,7 +114,8 @@ export class Tabs {
     }
     /** @internal */
     async getRouteId() {
-        const tabId = this.selectedTab?.tab;
+        var _a;
+        const tabId = (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab;
         return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
     }
     setActive(selectedTab) {
@@ -162,20 +161,8 @@ export class Tabs {
     get tabs() {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
-    onTabClicked = (ev) => {
-        const { href, tab } = ev.detail;
-        if (this.useRouter && href !== undefined) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                router.push(href);
-            }
-        }
-        else {
-            this.select(tab);
-        }
-    };
     render() {
-        return (h(Host, { key: 'ba04a29fdd02d7c758cbaa98cfc589949872d832', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd5794140152e2c251e567eeb06afc392af74749d', name: "top" }), h("div", { key: '26fb83786637fe7288901fbbdb3694b8bc94329f', class: "tabs-inner" }, h("slot", { key: '60c663a8647e684455b533eaf5fa3908f9333ae9' })), h("slot", { key: '2d9f7d07c8cdc72f5df200fa71fa56a9dd822c4c', name: "bottom" })));
+        return (h(Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), h("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, h("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), h("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,17 +8,11 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Text {
-    /**
-     * 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).
-     */
-    color;
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '41ed8da617ed0e07bbfe96e32a000e1c6503e24e', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'db8de04a2493537b3037f276b03abd92dfa56847' })));
+            }) }, h("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }