export const __webpack_ids__=["3649"];export const __webpack_modules__={17739:function(t,e,r){r.r(e),r.d(e,{MDNIXTabWrapper:()=>MDNIXTabWrapper});var a=r(14703),i=r(54109);let MDNIXTabWrapper=class MDNIXTabWrapper extends a.oi{static styles=i.Z;_getTab(t){let e=[...this.querySelectorAll("mdn-ix-tab")];if("first"===t)return e[0];if("last"===t)return e.at(-1);let r=e.findIndex(t=>t.isActive);return"active"===t?e[r]:"prev"===t?e.at((r-1)%e.length):"next"===t?e.at((r+1)%e.length):void 0}_setTabActive(t,e=!1){t&&(this._getTab("active")?.unsetActive(),t.setActive(),e&&t.focus())}_tablistClick({target:t}){if(t instanceof HTMLElement){let e=t.closest("mdn-ix-tab")||void 0;this._setTabActive(e)}}_tablistKeyDown(t){let e;switch(t.key){case"ArrowRight":case"ArrowDown":e="next";break;case"ArrowLeft":case"ArrowUp":e="prev";break;case"Home":e="first";break;case"End":e="last";break;default:return}t.preventDefault(),this._setTabActive(this._getTab(e),!0)}render(){return(0,a.dy)`
      <div id="tablist" role="tablist">
        <slot
          name="tablist"
          @click=${this._tablistClick}
          @keydown=${this._tablistKeyDown}
        ></slot>
      </div>
      <slot name="active-panel"></slot>
    `}firstUpdated(){this.querySelector("mdn-ix-tab")?.setActive()}};customElements.define("mdn-ix-tab-wrapper",MDNIXTabWrapper)},54109:function(t,e,r){r.d(e,{Z:()=>n});var a=r(14703),i=r(8081),s=r.n(i),o=r(23645),l=r.n(o)()(s());l.push([t.id,":host{display:flex;flex-direction:column;overflow:hidden}#tablist{background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);display:flex;flex-shrink:0;gap:.5rem;overflow-x:auto}",""]);let n=(0,a.iv)([l.toString()])}};
//# sourceMappingURL=3649.a0041aab36b2ee5d.js.map