@ionic/core 8.8.16-dev.11784841344.1aa1a41c → 8.8.16-dev.11784914346.10d0804c

package/dist/ionic/{p-a797625e.entry.js → p-d272ff4f.entry.js}

@@ -1,4 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{r as e,c as t,e as i,j as n,h as o,d as r,g as a}from"./p-C0EQceqV.js";import{g as s}from"./p-hHmYLOfE.js";import{o as d,B as h,n as l,q as m,G as p}from"./p-Dy243NXW.js";import{G as c}from"./p-BTEOs1at.js";import{b as u,a as b,c as f,s as g}from"./p-CnAWnbNK.js";import{p as v,i as x,l as w,e as k}from"./p-CEkwLb3L.js";import{m as y}from"./p-CB91Gr9M.js";import{h as z,c as C}from"./p-DaJxRxSQ.js";import{l as j}from"./p-Dhi5xtNS.js";import{u as S,v as A}from"./p-1y3VhUSy.js";import"./p-lMb_45ax.js";import"./p-vXpMhGrs.js";import"./p-CJsJQPQD.js";const E=class{constructor(i){e(this,i),this.ionWillOpen=t(this,"ionWillOpen",7),this.ionWillClose=t(this,"ionWillClose",7),this.ionDidOpen=t(this,"ionDidOpen",7),this.ionDidClose=t(this,"ionDidClose",7),this.ionMenuChange=t(this,"ionMenuChange",7),this.lastOnEnd=0,this.blocker=c.createBlocker({disableScroll:!0}),this.didLoad=!1,this.operationCancelled=!1,this.isAnimating=!1,this._isOpen=!1,this.inheritedAttributes={},this.handleFocus=e=>{const t=d(document);t&&!t.contains(this.el)||this.trapKeyboardFocus(e,document)},this.isPaneVisible=!1,this.isEndSide=!1,this.disabled=!1,this.side="start",this.swipeGesture=!0,this.maxEdgeStart=50}typeChanged(e,t){const i=this.contentEl;i&&(void 0!==t&&i.classList.remove(`menu-content-${t}`),i.classList.add(`menu-content-${e}`),i.removeAttribute("style")),this.menuInnerEl&&this.menuInnerEl.removeAttribute("style"),this.animation=void 0}disabledChanged(){this.updateState(),this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}sideChanged(){this.isEndSide=v(this.side),this.animation=void 0}swipeGestureChanged(){this.updateState()}async connectedCallback(){"undefined"!=typeof customElements&&null!=customElements&&await customElements.whenDefined("ion-menu"),void 0===this.type&&(this.type=i.get("menuType","overlay"));const e=void 0!==this.contentId?document.getElementById(this.contentId):null;null!==e?(this.el.contains(e)&&n('[ion-menu] - The "contentId" should refer to the main view\'s ion-content, not the ion-content inside of the ion-menu.'),this.contentEl=e,e.classList.add("menu-content"),this.typeChanged(this.type,void 0),this.sideChanged(),y._register(this),this.menuChanged(),this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:document,gestureName:"menu-swipe",gesturePriority:30,threshold:10,blurOnStart:!0,canStart:e=>this.canStart(e),onWillStart:()=>this.onWillStart(),onStart:()=>this.onStart(),onMove:e=>this.onMove(e),onEnd:e=>this.onEnd(e)}),this.updateState()):n('[ion-menu] - Must have a "content" element to listen for drag events on.')}componentWillLoad(){this.inheritedAttributes=x(this.el)}async componentDidLoad(){this.didLoad=!0;const e=this.el.closest("ion-split-pane");null!==e&&(this.isPaneVisible=await e.isVisible()),this.menuChanged(),this.updateState()}menuChanged(){this.didLoad&&this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}async disconnectedCallback(){await this.close(!1),this.blocker.destroy(),y._unregister(this),this.animation&&this.animation.destroy(),this.gesture&&(this.gesture.destroy(),this.gesture=void 0),this.animation=void 0,this.contentEl=void 0}onSplitPaneChanged(e){const t=this.el.closest("ion-split-pane");null!==t&&t===e.target&&(this.isPaneVisible=e.detail.visible,this.updateState())}onBackdropClick(e){this._isOpen&&this.lastOnEnd<e.timeStamp-100&&e.composedPath&&!e.composedPath().includes(this.menuInnerEl)&&(e.preventDefault(),e.stopPropagation(),this.close(void 0,h))}onKeydown(e){"Escape"===e.key&&this.close(void 0,h)}isOpen(){return Promise.resolve(this._isOpen)}isActive(){return Promise.resolve(this._isActive())}open(e=!0){return this.setOpen(!0,e)}close(e=!0,t){return this.setOpen(!1,e,t)}toggle(e=!0){return this.setOpen(!this._isOpen,e)}setOpen(e,t=!0,i){var n;return null===(n=document.activeElement)||void 0===n||n.blur(),y._setOpen(this,e,t,i)}trapKeyboardFocus(e,t){const i=e.target;if(i)if(this.el.contains(i))this.lastFocus=i;else{const{el:e}=this;l(e),this.lastFocus===t.activeElement&&m(e)}}async _setOpen(e,t=!0,i){return!(!this._isActive()||this.isAnimating||e===this._isOpen||(this.beforeAnimation(e,i),await this.loadAnimation(),await this.startAnimation(e,t),this.operationCancelled?(this.operationCancelled=!1,1):(this.afterAnimation(e,i),0)))}async loadAnimation(){const e=this.menuInnerEl.offsetWidth,t=v(this.side);if(e===this.width&&void 0!==this.animation&&t===this.isEndSide)return;this.width=e,this.isEndSide=t,this.animation&&(this.animation.destroy(),this.animation=void 0);const n=this.animation=await y._createAnimation(this.type,this);i.getBoolean("animated",!0)||n.duration(0),n.fill("both")}async startAnimation(e,t){const i=!e,n=u(this),o="ios"===n?"cubic-bezier(0.32,0.72,0,1)":"cubic-bezier(0.0,0.0,0.2,1)",r="ios"===n?"cubic-bezier(1, 0, 0.68, 0.28)":"cubic-bezier(0.4, 0, 0.6, 1)",a=this.animation.direction(i?"reverse":"normal").easing(i?r:o);t?await a.play():a.play({sync:!0}),"reverse"===a.getDirection()&&a.direction("normal")}_isActive(){return!this.disabled&&!this.isPaneVisible}canSwipe(){return this.swipeGesture&&!this.isAnimating&&this._isActive()}canStart(e){return!(document.querySelector("ion-modal.show-modal")||!this.canSwipe())&&(!!this._isOpen||!y._getOpenSync()&&O(window,e.currentX,this.isEndSide,this.maxEdgeStart))}onWillStart(){return this.beforeAnimation(!this._isOpen,p),this.loadAnimation()}onStart(){this.isAnimating&&this.animation?this.animation.progressStart(!0,this._isOpen?1:0):w(!1,"isAnimating has to be true")}onMove(e){if(!this.isAnimating||!this.animation)return void w(!1,"isAnimating has to be true");const t=D(e.deltaX,this._isOpen,this.isEndSide)/this.width;this.animation.progressStep(this._isOpen?1-t:t)}onEnd(e){if(!this.isAnimating||!this.animation)return void w(!1,"isAnimating has to be true");const t=this._isOpen,i=this.isEndSide,n=D(e.deltaX,t,i),o=this.width,r=n/o,a=e.velocityX,d=o/2,h=a>=0&&(a>.2||e.deltaX>d),l=a<=0&&(a<-.2||e.deltaX<-d),m=t?i?h:l:i?l:h;let c=!t&&m;t&&!m&&(c=!0),this.lastOnEnd=e.currentTime;let u=m?.001:-.001;u+=s([0,0],[.4,0],[.6,1],[1,1],k(0,r<0?.01:r,.9999))[0]||0;const b=this._isOpen?!m:m;this.animation.easing("cubic-bezier(0.4, 0.0, 0.6, 1)").onFinish((()=>this.afterAnimation(c,p)),{oneTimeCallback:!0}).progressEnd(b?1:0,this._isOpen?1-u:u,300)}beforeAnimation(e,t){w(!this.isAnimating,"_before() should not be called while animating"),b("android")&&this.el.setAttribute("aria-hidden","true"),this.el.classList.add(W),this.el.setAttribute("tabindex","0"),this.backdropEl&&this.backdropEl.classList.add(_),this.contentEl&&(this.contentEl.classList.add(M),this.contentEl.setAttribute("aria-hidden","true")),this.blocker.block(),this.isAnimating=!0,e?this.ionWillOpen.emit():this.ionWillClose.emit({role:t})}afterAnimation(e,t){var i;this._isOpen=e,this.isAnimating=!1,this._isOpen||this.blocker.unblock(),e?(b("android")&&this.el.removeAttribute("aria-hidden"),this.ionDidOpen.emit(),(null===(i=document.activeElement)||void 0===i?void 0:i.closest("ion-menu"))!==this.el&&this.el.focus(),document.addEventListener("focus",this.handleFocus,!0)):(this.el.removeAttribute("aria-hidden"),this.el.classList.remove(W),this.el.removeAttribute("tabindex"),this.contentEl&&(this.contentEl.classList.remove(M),this.contentEl.removeAttribute("aria-hidden")),this.backdropEl&&this.backdropEl.classList.remove(_),this.animation&&this.animation.stop(),this.ionDidClose.emit({role:t}),document.removeEventListener("focus",this.handleFocus,!0))}updateState(){const e=this._isActive();this.gesture&&this.gesture.enable(e&&this.swipeGesture),e||(this.isAnimating&&(this.operationCancelled=!0),this.afterAnimation(!1,p))}render(){const{type:e,disabled:t,el:i,isPaneVisible:n,inheritedAttributes:a,side:s}=this,d=f(this);return o(r,{key:"76e15d710fbbbd2e64795224decc3673fd160db0",onKeyDown:g()?null:this.onKeydown,role:"navigation","aria-label":a["aria-label"]||"menu",class:{[d]:!0,[`menu-type-${e}`]:!0,"menu-enabled":!t,[`menu-side-${s}`]:!0,"menu-pane-visible":n,"split-pane-side":z("ion-split-pane",i)}},o("div",{key:"cc0a0773caff97aefa98015bf3e36631173d2b4f",class:"menu-inner",part:"container",ref:e=>this.menuInnerEl=e},o("slot",{key:"0b90d1248bdf3bedafda7913189635c8d010abb6"})),o("ion-backdrop",{key:"4fb7013bc61161e6e336541ed25605219410f749",ref:e=>this.backdropEl=e,class:"menu-backdrop",tappable:!1,stopPropagation:!1,part:"backdrop"}))}get el(){return a(this)}static get watchers(){return{type:[{typeChanged:0}],disabled:[{disabledChanged:0}],side:[{sideChanged:0}],swipeGesture:[{swipeGestureChanged:0}]}}},D=(e,t,i)=>Math.max(0,t!==i?-e:e),O=(e,t,i,n)=>i?t>=e.innerWidth-n:t<=n,W="show-menu",_="show-backdrop",M="menu-content-open";E.style={ionic:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}",ios:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}",md:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}"};const X=async e=>{const t=await y.get(e);return!(!t||!await t.isActive())},G=class{constructor(t){e(this,t),this.inheritedAttributes={},this.visible=!1,this.disabled=!1,this.autoHide=!0,this.type="button",this.onClick=async()=>y.toggle(this.menu)}componentWillLoad(){this.inheritedAttributes=x(this.el)}componentDidLoad(){this.visibilityChanged()}async visibilityChanged(){this.visible=await X(this.menu)}get menuIcon(){const e=f(this),t={ios:A,ionic:j,md:S};return i.get("menuIcon",t[e]||t.md)}render(){const{color:e,disabled:t,inheritedAttributes:i,menuIcon:n}=this,a=f(this),s=this.autoHide&&!this.visible,d={type:this.type},h=i["aria-label"]||"menu";return o(r,{key:"341ca3bfac81ce4432eef5d2fd738becd1dfb07e",onClick:this.onClick,"aria-disabled":t?"true":null,"aria-hidden":s?"true":null,class:C(e,{[a]:!0,button:!0,"menu-button-hidden":s,"menu-button-disabled":t,"in-toolbar":z("ion-toolbar",this.el),"in-toolbar-color":z("ion-toolbar[color]",this.el),"ion-activatable":!0,"ion-focusable":!0})},o("button",Object.assign({key:"6e6229df2fc1f2d18294a5fbf7fe71e7dd47666a"},d,{disabled:t,class:"button-native",part:"native","aria-label":h}),o("span",{key:"0216acbf67d7aa5edc52328f7ded4cb98bc8a237",class:"button-inner"},o("slot",{key:"5c2cdae42add9a25d3e6323048fcbc6b5fc9b32e"},o("ion-icon",{key:"5b38c283957cd2f1ad659427dec612fc84fc054f",part:"icon",icon:n,lazy:!1,"aria-hidden":"true"}))),"md"===a&&o("ion-ripple-effect",{key:"adabe4ffa1d66fe36d55294d774db9c4bba1ad76",type:"unbounded"})))}get el(){return a(this)}};G.style={ionic:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-focused:currentColor;--background-focused-opacity:0.12;--background-hover:currentColor;--background-hover-opacity:0.04;--border-radius:initial;--color:initial;--padding-start:0;--padding-end:0;position:relative;width:var(--token-scale-1000, 40px);height:var(--token-scale-1000, 40px);font-size:var(--token-font-size-600, 1.5rem)}',ios:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host{--background-focused:currentColor;--background-focused-opacity:0.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--padding-start:5px;--padding-end:5px;min-height:32px;font-size:clamp(31px, 1.9375rem, 38.13px)}:host(.ion-activated){opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}',md:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host{--background-focused:currentColor;--background-focused-opacity:0.12;--background-hover:currentColor;--background-hover-opacity:0.04;--border-radius:50%;--color:initial;--padding-start:8px;--padding-end:8px;width:3rem;height:3rem;font-size:1.5rem}:host(.ion-color.ion-focused)::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}'};const L=class{constructor(t){e(this,t),this.visible=!1,this.autoHide=!0,this.onClick=()=>y.toggle(this.menu)}connectedCallback(){this.visibilityChanged()}async visibilityChanged(){this.visible=await X(this.menu)}render(){const e=f(this),t=this.autoHide&&!this.visible;return o(r,{key:"9ef631d9ae370a8740e691d281863203bfdddc38",onClick:this.onClick,"aria-hidden":t?"true":null,class:{[e]:!0,"menu-toggle-hidden":t}},o("slot",{key:"f8d9dfc562ed625ae47ec771ef6b2ea04bc463f4"}))}};L.style=":host(.menu-toggle-hidden){display:none}";export{E as ion_menu,G as ion_menu_button,L as ion_menu_toggle}
+import{r as e,c as t,e as i,j as n,h as o,d as r,g as a}from"./p-C0EQceqV.js";import{g as s}from"./p-hHmYLOfE.js";import{o as d,B as h,n as l,q as m,G as p}from"./p-Dy243NXW.js";import{G as c}from"./p-BTEOs1at.js";import{b as u,a as b,c as f,s as g}from"./p-CnAWnbNK.js";import{p as v,i as x,l as w,e as k}from"./p-CEkwLb3L.js";import{m as y}from"./p-CB91Gr9M.js";import{h as z,c as C}from"./p-DaJxRxSQ.js";import{l as j}from"./p-Dhi5xtNS.js";import{u as S,v as A}from"./p-D2tu5BUg.js";import"./p-lMb_45ax.js";import"./p-vXpMhGrs.js";import"./p-CJsJQPQD.js";const D=class{constructor(i){e(this,i),this.ionWillOpen=t(this,"ionWillOpen",7),this.ionWillClose=t(this,"ionWillClose",7),this.ionDidOpen=t(this,"ionDidOpen",7),this.ionDidClose=t(this,"ionDidClose",7),this.ionMenuChange=t(this,"ionMenuChange",7),this.lastOnEnd=0,this.blocker=c.createBlocker({disableScroll:!0}),this.didLoad=!1,this.operationCancelled=!1,this.isAnimating=!1,this._isOpen=!1,this.inheritedAttributes={},this.handleFocus=e=>{const t=d(document);t&&!t.contains(this.el)||this.trapKeyboardFocus(e,document)},this.isPaneVisible=!1,this.isEndSide=!1,this.disabled=!1,this.side="start",this.swipeGesture=!0,this.maxEdgeStart=50}typeChanged(e,t){const i=this.contentEl;i&&(void 0!==t&&i.classList.remove(`menu-content-${t}`),i.classList.add(`menu-content-${e}`),i.removeAttribute("style")),this.menuInnerEl&&this.menuInnerEl.removeAttribute("style"),this.animation=void 0}disabledChanged(){this.updateState(),this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}sideChanged(){this.isEndSide=v(this.side),this.animation=void 0}swipeGestureChanged(){this.updateState()}async connectedCallback(){"undefined"!=typeof customElements&&null!=customElements&&await customElements.whenDefined("ion-menu"),void 0===this.type&&(this.type=i.get("menuType","overlay"));const e=void 0!==this.contentId?document.getElementById(this.contentId):null;null!==e?(this.el.contains(e)&&n('[ion-menu] - The "contentId" should refer to the main view\'s ion-content, not the ion-content inside of the ion-menu.'),this.contentEl=e,e.classList.add("menu-content"),this.typeChanged(this.type,void 0),this.sideChanged(),y._register(this),this.menuChanged(),this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:document,gestureName:"menu-swipe",gesturePriority:30,threshold:10,blurOnStart:!0,canStart:e=>this.canStart(e),onWillStart:()=>this.onWillStart(),onStart:()=>this.onStart(),onMove:e=>this.onMove(e),onEnd:e=>this.onEnd(e)}),this.updateState()):n('[ion-menu] - Must have a "content" element to listen for drag events on.')}componentWillLoad(){this.inheritedAttributes=x(this.el)}async componentDidLoad(){this.didLoad=!0;const e=this.el.closest("ion-split-pane");null!==e&&(this.isPaneVisible=await e.isVisible()),this.menuChanged(),this.updateState()}menuChanged(){this.didLoad&&this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}async disconnectedCallback(){await this.close(!1),this.blocker.destroy(),y._unregister(this),this.animation&&this.animation.destroy(),this.gesture&&(this.gesture.destroy(),this.gesture=void 0),this.animation=void 0,this.contentEl=void 0}onSplitPaneChanged(e){const t=this.el.closest("ion-split-pane");null!==t&&t===e.target&&(this.isPaneVisible=e.detail.visible,this.updateState())}onBackdropClick(e){this._isOpen&&this.lastOnEnd<e.timeStamp-100&&e.composedPath&&!e.composedPath().includes(this.menuInnerEl)&&(e.preventDefault(),e.stopPropagation(),this.close(void 0,h))}onKeydown(e){"Escape"===e.key&&this.close(void 0,h)}isOpen(){return Promise.resolve(this._isOpen)}isActive(){return Promise.resolve(this._isActive())}open(e=!0){return this.setOpen(!0,e)}close(e=!0,t){return this.setOpen(!1,e,t)}toggle(e=!0){return this.setOpen(!this._isOpen,e)}setOpen(e,t=!0,i){var n;return null===(n=document.activeElement)||void 0===n||n.blur(),y._setOpen(this,e,t,i)}trapKeyboardFocus(e,t){const i=e.target;if(i)if(this.el.contains(i))this.lastFocus=i;else{const{el:e}=this;l(e),this.lastFocus===t.activeElement&&m(e)}}async _setOpen(e,t=!0,i){return!(!this._isActive()||this.isAnimating||e===this._isOpen||(this.beforeAnimation(e,i),await this.loadAnimation(),await this.startAnimation(e,t),this.operationCancelled?(this.operationCancelled=!1,1):(this.afterAnimation(e,i),0)))}async loadAnimation(){const e=this.menuInnerEl.offsetWidth,t=v(this.side);if(e===this.width&&void 0!==this.animation&&t===this.isEndSide)return;this.width=e,this.isEndSide=t,this.animation&&(this.animation.destroy(),this.animation=void 0);const n=this.animation=await y._createAnimation(this.type,this);i.getBoolean("animated",!0)||n.duration(0),n.fill("both")}async startAnimation(e,t){const i=!e,n=u(this),o="ios"===n?"cubic-bezier(0.32,0.72,0,1)":"cubic-bezier(0.0,0.0,0.2,1)",r="ios"===n?"cubic-bezier(1, 0, 0.68, 0.28)":"cubic-bezier(0.4, 0, 0.6, 1)",a=this.animation.direction(i?"reverse":"normal").easing(i?r:o);t?await a.play():a.play({sync:!0}),"reverse"===a.getDirection()&&a.direction("normal")}_isActive(){return!this.disabled&&!this.isPaneVisible}canSwipe(){return this.swipeGesture&&!this.isAnimating&&this._isActive()}canStart(e){return!(document.querySelector("ion-modal.show-modal")||!this.canSwipe())&&(!!this._isOpen||!y._getOpenSync()&&O(window,e.currentX,this.isEndSide,this.maxEdgeStart))}onWillStart(){return this.beforeAnimation(!this._isOpen,p),this.loadAnimation()}onStart(){this.isAnimating&&this.animation?this.animation.progressStart(!0,this._isOpen?1:0):w(!1,"isAnimating has to be true")}onMove(e){if(!this.isAnimating||!this.animation)return void w(!1,"isAnimating has to be true");const t=E(e.deltaX,this._isOpen,this.isEndSide)/this.width;this.animation.progressStep(this._isOpen?1-t:t)}onEnd(e){if(!this.isAnimating||!this.animation)return void w(!1,"isAnimating has to be true");const t=this._isOpen,i=this.isEndSide,n=E(e.deltaX,t,i),o=this.width,r=n/o,a=e.velocityX,d=o/2,h=a>=0&&(a>.2||e.deltaX>d),l=a<=0&&(a<-.2||e.deltaX<-d),m=t?i?h:l:i?l:h;let c=!t&&m;t&&!m&&(c=!0),this.lastOnEnd=e.currentTime;let u=m?.001:-.001;u+=s([0,0],[.4,0],[.6,1],[1,1],k(0,r<0?.01:r,.9999))[0]||0;const b=this._isOpen?!m:m;this.animation.easing("cubic-bezier(0.4, 0.0, 0.6, 1)").onFinish((()=>this.afterAnimation(c,p)),{oneTimeCallback:!0}).progressEnd(b?1:0,this._isOpen?1-u:u,300)}beforeAnimation(e,t){w(!this.isAnimating,"_before() should not be called while animating"),b("android")&&this.el.setAttribute("aria-hidden","true"),this.el.classList.add(W),this.el.setAttribute("tabindex","0"),this.backdropEl&&this.backdropEl.classList.add(_),this.contentEl&&(this.contentEl.classList.add(M),this.contentEl.setAttribute("aria-hidden","true")),this.blocker.block(),this.isAnimating=!0,e?this.ionWillOpen.emit():this.ionWillClose.emit({role:t})}afterAnimation(e,t){var i;this._isOpen=e,this.isAnimating=!1,this._isOpen||this.blocker.unblock(),e?(b("android")&&this.el.removeAttribute("aria-hidden"),this.ionDidOpen.emit(),(null===(i=document.activeElement)||void 0===i?void 0:i.closest("ion-menu"))!==this.el&&this.el.focus(),document.addEventListener("focus",this.handleFocus,!0)):(this.el.removeAttribute("aria-hidden"),this.el.classList.remove(W),this.el.removeAttribute("tabindex"),this.contentEl&&(this.contentEl.classList.remove(M),this.contentEl.removeAttribute("aria-hidden")),this.backdropEl&&this.backdropEl.classList.remove(_),this.animation&&this.animation.stop(),this.ionDidClose.emit({role:t}),document.removeEventListener("focus",this.handleFocus,!0))}updateState(){const e=this._isActive();this.gesture&&this.gesture.enable(e&&this.swipeGesture),e||(this.isAnimating&&(this.operationCancelled=!0),this.afterAnimation(!1,p))}render(){const{type:e,disabled:t,el:i,isPaneVisible:n,inheritedAttributes:a,side:s}=this,d=f(this);return o(r,{key:"76e15d710fbbbd2e64795224decc3673fd160db0",onKeyDown:g()?null:this.onKeydown,role:"navigation","aria-label":a["aria-label"]||"menu",class:{[d]:!0,[`menu-type-${e}`]:!0,"menu-enabled":!t,[`menu-side-${s}`]:!0,"menu-pane-visible":n,"split-pane-side":z("ion-split-pane",i)}},o("div",{key:"cc0a0773caff97aefa98015bf3e36631173d2b4f",class:"menu-inner",part:"container",ref:e=>this.menuInnerEl=e},o("slot",{key:"0b90d1248bdf3bedafda7913189635c8d010abb6"})),o("ion-backdrop",{key:"4fb7013bc61161e6e336541ed25605219410f749",ref:e=>this.backdropEl=e,class:"menu-backdrop",tappable:!1,stopPropagation:!1,part:"backdrop"}))}get el(){return a(this)}static get watchers(){return{type:[{typeChanged:0}],disabled:[{disabledChanged:0}],side:[{sideChanged:0}],swipeGesture:[{swipeGestureChanged:0}]}}},E=(e,t,i)=>Math.max(0,t!==i?-e:e),O=(e,t,i,n)=>i?t>=e.innerWidth-n:t<=n,W="show-menu",_="show-backdrop",M="menu-content-open";D.style={ionic:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}",ios:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}",md:":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);right:0;left:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){right:0;left:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{right:0;left:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}"};const X=async e=>{const t=await y.get(e);return!(!t||!await t.isActive())},G=class{constructor(t){e(this,t),this.inheritedAttributes={},this.visible=!1,this.disabled=!1,this.autoHide=!0,this.type="button",this.onClick=async()=>y.toggle(this.menu)}componentWillLoad(){this.inheritedAttributes=x(this.el)}componentDidLoad(){this.visibilityChanged()}async visibilityChanged(){this.visible=await X(this.menu)}get menuIcon(){const e=f(this),t={ios:A,ionic:j,md:S};return i.get("menuIcon",t[e]||t.md)}render(){const{color:e,disabled:t,inheritedAttributes:i,menuIcon:n}=this,a=f(this),s=this.autoHide&&!this.visible,d={type:this.type},h=i["aria-label"]||"menu";return o(r,{key:"341ca3bfac81ce4432eef5d2fd738becd1dfb07e",onClick:this.onClick,"aria-disabled":t?"true":null,"aria-hidden":s?"true":null,class:C(e,{[a]:!0,button:!0,"menu-button-hidden":s,"menu-button-disabled":t,"in-toolbar":z("ion-toolbar",this.el),"in-toolbar-color":z("ion-toolbar[color]",this.el),"ion-activatable":!0,"ion-focusable":!0})},o("button",Object.assign({key:"6e6229df2fc1f2d18294a5fbf7fe71e7dd47666a"},d,{disabled:t,class:"button-native",part:"native","aria-label":h}),o("span",{key:"0216acbf67d7aa5edc52328f7ded4cb98bc8a237",class:"button-inner"},o("slot",{key:"5c2cdae42add9a25d3e6323048fcbc6b5fc9b32e"},o("ion-icon",{key:"5b38c283957cd2f1ad659427dec612fc84fc054f",part:"icon",icon:n,lazy:!1,"aria-hidden":"true"}))),"md"===a&&o("ion-ripple-effect",{key:"adabe4ffa1d66fe36d55294d774db9c4bba1ad76",type:"unbounded"})))}get el(){return a(this)}};G.style={ionic:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-focused:currentColor;--background-focused-opacity:0.12;--background-hover:currentColor;--background-hover-opacity:0.04;--border-radius:initial;--color:initial;--padding-start:0;--padding-end:0;position:relative;width:var(--token-scale-1000, 40px);height:var(--token-scale-1000, 40px);font-size:var(--token-font-size-600, 1.5rem)}',ios:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host{--background-focused:currentColor;--background-focused-opacity:0.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--padding-start:5px;--padding-end:5px;min-height:32px;font-size:clamp(31px, 1.9375rem, 38.13px)}:host(.ion-activated){opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}',md:':host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;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);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host{--background-focused:currentColor;--background-focused-opacity:0.12;--background-hover:currentColor;--background-hover-opacity:0.04;--border-radius:50%;--color:initial;--padding-start:8px;--padding-end:8px;width:3rem;height:3rem;font-size:1.5rem}:host(.ion-color.ion-focused)::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}'};const L=class{constructor(t){e(this,t),this.visible=!1,this.autoHide=!0,this.onClick=()=>y.toggle(this.menu)}connectedCallback(){this.visibilityChanged()}async visibilityChanged(){this.visible=await X(this.menu)}render(){const e=f(this),t=this.autoHide&&!this.visible;return o(r,{key:"9ef631d9ae370a8740e691d281863203bfdddc38",onClick:this.onClick,"aria-hidden":t?"true":null,class:{[e]:!0,"menu-toggle-hidden":t}},o("slot",{key:"f8d9dfc562ed625ae47ec771ef6b2ea04bc463f4"}))}};L.style=":host(.menu-toggle-hidden){display:none}";export{D as ion_menu,G as ion_menu_button,L as ion_menu_toggle}

package/dist/types/components/footer/footer-interface.d.ts

@@ -0,0 +1 @@
+export type FooterScrollEffect = 'hide' | 'fade';

package/dist/types/components/footer/footer.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { FooterScrollEffect } from './footer-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -8,11 +9,25 @@ export declare class Footer implements ComponentInterface {
     private contentScrollCallback?;
     private keyboardCtrl;
     private keyboardCtrlPromise;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedCollapse;
+    private activeEffect?;
+    private fadeSetupId;
     private keyboardVisible;
     el: HTMLIonFooterElement;
+    /**
+     * Describes the scroll effect that will be applied to the footer.
+     * `"hide"` slides the footer out of view when scrolling down and back in
+     * when scrolling up.
+     * `"fade"` fades the toolbar background on scroll.
+     */
+    scrollEffect?: FooterScrollEffect;
     /**
      * Describes the scroll effect that will be applied to the footer.
      * Only applies when the theme is `"ios"`.
+     *
+     * @deprecated Use `scrollEffect` instead.
      */
     collapse?: 'fade';
     /**
@@ -29,6 +44,7 @@ export declare class Footer implements ComponentInterface {
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private checkCollapsibleFooter;
+    private setupScrollEffectHide;
     private setupFadeFooter;
     private destroyCollapsibleFooter;
     render(): any;

package/dist/types/components/header/header-interface.d.ts

@@ -0,0 +1 @@
+export type HeaderScrollEffect = 'hide' | 'condense' | 'fade';

package/dist/types/components/header/header.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { HeaderScrollEffect } from './header-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -9,12 +10,27 @@ export declare class Header implements ComponentInterface {
     private intersectionObserver?;
     private collapsibleMainHeader?;
     private inheritedAttributes;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedCollapse;
+    private activeEffect?;
+    private fadeCondenseSetupId;
     el: HTMLElement;
+    /**
+     * Describes the scroll effect that will be applied to the header.
+     * `"hide"` slides the header out of view when scrolling down and back in
+     * when scrolling up.
+     * `"condense"` collapses the large title into the main toolbar on scroll.
+     * `"fade"` fades the toolbar background on scroll.
+     */
+    scrollEffect?: HeaderScrollEffect;
     /**
      * Describes the scroll effect that will be applied to the header.
      * Only applies when the theme is `"ios"`.
      *
      * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+     *
+     * @deprecated Use `scrollEffect` instead.
      */
     collapse?: 'condense' | 'fade';
     /**
@@ -36,6 +52,7 @@ export declare class Header implements ComponentInterface {
     componentDidUpdate(): void;
     disconnectedCallback(): void;
     private checkCollapsibleHeader;
+    private setupScrollEffectHide;
     private setupFadeHeader;
     private destroyCollapsibleHeader;
     private setupCondenseHeader;

package/dist/types/components/header/header.utils.d.ts

@@ -27,10 +27,9 @@ export declare const handleHeaderFade: (scrollEl: HTMLElement, baseEl: HTMLEleme
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param theme The current theme.
- * @returns 'none' if inside ion-menu or if condensed in md
- * theme, otherwise 'banner'.
+ * @returns 'none' if inside ion-menu, otherwise 'banner'.
+ * Condensed headers start as 'banner' and have their role
+ * toggled dynamically by setHeaderActive() on scroll.
  */
-export declare const getRoleType: (isInsideMenu: boolean, isCondensed: boolean, theme: "ios" | "md" | "ionic") => "none" | "banner";
+export declare const getRoleType: (isInsideMenu: boolean) => "none" | "banner";
 export {};

package/dist/types/components/tab-bar/tab-bar-interface.d.ts

@@ -1,4 +1,5 @@
 export type TabButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+export type TabBarScrollEffect = 'hide';
 export interface TabBarChangedEventDetail {
     tab?: string;
 }

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
-import type { TabBarChangedEventDetail } from './tab-bar-interface';
+import type { TabBarChangedEventDetail, TabBarScrollEffect } from './tab-bar-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -9,13 +9,11 @@ export declare class TabBar implements ComponentInterface {
     private keyboardCtrl;
     private keyboardCtrlPromise;
     private didLoad;
-    private scrollEl?;
-    private contentScrollCallback?;
-    private lastScrollTop;
-    private scrollDirectionChangeTop;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedFooter;
     el: HTMLElement;
     keyboardVisible: boolean;
-    scrollHidden: boolean;
     /**
      * The color to use from your application's color palette.
      * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -28,11 +26,17 @@ export declare class TabBar implements ComponentInterface {
     selectedTab?: string;
     selectedTabChanged(): void;
     /**
-     * If `true`, the tab bar will be hidden when the user scrolls down
-     * and shown when the user scrolls up.
-     * Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+     * Describes the scroll effect that will be applied to the tab bar.
+     * `"hide"` slides the tab bar out of view when scrolling down and back in
+     * when scrolling up.
+     *
+     * Note: `"hide"` is ignored when the tab bar is nested inside an
+     * `ion-footer` to avoid leaving an empty footer visible on screen.
+     * Set `scroll-effect="hide"` on the footer instead so the entire
+     * footer hides together.
      */
-    hideOnScroll: boolean;
+    scrollEffect?: TabBarScrollEffect;
+    scrollEffectChanged(): void;
     /**
      * If `true`, the tab bar will be translucent.
      * Only applies when the theme is `"ios"` and the device supports
@@ -67,12 +71,11 @@ export declare class TabBar implements ComponentInterface {
      */
     ionTabBarLoaded: EventEmitter<void>;
     componentDidLoad(): void;
+    private checkScrollEffect;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    private setupHideOnScroll;
-    private initScrollListener;
-    private destroyHideOnScroll;
-    private checkScrollStatus;
+    private setupScrollEffect;
+    private destroyScrollEffect;
     private getShape;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -16,7 +16,9 @@ import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/bre
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { FooterScrollEffect } from "./components/footer/footer-interface";
 import { GalleryColumns, GalleryGap } from "./components/gallery/gallery-interface";
+import { HeaderScrollEffect } from "./components/header/header-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
@@ -40,7 +42,7 @@ import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectModalOption } from "./components/select-modal/select-modal-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
-import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+import { TabBarChangedEventDetail, TabBarScrollEffect, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -55,7 +57,9 @@ export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/bre
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { FooterScrollEffect } from "./components/footer/footer-interface";
 export { GalleryColumns, GalleryGap } from "./components/gallery/gallery-interface";
+export { HeaderScrollEffect } from "./components/header/header-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
@@ -79,7 +83,7 @@ export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectModalOption } from "./components/select-modal/select-modal-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
-export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+export { TabBarChangedEventDetail, TabBarScrollEffect, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -1459,12 +1463,17 @@ export namespace Components {
     interface IonFooter {
         /**
           * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
+          * @deprecated Use `scrollEffect` instead.
          */
         "collapse"?: 'fade';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the footer. `"hide"` slides the footer out of view when scrolling down and back in when scrolling up. `"fade"` fades the toolbar background on scroll.
+         */
+        "scrollEffect"?: FooterScrollEffect;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -1536,6 +1545,7 @@ export namespace Components {
     interface IonHeader {
         /**
           * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * @deprecated Use `scrollEffect` instead.
          */
         "collapse"?: 'condense' | 'fade';
         /**
@@ -1547,6 +1557,10 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the header. `"hide"` slides the header out of view when scrolling down and back in when scrolling up. `"condense"` collapses the large title into the main toolbar on scroll. `"fade"` fades the toolbar background on scroll.
+         */
+        "scrollEffect"?: HeaderScrollEffect;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -4041,15 +4055,14 @@ export namespace Components {
           * @default 'full'
          */
         "expand": 'compact' | 'full';
-        /**
-          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
-          * @default false
-         */
-        "hideOnScroll": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the tab bar. `"hide"` slides the tab bar out of view when scrolling down and back in when scrolling up.  Note: `"hide"` is ignored when the tab bar is nested inside an `ion-footer` to avoid leaving an empty footer visible on screen. Set `scroll-effect="hide"` on the footer instead so the entire footer hides together.
+         */
+        "scrollEffect"?: TabBarScrollEffect;
         /**
           * The selected tab component
          */
@@ -7498,12 +7511,17 @@ declare namespace LocalJSX {
     interface IonFooter {
         /**
           * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
+          * @deprecated Use `scrollEffect` instead.
          */
         "collapse"?: 'fade';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the footer. `"hide"` slides the footer out of view when scrolling down and back in when scrolling up. `"fade"` fades the toolbar background on scroll.
+         */
+        "scrollEffect"?: FooterScrollEffect;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -7571,6 +7589,7 @@ declare namespace LocalJSX {
     interface IonHeader {
         /**
           * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * @deprecated Use `scrollEffect` instead.
          */
         "collapse"?: 'condense' | 'fade';
         /**
@@ -7582,6 +7601,10 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the header. `"hide"` slides the header out of view when scrolling down and back in when scrolling up. `"condense"` collapses the large title into the main toolbar on scroll. `"fade"` fades the toolbar background on scroll.
+         */
+        "scrollEffect"?: HeaderScrollEffect;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -10053,15 +10076,14 @@ declare namespace LocalJSX {
           * @default 'full'
          */
         "expand"?: 'compact' | 'full';
-        /**
-          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
-          * @default false
-         */
-        "hideOnScroll"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Describes the scroll effect that will be applied to the tab bar. `"hide"` slides the tab bar out of view when scrolling down and back in when scrolling up.  Note: `"hide"` is ignored when the tab bar is nested inside an `ion-footer` to avoid leaving an empty footer visible on screen. Set `scroll-effect="hide"` on the footer instead so the entire footer hides together.
+         */
+        "scrollEffect"?: TabBarScrollEffect;
         /**
           * The selected tab component
          */
@@ -10829,6 +10851,7 @@ declare namespace LocalJSX {
         "side": 'start' | 'end' | 'top' | 'bottom';
     }
     interface IonFooterAttributes {
+        "scrollEffect": FooterScrollEffect;
         "collapse": 'fade';
         "translucent": boolean;
     }
@@ -10842,6 +10865,7 @@ declare namespace LocalJSX {
         "fixed": boolean;
     }
     interface IonHeaderAttributes {
+        "scrollEffect": HeaderScrollEffect;
         "collapse": 'condense' | 'fade';
         "divider": boolean;
         "translucent": boolean;
@@ -11264,7 +11288,7 @@ declare namespace LocalJSX {
     interface IonTabBarAttributes {
         "color": Color;
         "selectedTab": string;
-        "hideOnScroll": boolean;
+        "scrollEffect": TabBarScrollEffect;
         "translucent": boolean;
         "expand": 'compact' | 'full';
         "shape": 'soft' | 'round' | 'rectangular';

package/dist/types/utils/scroll-hide-controller.d.ts

@@ -0,0 +1,56 @@
+export interface ScrollHideOptions {
+    /** The component's host element. */
+    el: HTMLElement;
+    /** CSS variable name for the hide height, e.g. `--internal-header-hide-height`. */
+    cssVar: string;
+    /** Class toggled on the component when hidden, e.g. `header-scroll-hidden`. */
+    hiddenClass: string;
+    /** Class added to content when the scroll-hide effect is active, e.g. `content-header-hide-scroll-partner`. */
+    contentPartnerClass: string;
+    /** Class toggled on content when hidden, e.g. `content-header-hide-scroll-hidden`. */
+    contentHiddenClass: string;
+    /**
+     * Optional guard called before removing aria-hidden on show.
+     * Return `true` to keep aria-hidden (e.g. when the keyboard is open).
+     */
+    shouldKeepAriaHidden?: () => boolean;
+}
+export type ScrollHideController = {
+    /** Whether the component is currently hidden by the scroll effect. */
+    isHidden: () => boolean;
+    /**
+     * Activate the controller by attaching listeners, observers, and
+     * content classes. Must be called only after the caller confirms this
+     * setup is still current (promise-identity guard). A controller that
+     * is never initialized has no side effects and can be discarded.
+     */
+    init: () => void;
+    /** Destroy all listeners, observers, and clean up DOM state. */
+    destroy: () => void;
+};
+/**
+ * Creates a controller that manages scroll-based hide/show behavior
+ * for headers, footers, and tab bars.
+ *
+ * Listens to both wheel and scroll events. Wheel events (desktop mice)
+ * give direction instantly via deltaY. Scroll events cover touch,
+ * trackpad, and programmatic scrolling where wheel doesn't fire.
+ * A short suppression window stops them from double-processing the
+ * same gesture.
+ *
+ * When the user reverses scroll direction, we save that position as
+ * an anchor. The bar only hides after scrolling 60px past that
+ * anchor, which prevents flickering on small or jittery movements.
+ * Showing is immediate on direction change.
+ *
+ * When `options` is provided, the controller also handles the DOM
+ * setup: ResizeObserver for height tracking, CSS variable read/write,
+ * content partner/hidden class toggling, inert/aria-hidden, and
+ * full teardown cleanup. This avoids duplicating the same setup
+ * across header, footer, and tab-bar.
+ *
+ * @internal
+ * @param contentEl The content element to resolve the scroll element from.
+ * @param options Configuration for DOM setup (classes, CSS vars, a11y).
+ */
+export declare const createScrollHideController: (contentEl: HTMLElement, options: ScrollHideOptions) => Promise<ScrollHideController>;