@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/components/ion-skeleton-text.js

@@ -1 +1,59 @@
-import{p as t,H as i,c as e,h as n,d as o,t as a}from"./p-BnQDByf2.js";import{h as r}from"./p-DiVJyqlX.js";import{c as s,g as d}from"./p-CN34uOrj.js";const m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionStyle=e(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=r("ion-avatar",this.el)||r("ion-thumbnail",this.el),e=d(this);return n(o,{key:"4dab0fd2de666de12ad8f6dc6ed1e1de0be67ddd",class:{[e]:!0,"skeleton-text-animated":t,"in-media":i}},n("span",{key:"f8f908ec24d65e63b14d9a54640a5f18f0fa8fa5"}," "))}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;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: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;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@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(a(t))||customElements.define(a(t),m))}))};export{g as IonSkeletonText,c as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ec0e3f3f.js';
+import { h as hostContext } from './p-350e7423.js';
+import { c as config, g as getIonMode } from './p-901c16c5.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;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: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;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
+
+const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    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: '4dab0fd2de666de12ad8f6dc6ed1e1de0be67ddd', class: {
+        [mode]: true,
+        'skeleton-text-animated': animated,
+        'in-media': inMedia,
+      } }, h("span", { key: 'f8f908ec24d65e63b14d9a54640a5f18f0fa8fa5' }, "\u00A0")));
+  }
+  get el() { return this; }
+  static get style() { return skeletonTextCss; }
+}, [1, "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/dist/components/ion-spinner.js

@@ -1 +1,6 @@
-import{a as o,d as s}from"./p-D7YY0NXg.js";const a=o,p=s;export{a as IonSpinner,p as defineCustomElement}
+import { a as Spinner, d as defineCustomElement$1 } from './p-2d7d745d.js';
+
+const IonSpinner = Spinner;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSpinner, defineCustomElement };

package/dist/components/ion-split-pane.js

@@ -1 +1,166 @@
-import{p as e,H as i,c as t,h as s,d as o,t as n}from"./p-BnQDByf2.js";import{g as d}from"./p-CN34uOrj.js";const r="split-pane-main",a="split-pane-side",l={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""},p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ionSplitPaneVisible=t(this,"ionSplitPaneVisible",7),this.visible=!1,this.contentId=void 0,this.disabled=!1,this.when=l.lg}visibleChanged(e){const i={visible:e,isPane:this.isPane.bind(this)};this.ionSplitPaneVisible.emit(i)}async connectedCallback(){"undefined"!=typeof customElements&&null!=customElements&&await customElements.whenDefined("ion-split-pane"),this.styleChildren(),this.updateState()}disconnectedCallback(){this.rmL&&(this.rmL(),this.rmL=void 0)}updateState(){if(this.rmL&&(this.rmL(),this.rmL=void 0),this.disabled)return void(this.visible=!1);const e=this.when;if("boolean"==typeof e)return void(this.visible=e);const i=l[e]||e;if(0===i.length)return void(this.visible=!1);const t=e=>{this.visible=e.matches},s=window.matchMedia(i);s.addListener(t),this.rmL=()=>s.removeListener(t),this.visible=s.matches}isPane(e){return!!this.visible&&e.parentElement===this.el&&e.classList.contains(a)}styleChildren(){const e=this.contentId,i=this.el.children,t=this.el.childElementCount;let s=!1;for(let o=0;o<t;o++){const t=i[o],n=void 0!==e&&t.id===e;if(n){if(s)return void console.warn("split pane cannot have more than one main node");s=!0}h(t,n)}s||console.warn("split pane does not have a specified main node")}render(){const e=d(this);return s(o,{key:"57ee198506248916e74d8d082ad547a471e6cc73",class:{[e]:!0,["split-pane-"+e]:!0,"split-pane-visible":this.visible}},s("slot",{key:"2cd89fa50cfe8a7a6bdda981bb89d5a24a8eec88"}))}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:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}",md:":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}"}}},[289,"ion-split-pane",{contentId:[513,"content-id"],disabled:[4],when:[8],visible:[32]},void 0,{visible:[{visibleChanged:0}],disabled:[{updateState:0}],when:[{updateState:0}]}]),h=(e,i)=>{let t,s;i?(t=r,s=a):(t=a,s=r);const o=e.classList;o.add(t),o.remove(s)},b=p,m=function(){"undefined"!=typeof customElements&&["ion-split-pane"].forEach((e=>{"ion-split-pane"===e&&(customElements.get(n(e))||customElements.define(n(e),p))}))};export{b as IonSplitPane,m as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ec0e3f3f.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
+
+const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
+
+// 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 H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionSplitPaneVisible = createEvent(this, "ionSplitPaneVisible", 7);
+    this.visible = false;
+    this.contentId = undefined;
+    this.disabled = false;
+    this.when = QUERY['lg'];
+  }
+  visibleChanged(visible) {
+    const detail = { visible, isPane: this.isPane.bind(this) };
+    this.ionSplitPaneVisible.emit(detail);
+  }
+  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.styleChildren();
+    this.updateState();
+  }
+  disconnectedCallback() {
+    if (this.rmL) {
+      this.rmL();
+      this.rmL = undefined;
+    }
+  }
+  updateState() {
+    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;
+  }
+  isPane(element) {
+    if (!this.visible) {
+      return false;
+    }
+    return element.parentElement === this.el && element.classList.contains(SPLIT_PANE_SIDE);
+  }
+  styleChildren() {
+    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) {
+          console.warn('split pane cannot have more than one main node');
+          return;
+        }
+        foundMain = true;
+      }
+      setPaneClass(child, isMain);
+    }
+    if (!foundMain) {
+      console.warn('split pane does not have a specified main node');
+    }
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: '57ee198506248916e74d8d082ad547a471e6cc73', class: {
+        [mode]: true,
+        // Used internally for styling
+        [`split-pane-${mode}`]: true,
+        'split-pane-visible': this.visible,
+      } }, h("slot", { key: '2cd89fa50cfe8a7a6bdda981bb89d5a24a8eec88' })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "visible": ["visibleChanged"],
+    "disabled": ["updateState"],
+    "when": ["updateState"]
+  }; }
+  static get style() { return {
+    ios: splitPaneIosCss,
+    md: splitPaneMdCss
+  }; }
+}, [33, "ion-split-pane", {
+    "contentId": [513, "content-id"],
+    "disabled": [4],
+    "when": [8],
+    "visible": [32]
+  }]);
+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/dist/components/ion-tab-bar.js

@@ -1 +1,95 @@
-import{p as o,H as t,c as r,h as a,d as n,t as e}from"./p-BnQDByf2.js";import{c as s}from"./p-DKg_dYcq.js";import{c}from"./p-DiVJyqlX.js";import{g as i}from"./p-CN34uOrj.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.keyboardVisible=!1,this.color=void 0,this.selectedTab=void 0,this.translucent=!1}selectedTabChanged(){void 0!==this.selectedTab&&this.ionTabBarChanged.emit({tab:this.selectedTab})}componentWillLoad(){this.selectedTabChanged()}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()}componentDidLoad(){this.ionTabBarLoaded.emit()}render(){const{color:o,translucent:t,keyboardVisible:r}=this,e=i(this),s=r&&"top"!==this.el.getAttribute("slot");return a(n,{key:"5083528e7f802d2f323ce50585edc98eeb9754c6",role:"tablist","aria-hidden":s?"true":null,class:c(o,{[e]:!0,"tab-bar-translucent":t,"tab-bar-hidden":s})},a("slot",{key:"eb33cdd12da49062219d4aa17a319c3e6361c5c5"}))}get el(){return this}static get watchers(){return{selectedTab:[{selectedTabChanged:0}]}}static get style(){return{ios:":host{display:flex;align-items: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;user-select:none;z-index:10;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, #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, rgba(0, 0, 0, 0.2))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:50px}@supports (backdrop-filter: blur(0)){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);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:flex;align-items: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;user-select:none;z-index:10;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, rgba(0, 0, 0, 0.07))));--color:var(--ion-tab-bar-color, var(--ion-color-step-650, #595959));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:56px}"}}},[289,"ion-tab-bar",{color:[513],selectedTab:[1,"selected-tab"],translucent:[4],keyboardVisible:[32]},void 0,{selectedTab:[{selectedTabChanged:0}]}]),d=b,l=function(){"undefined"!=typeof customElements&&["ion-tab-bar"].forEach((o=>{"ion-tab-bar"===o&&(customElements.get(e(o))||customElements.define(e(o),b))}))};export{d as IonTabBar,l as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ec0e3f3f.js';
+import { c as createKeyboardController } from './p-3e1e3453.js';
+import { c as createColorClasses } from './p-350e7423.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const tabBarIosCss = ":host{display:flex;align-items: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;user-select:none;z-index:10;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, #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, rgba(0, 0, 0, 0.2))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:50px}@supports (backdrop-filter: blur(0)){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);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:flex;align-items: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;user-select:none;z-index:10;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, rgba(0, 0, 0, 0.07))));--color:var(--ion-tab-bar-color, var(--ion-color-step-650, #595959));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:56px}";
+
+const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionTabBarChanged = createEvent(this, "ionTabBarChanged", 7);
+    this.ionTabBarLoaded = createEvent(this, "ionTabBarLoaded", 7);
+    this.keyboardCtrl = null;
+    this.keyboardVisible = false;
+    this.color = undefined;
+    this.selectedTab = undefined;
+    this.translucent = false;
+  }
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.ionTabBarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  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();
+    }
+  }
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+  }
+  render() {
+    const { color, translucent, keyboardVisible } = this;
+    const mode = getIonMode(this);
+    const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
+    return (h(Host, { key: '5083528e7f802d2f323ce50585edc98eeb9754c6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        [mode]: true,
+        'tab-bar-translucent': translucent,
+        'tab-bar-hidden': shouldHide,
+      }) }, h("slot", { key: 'eb33cdd12da49062219d4aa17a319c3e6361c5c5' })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "selectedTab": ["selectedTabChanged"]
+  }; }
+  static get style() { return {
+    ios: tabBarIosCss,
+    md: tabBarMdCss
+  }; }
+}, [33, "ion-tab-bar", {
+    "color": [513],
+    "selectedTab": [1, "selected-tab"],
+    "translucent": [4],
+    "keyboardVisible": [32]
+  }]);
+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/dist/components/ion-tab-button.js

@@ -1 +1,125 @@
-import{p as t,H as o,c as e,h as i,d as n,t as a}from"./p-BnQDByf2.js";import{c as s}from"./p-BwKjt_Dc.js";import{c as l,g as r}from"./p-CN34uOrj.js";import{d}from"./p-B5XH2zAk.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.onKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.selectTab(t)},this.onClick=t=>{this.selectTab(t)},this.disabled=!1,this.download=void 0,this.href=void 0,this.rel=void 0,this.layout=void 0,this.selected=!1,this.tab=void 0,this.target=void 0}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({},s(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:s,target:l,layout:d,selected:b,tab:h,inheritedAttributes:c}=this,p=r(this),g={download:this.download,href:a,rel:s,target:l};return i(n,{key:"c7b6a72766b71f34800137dadcf29af657bebddf",onClick:this.onClick,onKeyup:this.onKeyUp,id:void 0!==h?"tab-button-"+h: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:"a1eca4a5cf0dfdb55099811d03f204f7b3807a2e"},g,{class:"button-native",part:"native",role:"tab","aria-selected":b?"true":null,"aria-disabled":t?"true":null,tabindex:t?"-1":void 0},c),i("span",{key:"888a6d8b95c2f0ca8f74f492729bd28f0d3273d5",class:"button-inner"},i("slot",{key:"83a234af52ffce9ff0f4cc497712c962115a5813"})),"md"===p&&i("ion-ripple-effect",{key:"771aff1b83233411e0cf706c3e94c78bca534794",type:"unbounded"})))}get el(){return this}static get style(){return{ios:':host{--ripple-color:var(--color-selected);--background-focused-opacity:1;flex:1;flex-direction:column;align-items: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:flex;position:relative;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;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:flex;position:relative;flex-flow:inherit;align-items: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;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}::slotted(ion-label){order:0}::slotted(ion-icon){order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){flex-direction:row}:host(.tab-layout-icon-end){flex-direction:row-reverse}:host(.tab-layout-icon-bottom){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}@supports (inset-inline-start: 0){::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}}@supports not (inset-inline-start: 0){::slotted(ion-badge){left:calc(50% + 6px)}:host-context([dir=rtl]) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}[dir=rtl] ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}@supports selector(:dir(rtl)){::slotted(ion-badge):dir(rtl){left:unset;right:unset;right:calc(50% + 6px)}}}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:30px}::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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){left:calc(50% + 12px)}:host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 12px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:calc(50% + 35px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){left:calc(50% + 35px)}:host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 35px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge),:host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 35px)}}}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:10px}@supports (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:calc(50% + 30px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){left:calc(50% + 30px)}:host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge),:host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 30px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge),:host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}',md:':host{--ripple-color:var(--color-selected);--background-focused-opacity:1;flex:1;flex-direction:column;align-items: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:flex;position:relative;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;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:flex;position:relative;flex-flow:inherit;align-items: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;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}::slotted(ion-label){order:0}::slotted(ion-icon){order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){flex-direction:row}:host(.tab-layout-icon-end){flex-direction:row-reverse}:host(.tab-layout-icon-bottom){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;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){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}@supports (inset-inline-start: 0){::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}}@supports not (inset-inline-start: 0){::slotted(ion-badge){left:calc(50% + 6px)}:host-context([dir=rtl]) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}[dir=rtl] ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}@supports selector(:dir(rtl)){::slotted(ion-badge):dir(rtl){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){left:70%}:host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge){left:unset;right:unset;right:70%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:80%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){left:80%}:host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge){left:unset;right:unset;right:80%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge),:host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:70%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){left:70%}:host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge),:host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge){left:unset;right:unset;right:70%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge),:host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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"]]]),h=b,c=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{h as IonTabButton,c as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ec0e3f3f.js';
+import { d as inheritAttributes } from './p-2bb89b46.js';
+import { c as config, g as getIonMode } from './p-901c16c5.js';
+import { d as defineCustomElement$2 } from './p-51c44f42.js';
+
+const tabButtonIosCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;flex:1;flex-direction:column;align-items: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:flex;position:relative;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;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:flex;position:relative;flex-flow:inherit;align-items: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;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}::slotted(ion-label){order:0}::slotted(ion-icon){order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){flex-direction:row}:host(.tab-layout-icon-end){flex-direction:row-reverse}:host(.tab-layout-icon-bottom){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}@supports (inset-inline-start: 0){::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}}@supports not (inset-inline-start: 0){::slotted(ion-badge){left:calc(50% + 6px)}:host-context([dir=rtl]) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}[dir=rtl] ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}@supports selector(:dir(rtl)){::slotted(ion-badge):dir(rtl){left:unset;right:unset;right:calc(50% + 6px)}}}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:30px}::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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){left:calc(50% + 12px)}:host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 12px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:calc(50% + 35px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){left:calc(50% + 35px)}:host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 35px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge),:host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 35px)}}}:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){top:10px}@supports (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:calc(50% + 30px)}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){left:calc(50% + 30px)}:host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge),:host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 30px)}@supports selector(:dir(rtl)){:host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge),:host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}";
+
+const tabButtonMdCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;flex:1;flex-direction:column;align-items: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:flex;position:relative;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;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:flex;position:relative;flex-flow:inherit;align-items: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;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}::slotted(ion-label){order:0}::slotted(ion-icon){order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){flex-direction:row}:host(.tab-layout-icon-end){flex-direction:row-reverse}:host(.tab-layout-icon-bottom){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;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){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}@supports (inset-inline-start: 0){::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}}@supports not (inset-inline-start: 0){::slotted(ion-badge){left:calc(50% + 6px)}:host-context([dir=rtl]) ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}[dir=rtl] ::slotted(ion-badge){left:unset;right:unset;right:calc(50% + 6px)}@supports selector(:dir(rtl)){::slotted(ion-badge):dir(rtl){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-bottom) ::slotted(ion-badge){left:70%}:host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge){left:unset;right:unset;right:70%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){inset-inline-start:80%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-start) ::slotted(ion-badge),:host(.tab-layout-icon-end) ::slotted(ion-badge){left:80%}:host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge){left:unset;right:unset;right:80%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge),:host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){inset-inline-start:70%}}@supports not (inset-inline-start: 0){:host(.tab-layout-icon-hide) ::slotted(ion-badge),:host(.tab-has-label-only) ::slotted(ion-badge){left:70%}:host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge),:host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge),:host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge),:host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge){left:unset;right:unset;right:70%}@supports selector(:dir(rtl)){:host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge),:host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge){left:unset;right:unset;right: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 H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionTabButtonClick = createEvent(this, "ionTabButtonClick", 7);
+    this.inheritedAttributes = {};
+    this.onKeyUp = (ev) => {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        this.selectTab(ev);
+      }
+    };
+    this.onClick = (ev) => {
+      this.selectTab(ev);
+    };
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.rel = undefined;
+    this.layout = undefined;
+    this.selected = false;
+    this.tab = undefined;
+    this.target = undefined;
+  }
+  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: 'c7b6a72766b71f34800137dadcf29af657bebddf', 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: 'a1eca4a5cf0dfdb55099811d03f204f7b3807a2e' }, 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: '888a6d8b95c2f0ca8f74f492729bd28f0d3273d5', class: "button-inner" }, h("slot", { key: '83a234af52ffce9ff0f4cc497712c962115a5813' })), mode === 'md' && h("ion-ripple-effect", { key: '771aff1b83233411e0cf706c3e94c78bca534794', type: "unbounded" }))));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: tabButtonIosCss,
+    md: tabButtonMdCss
+  }; }
+}, [33, "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 };

package/dist/components/ion-tab.js

@@ -1 +1,80 @@
-import{p as t,H as e,h as i,d as a,t as s}from"./p-BnQDByf2.js";import{a as n}from"./p-Bx78uXfc.js";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.loaded=!1,this.active=!1,this.delegate=void 0,this.tab=void 0,this.component=void 0}async componentWillLoad(){this.active&&await this.setActive()}async setActive(){await this.prepareLazyLoaded(),this.active=!0}changeActive(t){t&&this.prepareLazyLoaded()}prepareLazyLoaded(){if(!this.loaded&&null!=this.component){this.loaded=!0;try{return n(this.delegate,this.el,this.component,["ion-page"])}catch(t){console.error(t)}}return Promise.resolve(void 0)}render(){const{tab:t,active:e,component:s}=this;return i(a,{key:"4fe50fa809503794be2ef91383e49b72cad6fa82",role:"tabpanel","aria-hidden":e?null:"true","aria-labelledby":"tab-button-"+t,class:{"ion-page":void 0===s,"tab-hidden":!e}},i("slot",{key:"937777a826936d6b399329a926a704008339803e"}))}get el(){return this}static get watchers(){return{active:[{changeActive:0}]}}static get style(){return":host(.tab-hidden){display:none !important}"}},[257,"ion-tab",{active:[1028],delegate:[16],tab:[1],component:[1],setActive:[64]},void 0,{active:[{changeActive:0}]}]),c=o,r=function(){"undefined"!=typeof customElements&&["ion-tab"].forEach((t=>{"ion-tab"===t&&(customElements.get(s(t))||customElements.define(s(t),o))}))};export{c as IonTab,r as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host } from './p-ec0e3f3f.js';
+import { a as attachComponent } from './p-76525f0f.js';
+
+const tabCss = ":host(.tab-hidden){display:none !important}";
+
+const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.loaded = false;
+    this.active = false;
+    this.delegate = undefined;
+    this.tab = undefined;
+    this.component = undefined;
+  }
+  async componentWillLoad() {
+    if (this.active) {
+      await this.setActive();
+    }
+  }
+  /** Set the active component for the tab */
+  async setActive() {
+    await this.prepareLazyLoaded();
+    this.active = true;
+  }
+  changeActive(isActive) {
+    if (isActive) {
+      this.prepareLazyLoaded();
+    }
+  }
+  prepareLazyLoaded() {
+    if (!this.loaded && this.component != null) {
+      this.loaded = true;
+      try {
+        return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+      }
+      catch (e) {
+        console.error(e);
+      }
+    }
+    return Promise.resolve(undefined);
+  }
+  render() {
+    const { tab, active, component } = this;
+    return (h(Host, { key: '4fe50fa809503794be2ef91383e49b72cad6fa82', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        'ion-page': component === undefined,
+        'tab-hidden': !active,
+      } }, h("slot", { key: '937777a826936d6b399329a926a704008339803e' })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "active": ["changeActive"]
+  }; }
+  static get style() { return tabCss; }
+}, [1, "ion-tab", {
+    "active": [1028],
+    "delegate": [16],
+    "tab": [1],
+    "component": [1],
+    "setActive": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tab);
+      }
+      break;
+  } });
+}
+
+const IonTab = Tab;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTab, defineCustomElement };