@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772055571.14fddd38

package/components/ion-skeleton-text.js

@@ -1,4 +1,68 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as i,createEvent as n,h as o,Host as e,transformTag as r}from"@stencil/core/internal/client";import{h as a}from"./theme.js";import{c as s}from"./index4.js";import{b}from"./ionic-global.js";const m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionStyle=n(this,"ionStyle",7),this.animated=!1}componentWillLoad(){this.emitStyle()}emitStyle(){this.ionStyle.emit({"skeleton-text":!0})}render(){const t=this.animated&&s.getBoolean("animated",!0),i=a("ion-avatar",this.el)||a("ion-thumbnail",this.el),n=b(this);return o(e,{key:"d86ef7392507cdbf48dfd3a71f02d7a83eda4aae",class:{[n]:!0,"skeleton-text-animated":t,"in-media":i}},o("span",{key:"8e8b5a232a6396d2bba691b05f9de4da44b2965c"}," "))}get el(){return this}static get style(){return":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065)), color-stop(18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135)), color-stop(33%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065)));background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer;animation-name:shimmer;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}"}},[1,"ion-skeleton-text",{animated:[4]}]),g=m,c=function(){"undefined"!=typeof customElements&&["ion-skeleton-text"].forEach((t=>{"ion-skeleton-text"===t&&(customElements.get(r(t))||customElements.define(r(t),m))}))};export{g as IonSkeletonText,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h as hostContext } from './theme.js';
+import { c as config } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065)), color-stop(18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135)), color-stop(33%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065)));background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer;animation-name:shimmer;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
+
+const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionStyle = createEvent(this, "ionStyle", 7);
+        /**
+         * If `true`, the skeleton text will animate.
+         */
+        this.animated = false;
+    }
+    componentWillLoad() {
+        this.emitStyle();
+    }
+    emitStyle() {
+        // The emitted property is used by item in order
+        // to add the item-skeleton-text class which applies
+        // overflow: hidden to its label
+        const style = {
+            'skeleton-text': true,
+        };
+        this.ionStyle.emit(style);
+    }
+    render() {
+        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: 'd86ef7392507cdbf48dfd3a71f02d7a83eda4aae', class: {
+                [mode]: true,
+                'skeleton-text-animated': animated,
+                'in-media': inMedia,
+            } }, h("span", { key: '8e8b5a232a6396d2bba691b05f9de4da44b2965c' }, "\u00A0")));
+    }
+    get el() { return this; }
+    static get style() { return skeletonTextCss; }
+}, [257, "ion-skeleton-text", {
+        "animated": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-skeleton-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-skeleton-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SkeletonText);
+            }
+            break;
+    } });
+}
+
+const IonSkeletonText = SkeletonText;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSkeletonText, defineCustomElement };

package/components/ion-spinner.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{a as s,d as o}from"./spinner.js";const r=s,a=o;export{r as IonSpinner,a as defineCustomElement}
+import { a as Spinner, d as defineCustomElement$1 } from './spinner.js';
+
+const IonSpinner = Spinner;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSpinner, defineCustomElement };

package/components/ion-split-pane.js

@@ -1,4 +1,200 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,Build as o,h as s,Host as n,transformTag as l}from"@stencil/core/internal/client";import{p as a}from"./index4.js";import{b as d}from"./ionic-global.js";const r="split-pane-main",p="split-pane-side",h={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""},c=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.ionSplitPaneVisible=e(this,"ionSplitPaneVisible",7),this.visible=!1,this.disabled=!1,this.when=h.lg}visibleChanged(i){this.ionSplitPaneVisible.emit({visible:i})}async isVisible(){return Promise.resolve(this.visible)}async connectedCallback(){"undefined"!=typeof customElements&&null!=customElements&&await customElements.whenDefined("ion-split-pane"),this.styleMainElement(),this.updateState()}disconnectedCallback(){this.rmL&&(this.rmL(),this.rmL=void 0)}updateState(){if(!o.isBrowser)return;if(this.rmL&&(this.rmL(),this.rmL=void 0),this.disabled)return void(this.visible=!1);const i=this.when;if("boolean"==typeof i)return void(this.visible=i);const t=h[i]||i;if(0===t.length)return void(this.visible=!1);const e=i=>{this.visible=i.matches},s=window.matchMedia(t);s.addListener(e),this.rmL=()=>s.removeListener(e),this.visible=s.matches}styleMainElement(){if(!o.isBrowser)return;const i=this.contentId,t=this.el.children,e=this.el.childElementCount;let s=!1;for(let o=0;o<e;o++){const e=t[o],n=void 0!==i&&e.id===i;if(n){if(s)return void a("[ion-split-pane] - Cannot have more than one main node.");m(e,n),s=!0}}s||a("[ion-split-pane] - Does not have a specified main node.")}render(){const i=d(this);return s(n,{key:"d5e30df12f1f1f855da4c66f98076b9dce762c59",class:{[i]:!0,["split-pane-"+i]:!0,"split-pane-visible":this.visible}},s("slot",{key:"3e30d7cf3bc1cf434e16876a0cb2a36377b8e00f"}))}get el(){return this}static get watchers(){return{visible:[{visibleChanged:0}],disabled:[{updateState:0}],when:[{updateState:0}]}}static get style(){return{ios:":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--side-min-width:270px;--side-max-width:28%}",md:":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--side-min-width:270px;--side-max-width:28%}"}}},[289,"ion-split-pane",{contentId:[513,"content-id"],disabled:[4],when:[8],visible:[32],isVisible:[64]},void 0,{visible:[{visibleChanged:0}],disabled:[{updateState:0}],when:[{updateState:0}]}]),m=(i,t)=>{let e,o;t?(e=r,o=p):(e=p,o=r);const s=i.classList;s.add(e),s.remove(o)},b=c,f=function(){"undefined"!=typeof customElements&&["ion-split-pane"].forEach((i=>{"ion-split-pane"===i&&(customElements.get(l(i))||customElements.define(l(i),c))}))};export{b as IonSplitPane,f as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
+import { p as printIonWarning } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--side-min-width:270px;--side-max-width:28%}";
+
+const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--side-min-width:270px;--side-max-width:28%}";
+
+// TODO(FW-2832): types
+const SPLIT_PANE_MAIN = 'split-pane-main';
+const SPLIT_PANE_SIDE = 'split-pane-side';
+const QUERY = {
+    xs: '(min-width: 0px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    never: '',
+};
+const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionSplitPaneVisible = createEvent(this, "ionSplitPaneVisible", 7);
+        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 });
+    }
+    /**
+     * @internal
+     */
+    async isVisible() {
+        return Promise.resolve(this.visible);
+    }
+    async connectedCallback() {
+        // TODO: connectedCallback is fired in CE build
+        // before WC is defined. This needs to be fixed in Stencil.
+        if (typeof customElements !== 'undefined' && customElements != null) {
+            await customElements.whenDefined('ion-split-pane');
+        }
+        this.styleMainElement();
+        this.updateState();
+    }
+    disconnectedCallback() {
+        if (this.rmL) {
+            this.rmL();
+            this.rmL = undefined;
+        }
+    }
+    updateState() {
+        if (!Build.isBrowser) {
+            return;
+        }
+        if (this.rmL) {
+            this.rmL();
+            this.rmL = undefined;
+        }
+        // Check if the split-pane is disabled
+        if (this.disabled) {
+            this.visible = false;
+            return;
+        }
+        // When query is a boolean
+        const query = this.when;
+        if (typeof query === 'boolean') {
+            this.visible = query;
+            return;
+        }
+        // When query is a string, let's find first if it is a shortcut
+        const mediaQuery = QUERY[query] || query;
+        // Media query is empty or null, we hide it
+        if (mediaQuery.length === 0) {
+            this.visible = false;
+            return;
+        }
+        // Listen on media query
+        const callback = (q) => {
+            this.visible = q.matches;
+        };
+        const mediaList = window.matchMedia(mediaQuery);
+        // TODO FW-5869
+        mediaList.addListener(callback);
+        this.rmL = () => mediaList.removeListener(callback);
+        this.visible = mediaList.matches;
+    }
+    /**
+     * Attempt to find the main content
+     * element inside of the split pane.
+     * If found, set it as the main node.
+     *
+     * We assume that the main node
+     * is available in the DOM on split
+     * pane load.
+     */
+    styleMainElement() {
+        if (!Build.isBrowser) {
+            return;
+        }
+        const contentId = this.contentId;
+        const children = this.el.children;
+        const nu = this.el.childElementCount;
+        let foundMain = false;
+        for (let i = 0; i < nu; i++) {
+            const child = children[i];
+            const isMain = contentId !== undefined && child.id === contentId;
+            if (isMain) {
+                if (foundMain) {
+                    printIonWarning('[ion-split-pane] - Cannot have more than one main node.');
+                    return;
+                }
+                else {
+                    setPaneClass(child, isMain);
+                    foundMain = true;
+                }
+            }
+        }
+        if (!foundMain) {
+            printIonWarning('[ion-split-pane] - Does not have a specified main node.');
+        }
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd5e30df12f1f1f855da4c66f98076b9dce762c59', class: {
+                [mode]: true,
+                // Used internally for styling
+                [`split-pane-${mode}`]: true,
+                'split-pane-visible': this.visible,
+            } }, h("slot", { key: '3e30d7cf3bc1cf434e16876a0cb2a36377b8e00f' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "visible": ["visibleChanged"],
+        "disabled": ["updateState"],
+        "when": ["updateState"]
+    }; }
+    static get style() { return {
+        ios: splitPaneIosCss,
+        md: splitPaneMdCss
+    }; }
+}, [289, "ion-split-pane", {
+        "contentId": [513, "content-id"],
+        "disabled": [4],
+        "when": [8],
+        "visible": [32],
+        "isVisible": [64]
+    }, undefined, {
+        "visible": ["visibleChanged"],
+        "disabled": ["updateState"],
+        "when": ["updateState"]
+    }]);
+const setPaneClass = (el, isMain) => {
+    let toAdd;
+    let toRemove;
+    if (isMain) {
+        toAdd = SPLIT_PANE_MAIN;
+        toRemove = SPLIT_PANE_SIDE;
+    }
+    else {
+        toAdd = SPLIT_PANE_SIDE;
+        toRemove = SPLIT_PANE_MAIN;
+    }
+    const classList = el.classList;
+    classList.add(toAdd);
+    classList.remove(toRemove);
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-split-pane"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-split-pane":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SplitPane);
+            }
+            break;
+    } });
+}
+
+const IonSplitPane = SplitPane;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSplitPane, defineCustomElement };

package/components/ion-tab-bar.js

@@ -1,4 +1,118 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as o,HTMLElement as t,createEvent as r,h as a,Host as e,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./keyboard-controller.js";import{c as i}from"./theme.js";import{b as c}from"./ionic-global.js";const b=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.ionTabBarChanged=r(this,"ionTabBarChanged",7),this.ionTabBarLoaded=r(this,"ionTabBarLoaded",7),this.keyboardCtrl=null,this.didLoad=!1,this.keyboardVisible=!1,this.translucent=!1}selectedTabChanged(){this.didLoad&&void 0!==this.selectedTab&&this.ionTabBarChanged.emit({tab:this.selectedTab})}componentDidLoad(){this.ionTabBarLoaded.emit(),this.didLoad=!0,void 0!==this.selectedTab&&this.ionTabBarChanged.emit({tab:this.selectedTab})}async connectedCallback(){this.keyboardCtrl=await s((async(o,t)=>{!1===o&&void 0!==t&&await t,this.keyboardVisible=o}))}disconnectedCallback(){this.keyboardCtrl&&this.keyboardCtrl.destroy()}render(){const{color:o,translucent:t,keyboardVisible:r}=this,n=c(this),s=r&&"top"!==this.el.getAttribute("slot");return a(e,{key:"388ec37ce308035bab78d6c9a016bb616e9517a9",role:"tablist","aria-hidden":s?"true":null,class:i(o,{[n]:!0,"tab-bar-translucent":t,"tab-bar-hidden":s})},a("slot",{key:"ce10ade2b86725e24f3254516483eeedd8ecb16a"}))}get el(){return this}static get watchers(){return{selectedTab:[{selectedTabChanged:0}]}}static get style(){return{ios:":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){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){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}",md:":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){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){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-background-color, #fff));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:56px}"}}},[289,"ion-tab-bar",{color:[513],selectedTab:[1,"selected-tab"],translucent:[4],keyboardVisible:[32]},void 0,{selectedTab:[{selectedTabChanged:0}]}]),l=b,d=function(){"undefined"!=typeof customElements&&["ion-tab-bar"].forEach((o=>{"ion-tab-bar"===o&&(customElements.get(n(o))||customElements.define(n(o),b))}))};export{l as IonTabBar,d as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createKeyboardController } from './keyboard-controller.js';
+import { c as createColorClasses } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const tabBarIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){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){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";
+
+const tabBarMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){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){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-background-color, #fff));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:56px}";
+
+const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionTabBarChanged = createEvent(this, "ionTabBarChanged", 7);
+        this.ionTabBarLoaded = createEvent(this, "ionTabBarLoaded", 7);
+        this.keyboardCtrl = 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
+        if (!this.didLoad) {
+            return;
+        }
+        if (this.selectedTab !== undefined) {
+            this.ionTabBarChanged.emit({
+                tab: this.selectedTab,
+            });
+        }
+    }
+    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,
+            });
+        }
+    }
+    async connectedCallback() {
+        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+            /**
+             * If the keyboard is hiding, then we need to wait
+             * for the webview to resize. Otherwise, the tab bar
+             * will flicker before the webview resizes.
+             */
+            if (keyboardOpen === false && waitForResize !== undefined) {
+                await waitForResize;
+            }
+            this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+        });
+    }
+    disconnectedCallback() {
+        if (this.keyboardCtrl) {
+            this.keyboardCtrl.destroy();
+        }
+    }
+    render() {
+        const { color, translucent, keyboardVisible } = this;
+        const mode = getIonMode(this);
+        const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
+        return (h(Host, { key: '388ec37ce308035bab78d6c9a016bb616e9517a9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+                [mode]: true,
+                'tab-bar-translucent': translucent,
+                'tab-bar-hidden': shouldHide,
+            }) }, h("slot", { key: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "selectedTab": ["selectedTabChanged"]
+    }; }
+    static get style() { return {
+        ios: tabBarIosCss,
+        md: tabBarMdCss
+    }; }
+}, [289, "ion-tab-bar", {
+        "color": [513],
+        "selectedTab": [1, "selected-tab"],
+        "translucent": [4],
+        "keyboardVisible": [32]
+    }, undefined, {
+        "selectedTab": ["selectedTabChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-tab-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-tab-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TabBar);
+            }
+            break;
+    } });
+}
+
+const IonTabBar = TabBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTabBar, defineCustomElement };

package/components/ion-tab-button.js

@@ -1,4 +1,131 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as i,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as r}from"./helpers.js";import{c as l}from"./index4.js";import{b as s}from"./ionic-global.js";import{d}from"./ripple-effect.js";const b=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionTabButtonClick=e(this,"ionTabButtonClick",7),this.inheritedAttributes={},this.disabled=!1,this.selected=!1,this.onKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.selectTab(t)},this.onClick=t=>{this.selectTab(t)}}onTabBarChanged(t){const o=t.target,e=this.el.parentElement;(t.composedPath().includes(e)||(null==o?void 0:o.contains(this.el)))&&(this.selected=this.tab===t.detail.tab)}componentWillLoad(){this.inheritedAttributes=Object.assign({},r(this.el,["aria-label"])),void 0===this.layout&&(this.layout=l.get("tabButtonLayout","icon-top"))}selectTab(t){void 0!==this.tab&&(this.disabled||this.ionTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected}),t.preventDefault())}get hasLabel(){return!!this.el.querySelector("ion-label")}get hasIcon(){return!!this.el.querySelector("ion-icon")}render(){const{disabled:t,hasIcon:o,hasLabel:e,href:a,rel:r,target:l,layout:d,selected:b,tab:c,inheritedAttributes:h}=this,p=s(this),g={download:this.download,href:a,rel:r,target:l};return i(n,{key:"ce9d29ced0c781d6b2fa62cd5feb801c11fc42e8",onClick:this.onClick,onKeyup:this.onKeyUp,id:void 0!==c?"tab-button-"+c:null,class:{[p]:!0,"tab-selected":b,"tab-disabled":t,"tab-has-label":e,"tab-has-icon":o,"tab-has-label-only":e&&!o,"tab-has-icon-only":o&&!e,["tab-layout-"+d]:!0,"ion-activatable":!0,"ion-selectable":!0,"ion-focusable":!0}},i("a",Object.assign({key:"01cb0ed2e77c5c1a8abd48da1bb07ac1b305d0b6"},g,{class:"button-native",part:"native",role:"tab","aria-selected":b?"true":null,"aria-disabled":t?"true":null,tabindex:t?"-1":void 0},h),i("span",{key:"d0240c05f42217cfb186b86ff8a0c9cd70b9c8df",class:"button-inner"},i("slot",{key:"0a20b84925037dbaa8bb4a495b813d3f7c2e58ac"})),"md"===p&&i("ion-ripple-effect",{key:"4c92c27178cdac89d69cffef8d2c39c3644914e8",type:"unbounded"})))}get el(){return this}static get style(){return{ios:':host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:2px;--padding-bottom:0;--padding-start:2px;max-width:240px;font-size:10px}::slotted(ion-badge){-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px;padding-top:1px;padding-bottom:1px;top:4px;height:auto;font-size:12px;line-height:16px}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:24px}::slotted(ion-icon::before){vertical-align:top}::slotted(ion-label){margin-top:0;margin-bottom:1px;min-height:11px;font-weight:500}:host(.tab-has-label-only) ::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:12px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-label),:host(.tab-layout-icon-start) ::slotted(ion-label),:host(.tab-layout-icon-hide) ::slotted(ion-label){margin-top:2px;margin-bottom:2px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-icon),:host(.tab-layout-icon-start) ::slotted(ion-icon){min-width:24px;height:26px;margin-top:2px;margin-bottom:1px;font-size:24px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:1px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:4px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){top:10px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:calc(50% + 35px)}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:calc(50% + 30px)}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-label-hide) ::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){font-size:30px}',md:':host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:12px;--padding-bottom:0;--padding-start:12px;max-width:168px;font-size:12px;font-weight:normal;letter-spacing:0.03em}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;text-transform:none}::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;-webkit-transform-origin:center center;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}::slotted(ion-badge){border-radius:8px;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;padding-top:3px;padding-bottom:2px;top:8px;min-width:12px;font-size:8px;font-weight:normal}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-badge:empty){display:block;min-width:8px;height:8px}:host(.tab-layout-icon-top) ::slotted(ion-icon){margin-top:6px;margin-bottom:2px}:host(.tab-layout-icon-top) ::slotted(ion-label){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){top:8px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:6px;margin-bottom:0}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){top:16px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:80%}:host(.tab-layout-icon-start) ::slotted(ion-icon){-webkit-margin-end:6px;margin-inline-end:6px}:host(.tab-layout-icon-end) ::slotted(ion-icon){-webkit-margin-start:6px;margin-inline-start:6px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-hide) ::slotted(ion-label),:host(.tab-has-label-only) ::slotted(ion-label){margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){margin-top:0;margin-bottom:0;font-size:24px}'}}},[289,"ion-tab-button",{disabled:[4],download:[1],href:[1],rel:[1],layout:[1025],selected:[1028],tab:[1],target:[1]},[[8,"ionTabBarChanged","onTabBarChanged"]]]),c=b,h=function(){"undefined"!=typeof customElements&&["ion-tab-button","ion-ripple-effect"].forEach((t=>{switch(t){case"ion-tab-button":customElements.get(a(t))||customElements.define(a(t),b);break;case"ion-ripple-effect":customElements.get(a(t))||d()}}))};export{c as IonTabButton,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as inheritAttributes } from './helpers.js';
+import { c as config } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
+import { d as defineCustomElement$2 } from './ripple-effect.js';
+
+const tabButtonIosCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:2px;--padding-bottom:0;--padding-start:2px;max-width:240px;font-size:10px}::slotted(ion-badge){-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px;padding-top:1px;padding-bottom:1px;top:4px;height:auto;font-size:12px;line-height:16px}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:24px}::slotted(ion-icon::before){vertical-align:top}::slotted(ion-label){margin-top:0;margin-bottom:1px;min-height:11px;font-weight:500}:host(.tab-has-label-only) ::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:12px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-label),:host(.tab-layout-icon-start) ::slotted(ion-label),:host(.tab-layout-icon-hide) ::slotted(ion-label){margin-top:2px;margin-bottom:2px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-icon),:host(.tab-layout-icon-start) ::slotted(ion-icon){min-width:24px;height:26px;margin-top:2px;margin-bottom:1px;font-size:24px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:1px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:4px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){top:10px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:calc(50% + 35px)}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:calc(50% + 30px)}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-label-hide) ::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){font-size:30px}";
+
+const tabButtonMdCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:12px;--padding-bottom:0;--padding-start:12px;max-width:168px;font-size:12px;font-weight:normal;letter-spacing:0.03em}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;text-transform:none}::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;-webkit-transform-origin:center center;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}::slotted(ion-badge){border-radius:8px;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;padding-top:3px;padding-bottom:2px;top:8px;min-width:12px;font-size:8px;font-weight:normal}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-badge:empty){display:block;min-width:8px;height:8px}:host(.tab-layout-icon-top) ::slotted(ion-icon){margin-top:6px;margin-bottom:2px}:host(.tab-layout-icon-top) ::slotted(ion-label){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){top:8px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:6px;margin-bottom:0}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){top:16px}:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:80%}:host(.tab-layout-icon-start) ::slotted(ion-icon){-webkit-margin-end:6px;margin-inline-end:6px}:host(.tab-layout-icon-end) ::slotted(ion-icon){-webkit-margin-start:6px;margin-inline-start:6px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-hide) ::slotted(ion-label),:host(.tab-has-label-only) ::slotted(ion-label){margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){margin-top:0;margin-bottom:0;font-size:24px}";
+
+const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionTabButtonClick = createEvent(this, "ionTabButtonClick", 7);
+        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 === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
+            this.selected = this.tab === ev.detail.tab;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+        if (this.layout === undefined) {
+            this.layout = config.get('tabButtonLayout', 'icon-top');
+        }
+    }
+    selectTab(ev) {
+        if (this.tab !== undefined) {
+            if (!this.disabled) {
+                this.ionTabButtonClick.emit({
+                    tab: this.tab,
+                    href: this.href,
+                    selected: this.selected,
+                });
+            }
+            ev.preventDefault();
+        }
+    }
+    get hasLabel() {
+        return !!this.el.querySelector('ion-label');
+    }
+    get hasIcon() {
+        return !!this.el.querySelector('ion-icon');
+    }
+    render() {
+        const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const attrs = {
+            download: this.download,
+            href,
+            rel,
+            target,
+        };
+        return (h(Host, { key: 'ce9d29ced0c781d6b2fa62cd5feb801c11fc42e8', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+                [mode]: true,
+                'tab-selected': selected,
+                'tab-disabled': disabled,
+                'tab-has-label': hasLabel,
+                'tab-has-icon': hasIcon,
+                'tab-has-label-only': hasLabel && !hasIcon,
+                'tab-has-icon-only': hasIcon && !hasLabel,
+                [`tab-layout-${layout}`]: true,
+                'ion-activatable': true,
+                'ion-selectable': true,
+                'ion-focusable': true,
+            } }, h("a", Object.assign({ key: '01cb0ed2e77c5c1a8abd48da1bb07ac1b305d0b6' }, 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: 'd0240c05f42217cfb186b86ff8a0c9cd70b9c8df', class: "button-inner" }, h("slot", { key: '0a20b84925037dbaa8bb4a495b813d3f7c2e58ac' })), mode === 'md' && h("ion-ripple-effect", { key: '4c92c27178cdac89d69cffef8d2c39c3644914e8', type: "unbounded" }))));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: tabButtonIosCss,
+        md: tabButtonMdCss
+    }; }
+}, [289, "ion-tab-button", {
+        "disabled": [4],
+        "download": [1],
+        "href": [1],
+        "rel": [1],
+        "layout": [1025],
+        "selected": [1028],
+        "tab": [1],
+        "target": [1]
+    }, [[8, "ionTabBarChanged", "onTabBarChanged"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-tab-button", "ion-ripple-effect"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-tab-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TabButton);
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IonTabButton = TabButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTabButton, defineCustomElement };