@ionic/core 9.0.0 → 9.0.1-nightly.20260820

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

@@ -11,31 +11,16 @@ import { getIonMode } from "../../global/ionic-global";
  * @internal
  */
 export class SelectPopover {
-    el;
-    // Tracks the option that received Enter-keydown so keyup only
-    // dismisses when the press started on the same option. Prevents
-    // Enter on the triggering ion-select from auto-dismissing.
-    pendingEnterTarget = null;
-    /**
-     * The header text of the popover
-     */
-    header;
-    /**
-     * The subheader text of the popover
-     */
-    subHeader;
-    /**
-     * The text content of the popover body
-     */
-    message;
-    /**
-     * If true, the select accepts multiple values
-     */
-    multiple;
-    /**
-     * An array of options for the popover
-     */
-    options = [];
+    constructor() {
+        // Tracks the option that received Enter-keydown so keyup only
+        // dismisses when the press started on the same option. Prevents
+        // Enter on the triggering ion-select from auto-dismissing.
+        this.pendingEnterTarget = null;
+        /**
+         * An array of options for the popover
+         */
+        this.options = [];
+    }
     findOptionFromEvent(ev) {
         const { options } = this;
         return options.find((o) => o.value === ev.target.value);

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();
     }

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);

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 });
     }

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) {

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

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

@@ -11,54 +11,25 @@ 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;
@@ -92,14 +63,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);

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) {
             /**
@@ -162,18 +160,6 @@ 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: '7b8c6455e0673e343d0c759ed85e0d9970de3bb8', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '7d0d840ae03312ca22bcb694ffca738d6648218e', name: "top" }), h("div", { key: 'f336d903800af34af0d36adfc94223b940111e6a', class: "tabs-inner" }, h("slot", { key: '14656154959a24ae176eff20f6463043180d2eae' })), h("slot", { key: '2be4d114f058d24b0e70fb12cfb0eccd3d6e6a74', name: "bottom" })));
     }

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

@@ -8,12 +8,6 @@ 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: 'b6f604df1b7aa5705a5b9a458e669a6a921c02a1', class: createColorClasses(this.color, {