import { html , PropertyValues , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import panelStyles from './tab-panel.css.js' ; element slot export class TabPanel extends SpectrumElement { static styles = [ panelStyles ] ; private static instanceCount = 0 ; @ property ( { type : Boolean , reflect : true } ) public selected = false ; @ property ( { type : String , reflect : true } ) public value = '' ; protected render ( ) { return html `
            <slot></slot>
        ` ; } protected firstUpdated ( ) { this . slot = 'tab-panel' ; this . setAttribute ( 'role' , 'tabpanel' ) ; this . tabIndex = 0 ; if ( ! this . hasAttribute ( 'id' ) ) { this . id = `sp-tab-panel-${ TabPanel . instanceCount ++ }` ; } } protected updated ( changes ) { if ( changes . has ( 'selected' ) ) { if ( this . selected ) { this . removeAttribute ( 'aria-hidden' ) ; this . tabIndex = 0 ; } else { this . setAttribute ( 'aria-hidden' , 'true' ) ; this . tabIndex = - 1 ; } } } }