import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as s,customElement as i}from"lit/decorators.js";import{s as a}from"./nile-tab-panel.css.esm.js";import{classMap as r}from"lit/directives/class-map.js";import{w as l}from"../internal/watch.esm.js";import{N as n}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 n{constructor(){super(...arguments),this.attrId=++o,this.componentId=`nile-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")}handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true")}render(){return t`
      <slot
        part="base"
        class=${r({"tab-panel":!0,"tab-panel--active":this.active})}
      ></slot>
    `}};m.styles=a,e([s({reflect:!0})],m.prototype,"name",void 0),e([s({type:Boolean,reflect:!0})],m.prototype,"active",void 0),e([l("active")],m.prototype,"handleActiveChange",null),m=e([i("nile-tab-panel")],m);export{m as N};
