import { CSSResultArray , SizedMixin , TemplateResult , } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js' ; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js' ; import linkStyles from './link.css.js' ; element attr attr export class Link extends SizedMixin ( LikeAnchor ( Focusable ) , { noDefaultSize : true , } ) { public static get styles ( ) : CSSResultArray { return [ linkStyles ] ; } @ query ( '#anchor' ) anchorElement ! : HTMLAnchorElement ; @ property ( { type : String , reflect : true } ) public variant : 'secondary' | undefined ; public get focusElement ( ) : HTMLElement { return this . anchorElement ; } protected render ( ) { return this . renderAnchor ( { id : 'anchor' } ) ; } }