@sandlada/mdc/build/components/tabs/internal/base-tabs.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{query as t}from"../../../node_modules/@lit/reactive-element/decorators/query.js";import{queryAssignedElements as n}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../../node_modules/lit/decorators.js";import{html as r}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import a from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{ANIMATE_INDICATOR as o,BaseTab as s}from"./base-tab.js"
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-tabs`.
*
* The bar owns selection: a single active tab at a time (roving `tabindex`),
* an ARIA `tablist` role, arrow-key navigation and a cancelable `change` event
* that fires before the selection is committed. Each tab is asked to animate
* its indicator (via the {@link ANIMATE_INDICATOR} symbol) from the previous
* tab's position, so the active indicator slides smoothly between tabs.
*/
;function c(e){return!!e&&e instanceof s}var l=class extends i{constructor(){super(),this.activeTabIndex=0,this.autoActivate=!0,this.tabs=[],this.handleTabClick=e=>{this.activateTabAfterMicrotask(e.target)},this.handleKeydown=e=>{if(e.defaultPrevented||!c(e.target))return;let{key:t,ctrlKey:n,metaKey:r}=e,i=this.tabs.findIndex(e=>e.active),a=NaN;if(t===`Home`)a=0;else if(t===`End`)a=this.tabs.length-1;else if(t===`ArrowLeft`||t===`ArrowRight`){let e=t===`ArrowLeft`?-1:1;a=i+(this.isRtl()?-e:e)}if(isNaN(a))return;e.preventDefault();let o=this.tabs[a%this.tabs.length];n||r||this.autoActivate?this.activateTab(o,!0):o.focus()},this.handleSlotChange=()=>{this.tabs=this.assignedTabs;let{activeTabIndex:e,activeTab:t}=this;for(let[n,r]of this.tabs.entries())r.index=n,r.tabIndex=n===e?0:-1,r.active=r===t;t===null&&this.tabs[0]&&this.activateTab(this.tabs[0],!1)},this.addEventListener(`keydown`,this.handleKeydown)}get activeTab(){let{activeTabIndex:e,tabs:t}=this;return t[e]||(t[0]??null)}render(){return r`<div class="tabs" role="tablist"><slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}"></slot></div><div class="divider" part="divider"></div>`}updated(e){if(super.updated(e),e.has(`activeTabIndex`)){let{activeTabIndex:e,tabs:t}=this;t.length&&e>=0&&e<t.length&&this.activateTab(t[e],!1)}}async activateTabAfterMicrotask(e){await 0,!(!c(e)||e.active)&&this.activateTab(e,!0)}isRtl(){return this.matches(`:dir(rtl)`)||getComputedStyle(this).direction===`rtl`}async activateTab(e,t){let n=this.activeTab;if(!(!e||e===n)){if(e.active=!0,!this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))){e.active=!1,n&&(n.active=!0);return}n&&(n.active=!1),this.activeTabIndex=e.index;for(let[t,n]of this.tabs.entries())n.tabIndex=t===e.index?0:-1;e[o](n),t&&await this.scrollToTab(e)}}async scrollToTab(e=this.activeTab){let{tabsElement:t}=this;if(!e||!t)return;let{offsetLeft:n,offsetWidth:r}=e,{scrollLeft:i,clientWidth:a,scrollWidth:o}=t,s=o-a,c=Math.max(0,Math.min(n-(a-r)/2,s));c!==i&&t.scrollTo({left:c,behavior:`smooth`})}};a([e({type:Number,reflect:!0,attribute:`active-tab-index`})],l.prototype,`activeTabIndex`,void 0),a([e({type:Boolean,reflect:!0,attribute:`auto-activate`})],l.prototype,`autoActivate`,void 0),a([t(`.tabs`)],l.prototype,`tabsElement`,void 0),a([n({selector:`[mdc-tab]`,flatten:!0})],l.prototype,`assignedTabs`,void 0);export{l as BaseTabs};
//# sourceMappingURL=base-tabs.js.map