import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as a}from"./nile-nav-tab-panel.css.esm.js";import{classMap as n}from"lit/directives/class-map.js";import{w as r}from"../internal/watch.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=0,m=class extends l{constructor(){super(...arguments),this.attrId=++o,this.componentId=`nile-nav-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel"),this.handleActiveChange()}handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true"),this.setAttribute("tabindex",this.active?"0":"-1")}render(){return e`
     <div
       part="base"
       class=${n({"nav-tab-panel":!0,"nav-tab-panel--active":this.active})}
>
  <slot></slot>
</div>
    `}};m.styles=a,t([i({reflect:!0})],m.prototype,"name",void 0),t([i({type:Boolean,reflect:!0})],m.prototype,"active",void 0),t([r("active")],m.prototype,"handleActiveChange",null),m=t([s("nile-nav-tab-panel")],m);export{m as N};
