@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

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

@@ -2,28 +2,76 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { findIonContent } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { printIonWarning } from "../../utils/logging/index";
+import { createScrollHideController } from "../../utils/scroll-hide-controller";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+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 {
-    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.scrollHideCtrlPromise = null;
+        this.hasWarnedFooter = false;
+        this.keyboardVisible = false;
+        /**
+         * If `true`, the tab bar will be translucent.
+         * 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';
+        this.setupScrollEffect = async () => {
+            // When nested inside ion-footer, the tab-bar should not hide
+            // independently — doing so would leave an empty footer behind.
+            // The footer should own the scroll effect instead.
+            if (this.el.closest('ion-footer')) {
+                if (!this.hasWarnedFooter) {
+                    this.hasWarnedFooter = true;
+                    printIonWarning(`[ion-tab-bar] - scroll-effect="hide" is ignored when nested inside <ion-footer>. ` +
+                        `Set scroll-effect="hide" on the <ion-footer> instead.`, this.el);
+                }
+                return;
+            }
+            const appRootSelector = config.get('appRootSelector', 'ion-app');
+            const pageEl = this.el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner`);
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (!contentEl) {
+                return;
+            }
+            const setupPromise = createScrollHideController(contentEl, {
+                el: this.el,
+                cssVar: '--internal-tab-bar-hide-height',
+                hiddenClass: 'tab-bar-scroll-hidden',
+                contentPartnerClass: 'content-tab-bar-hide-scroll-partner',
+                contentHiddenClass: 'content-tab-bar-hide-scroll-hidden',
+                shouldKeepAriaHidden: () => this.keyboardVisible && this.el.getAttribute('slot') !== 'top',
+            });
+            this.scrollHideCtrlPromise = setupPromise;
+            const controller = await setupPromise;
+            if (this.scrollHideCtrlPromise === setupPromise) {
+                this.scrollHideCtrlPromise = null;
+                controller.init();
+                this.scrollHideCtrl = controller;
+            }
+        };
+    }
     selectedTabChanged() {
         // Skip the initial watcher call that happens during component load
         // We handle that in componentDidLoad to ensure children are ready
@@ -36,36 +84,28 @@ 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;
+    scrollEffectChanged() {
+        this.checkScrollEffect();
+    }
     componentDidLoad() {
         this.ionTabBarLoaded.emit();
-        // Set the flag to indicate the component has loaded
-        // This allows the watcher to emit changes from this point forward
         this.didLoad = true;
-        // Emit the initial selected tab after the component is fully loaded
-        // This ensures all child components (ion-tab-button) are ready
         if (this.selectedTab !== undefined) {
             this.ionTabBarChanged.emit({
                 tab: this.selectedTab,
             });
         }
+        this.checkScrollEffect();
+    }
+    checkScrollEffect() {
+        this.destroyScrollEffect();
+        if (this.scrollEffect === 'hide') {
+            this.setupScrollEffect();
+        }
     }
     async connectedCallback() {
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
+            var _a, _b;
             /**
              * If the keyboard is hiding, then we need to wait
              * for the webview to resize. Otherwise, the tab bar
@@ -75,6 +115,18 @@ export class TabBar {
                 await waitForResize;
             }
             this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+            // Toggle aria-hidden imperatively for the keyboard case.
+            // scroll-effect hide also sets aria-hidden via setHidden,
+            // so keeping a single imperative path avoids render() clearing
+            // the scroll-set attribute on re-render.
+            const shouldHide = keyboardOpen && this.el.getAttribute('slot') !== 'top';
+            const isScrollHidden = (_b = (_a = this.scrollHideCtrl) === null || _a === void 0 ? void 0 : _a.isHidden()) !== null && _b !== void 0 ? _b : false;
+            if (shouldHide || isScrollHidden) {
+                this.el.setAttribute('aria-hidden', 'true');
+            }
+            else {
+                this.el.removeAttribute('aria-hidden');
+            }
         });
         this.keyboardCtrlPromise = promise;
         const keyboardCtrl = await promise;
@@ -92,6 +144,7 @@ export class TabBar {
         }
     }
     disconnectedCallback() {
+        this.destroyScrollEffect();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -101,28 +154,53 @@ export class TabBar {
             this.keyboardCtrl = null;
         }
     }
+    destroyScrollEffect() {
+        this.scrollHideCtrlPromise = null;
+        if (this.scrollHideCtrl) {
+            this.scrollHideCtrl.destroy();
+            this.scrollHideCtrl = undefined;
+        }
+    }
+    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, scrollEffect, expand } = this;
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '5c56cffd380df7720f3309af7cfca71500817678', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '749dbd95dd87e73ceea2dab9767a285fa3ccf5e1', role: "tablist", class: createColorClasses(color, {
+                [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'a98d3298320f864578e30e0fb79a2cc0cccb46d9' })));
+                'tab-bar-scroll-effect-hide': scrollEffect === 'hide',
+                [`tab-bar-${expand}`]: true,
+                [`tab-bar-${shape}`]: shape !== undefined,
+            }) }, h("slot", { key: '05a13a25a37c76245dad1710ef58ba5e69cf9f6c' })));
     }
     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() {
@@ -172,6 +250,32 @@ export class TabBar {
                 "reflect": false,
                 "attribute": "selected-tab"
             },
+            "scrollEffect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabBarScrollEffect",
+                    "resolved": "\"hide\" | undefined",
+                    "references": {
+                        "TabBarScrollEffect": {
+                            "location": "import",
+                            "path": "./tab-bar-interface",
+                            "id": "src/components/tab-bar/tab-bar-interface.ts::TabBarScrollEffect",
+                            "referenceLocation": "TabBarScrollEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Describes the scroll effect that will be applied to the tab bar.\n`\"hide\"` slides the tab bar out of view when scrolling down and back in\nwhen scrolling up.\n\nNote: `\"hide\"` is ignored when the tab bar is nested inside an\n`ion-footer` to avoid leaving an empty footer visible on screen.\nSet `scroll-effect=\"hide\"` on the footer instead so the entire\nfooter hides together."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scroll-effect"
+            },
             "translucent": {
                 "type": "boolean",
                 "mutable": false,
@@ -184,13 +288,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"
             }
         };
     }
@@ -250,6 +393,9 @@ export class TabBar {
         return [{
                 "propName": "selectedTab",
                 "methodName": "selectedTabChanged"
+            }, {
+                "propName": "scrollEffect",
+                "methodName": "scrollEffectChanged"
             }];
     }
 }

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

@@ -1,3 +1,77 @@
+: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;
+}
+
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+    transition: 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
@@ -54,29 +128,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 +150,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 +211,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