@ionic/core 8.8.3 → 8.8.4-dev.11775576543.172b7b99

package/dist/collection/components/tab-bar/tab-bar.ios.css

@@ -1,3 +1,62 @@
+:host {
+  /**
+   * @prop --background: Background of the tab bar
+   * @prop --border: Border of the tab bar
+   * @prop --color: Color of the tab bar
+   */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: var(--border);
+  background: var(--background);
+  color: var(--color);
+  text-align: center;
+  user-select: none;
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
+}
+
+:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
+:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+  background: var(--background-focused);
+}
+
+:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
+  background: transparent;
+}
+
+:host([slot=top]) {
+  border-top: 0;
+  border-bottom: var(--border);
+}
+
+:host(.tab-bar-hidden) {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+/* Full */
+:host(.tab-bar-full) {
+  width: auto;
+  contain: strict;
+  /* stylelint-disable */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
+}
+
+:host([slot=top].tab-bar-full) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: 0;
+}
+
+/**
+ * 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,29 +113,7 @@
  * }
  */
 :host {
-  /**
-   * @prop --background: Background of the tab bar
-   * @prop --border: Border of the tab bar
-   * @prop --color: Color of the tab bar
-   */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  /* stylelint-disable */
-  padding-right: var(--ion-safe-area-right);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left);
-  /* stylelint-enable */
-  border-top: var(--border);
-  background: var(--background);
-  color: var(--color);
-  text-align: center;
-  contain: strict;
-  user-select: none;
   z-index: 10;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-sizing: content-box !important;
 }
 
 :host(.ion-color) ::slotted(ion-tab-button) {
@@ -98,27 +135,12 @@
   background: var(--ion-color-base);
 }
 
-:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
-:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
-  background: var(--background-focused);
-}
-
-:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
-  background: transparent;
-}
-
-:host([slot=top]) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: 0;
-  border-top: 0;
-  border-bottom: var(--border);
-}
-
-:host(.tab-bar-hidden) {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
+/**
+ * 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
@@ -174,6 +196,12 @@
  *   }
  * }
  */
+/**
+ * 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-bar/tab-bar.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 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 TabBar {
     constructor() {
@@ -16,10 +17,20 @@ export class TabBar {
         this.keyboardVisible = false;
         /**
          * If `true`, the tab bar will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
+        /**
+         * Set to `"compact"` to display a width based on the items
+         * inside the tab bar. This value will only work for the
+         * `ionic` theme.
+         *
+         * Set to `"full"` to display a full width tab bar.
+         *
+         * Defaults to `"full"`.
+         */
+        this.expand = 'full';
     }
     selectedTabChanged() {
         // Skip the initial watcher call that happens during component load
@@ -83,28 +94,45 @@ export class TabBar {
             this.keyboardCtrl = null;
         }
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11234): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
-        const { color, translucent, keyboardVisible } = this;
-        const mode = getIonMode(this);
+        const { color, translucent, keyboardVisible, expand } = this;
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'e6466b90b72ed2e62c8c20fee2bc0b262ca4ccae', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
+                [`tab-bar-${expand}`]: true,
+                [`tab-bar-${shape}`]: shape !== undefined,
+            }) }, h("slot", { key: '6801f9523822178692d9091b0132f1b1dd41892d' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["tab-bar.ios.scss"],
-            "md": ["tab-bar.md.scss"]
+            "md": ["tab-bar.md.scss"],
+            "ionic": ["tab-bar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-bar.ios.css"],
-            "md": ["tab-bar.md.css"]
+            "md": ["tab-bar.md.css"],
+            "ionic": ["tab-bar.ionic.css"]
         };
     }
     static get properties() {
@@ -166,13 +194,52 @@ export class TabBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the tab bar will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "translucent",
                 "defaultValue": "false"
+            },
+            "expand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'compact' | 'full'",
+                    "resolved": "\"compact\" | \"full\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"compact\"` to display a width based on the items\ninside the tab bar. This value will only work for the\n`ionic` theme.\n\nSet to `\"full\"` to display a full width tab bar.\n\nDefaults to `\"full\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand",
+                "defaultValue": "'full'"
+            },
+            "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 bar with slightly rounded corners,\n`\"round\"` for a tab bar with fully rounded corners, or\n`\"rectangular\"` for a tab bar without rounded corners.\n\nDefaults to `\"round\"` for the `\"ionic\"` theme, undefined for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
             }
         };
     }

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

@@ -1,3 +1,62 @@
+:host {
+  /**
+   * @prop --background: Background of the tab bar
+   * @prop --border: Border of the tab bar
+   * @prop --color: Color of the tab bar
+   */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: var(--border);
+  background: var(--background);
+  color: var(--color);
+  text-align: center;
+  user-select: none;
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
+}
+
+:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
+:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+  background: var(--background-focused);
+}
+
+:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
+  background: transparent;
+}
+
+:host([slot=top]) {
+  border-top: 0;
+  border-bottom: var(--border);
+}
+
+:host(.tab-bar-hidden) {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+/* Full */
+:host(.tab-bar-full) {
+  width: auto;
+  contain: strict;
+  /* stylelint-disable */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
+}
+
+:host([slot=top].tab-bar-full) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: 0;
+}
+
+/**
+ * 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,29 +113,7 @@
  * }
  */
 :host {
-  /**
-   * @prop --background: Background of the tab bar
-   * @prop --border: Border of the tab bar
-   * @prop --color: Color of the tab bar
-   */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  /* stylelint-disable */
-  padding-right: var(--ion-safe-area-right);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left);
-  /* stylelint-enable */
-  border-top: var(--border);
-  background: var(--background);
-  color: var(--color);
-  text-align: center;
-  contain: strict;
-  user-select: none;
   z-index: 10;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-sizing: content-box !important;
 }
 
 :host(.ion-color) ::slotted(ion-tab-button) {
@@ -98,27 +135,12 @@
   background: var(--ion-color-base);
 }
 
-:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
-:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
-  background: var(--background-focused);
-}
-
-:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
-  background: transparent;
-}
-
-:host([slot=top]) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: 0;
-  border-top: 0;
-  border-bottom: var(--border);
-}
-
-:host(.tab-bar-hidden) {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
+/**
+ * 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
@@ -174,6 +196,12 @@
  *   }
  * }
  */
+/**
+ * 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