@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -4,76 +4,58 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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');
         }
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11436): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     selectTab(ev) {
         if (this.tab !== undefined) {
             if (!this.disabled) {
@@ -92,25 +74,27 @@ export class TabButton {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
-    onKeyUp = (ev) => {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-            this.selectTab(ev);
+    canActivate() {
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        if (theme !== 'ionic') {
+            return true;
         }
-    };
-    onClick = (ev) => {
-        this.selectTab(ev);
-    };
+        return mode === 'md';
+    }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
+        const canActivate = this.canActivate();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (h(Host, { key: '45bb7ffa6d8764202adc2c5c393748d4003e86fe', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
-                [mode]: true,
+        return (h(Host, { key: 'ea2434faf0ba75131fb578f8f3bc1ea6e6729bff', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+                [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
                 'tab-has-label': hasLabel,
@@ -118,23 +102,26 @@ export class TabButton {
                 'tab-has-label-only': hasLabel && !hasIcon,
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
-                'ion-activatable': true,
+                'ion-activatable': canActivate,
                 'ion-selectable': true,
+                [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", { key: '78c416609a2b86a6e7c5f217ffd2a6b9f80a5103', ...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: '62934156439ffd0ab86674b9cf89d9cfa0d3589c', class: "button-inner" }, h("slot", { key: '293ba8f5ef50373c4e6e492dcaa55b3d2aae8d2f' })), mode === 'md' && h("ion-ripple-effect", { key: '360b010afedcf17fc1f3ab6d192f0f8c7b1cf112', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '049dcedfa561ff54175fd9bfa4405788e0fddf22' }, 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: '25670e1072e9e1889262483736aed7d45f5fd05f', class: "button-inner" }, h("slot", { key: 'fb8df1a587a22db676492bbb14d8473aab4cc0fe' })), theme === 'md' && h("ion-ripple-effect", { key: '49a8bbfe9dc4d41707afcf9f872db5d1c8bb8287', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["tab-button.ios.scss"],
-            "md": ["tab-button.md.scss"]
+            "md": ["tab-button.md.scss"],
+            "ionic": ["tab-button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-button.ios.css"],
-            "md": ["tab-button.md.css"]
+            "md": ["tab-button.md.css"],
+            "ionic": ["tab-button.ionic.css"]
         };
     }
     static get properties() {
@@ -262,6 +249,25 @@ export class TabButton {
                 "attribute": "selected",
                 "defaultValue": "false"
             },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a tab-button with slightly rounded corners,\n`\"round\"` for a tab-button with fully rounded corners, or `\"rectangular\"`\nfor a tab-button without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
+            },
             "tab": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/tab-button/tab-button.md.css

@@ -1,58 +1,3 @@
-/**
- * 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;
- *   }
- * }
- */
 :host {
   /**
    * @prop --background: Background of the tab button
@@ -83,29 +28,6 @@
 }
 
 .button-native {
-  border-radius: inherit;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
   display: flex;
   position: relative;
   flex-direction: inherit;
@@ -123,16 +45,6 @@
   -webkit-user-drag: none;
 }
 
-.button-native::after {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  opacity: 0;
-}
-
 .button-inner {
   display: flex;
   position: relative;
@@ -166,11 +78,6 @@
   display: none !important;
 }
 
-:host(.tab-disabled) {
-  pointer-events: none;
-  opacity: 0.4;
-}
-
 ::slotted(ion-label),
 ::slotted(ion-icon) {
   display: block;
@@ -225,6 +132,114 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
+/**
+ * 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;
+ *   }
+ * }
+ */
+.button-native {
+  border-radius: inherit;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  white-space: inherit;
+}
+
+.button-native::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
+:host(.tab-disabled) {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+/**
+ * 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
@@ -344,6 +359,35 @@ ion-ripple-effect {
   height: 8px;
 }
 
+:host ::slotted(ion-badge[vertical=bottom]) {
+  top: calc(50% - 8px);
+}
+
+:host ::slotted(ion-badge[vertical=bottom]:empty) {
+  top: calc(50% - 4px);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]) {
+  top: calc(50% - 4px);
+}
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]) {
+  inset-inline-start: calc(50% + 6px);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]) {
+  top: calc(50% + 4px);
+}
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]) {
+  inset-inline-start: calc(50% + 6px);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty) {
+  top: calc(50% + 12px);
+}
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty) {
+  inset-inline-start: calc(50% + 6px);
+}
+
 :host(.tab-layout-icon-top) ::slotted(ion-icon) {
   margin-top: 6px;
   margin-bottom: 2px;

package/dist/collection/components/tabs/tabs.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;

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

@@ -4,30 +4,31 @@
 import { Host, h } from "@stencil/core";
 import { printIonError } from "../../utils/logging/index";
 /**
+ * @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.
+ *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot top - Content is placed at the top of the screen.
  * @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 +117,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 +164,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: '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" })));
+        return (h(Host, { key: '9d666c6fd4e18fda8db4403a0c5e759704b15740', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '453d78ddd05f0097a33a8a794b709a1ddc165606', name: "top" }), h("div", { key: 'da5c93579ebfa17c4d685b2f62f35668026b5754', class: "tabs-inner" }, h("slot", { key: 'af019d0c0b9b8a63984b11b570924e8acf18f84c' })), h("slot", { key: '620be553e6b2b44ff67776ebacc0b6c40375703f', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,9 @@
+/**
+ * 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/text/text.js

@@ -3,22 +3,17 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 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, {
-                [mode]: true,
-            }) }, h("slot", { key: '055d07b024a6554dfcf959fc8ed7b405e2730af2' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd3306513b05f65be6ead42865765773af89d3a78', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '0781d7e76e15d07dc727bf539cb42ca379393eae' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }