import { CSSResultArray , html , PropertyValues , TemplateResult , } from '@spectrum-web-components/base' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { Focusable , LikeAnchor } from '@spectrum-web-components/shared' ; import itemStyles from '@spectrum-web-components/tabs/src/tab.css.js' ; import topNavItemStyles from './top-nav-item.css.js' ; element slot export class TopNavItem extends LikeAnchor ( Focusable ) { public static get styles ( ) : CSSResultArray { return [ itemStyles , topNavItemStyles ] ; } @ query ( 'a' ) private anchor ! : HTMLAnchorElement ; @ property ( { type : Boolean , reflect : true } ) public selected = false ; public value = '' ; public get focusElement ( ) : HTMLAnchorElement { return this . anchor ; } public click ( ) { this . anchor . click ( ) ; } protected render ( ) { return html `
            <a
                id="item-label"
                href=${ ifDefined ( this . href ) }
                download=${ ifDefined ( this . download ) }
                target=${ ifDefined ( this . target ) }
                aria-label=${ ifDefined ( this . label ) }
                aria-current=${ ifDefined ( this . selected && this . href ? 'page' : undefined ) }
                rel=${ ifDefined ( this . rel ) }
            >
                <slot></slot>
            </a>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; } protected updated ( changes ) { super . updated ( changes ) ; this . value = this . anchor . href ; } }