import*as LitHtml from"../third_party/lit-html/lit-html.js";import*as UI from"../ui/ui.js";const{render:render,html:html}=LitHtml;export class Adorner extends HTMLElement{constructor(){super(...arguments),this.name="",this.category="Default",this.shadow=this.attachShadow({mode:"open"}),this.isToggle=!1}set data(e){this.name=e.name,e.content.slot="content",this.append(e.content),this.category=e.category||"Default",this.render()}connectedCallback(){this.getAttribute("aria-label")||UI.ARIAUtils.setAccessibleName(this,this.name)}isActive(){return"true"===this.getAttribute("aria-pressed")}toggle(e){if(!this.isToggle)return;const t=void 0===e?!this.isActive():e;UI.ARIAUtils.setPressed(this,t),UI.ARIAUtils.setAccessibleName(this,(t?this.ariaLabelActive:this.ariaLabelDefault)||this.name)}show(){this.classList.remove("hidden")}hide(){this.classList.add("hidden")}addInteraction(e,t){const{isToggle:r=!1,shouldPropagateOnKeydown:o=!1,ariaLabelDefault:i,ariaLabelActive:s}=t;this.isToggle=r,this.ariaLabelDefault=i,this.ariaLabelActive=s,UI.ARIAUtils.setAccessibleName(this,i),r&&(this.addEventListener("click",(()=>{this.toggle()})),this.toggle(!1)),this.addEventListener("click",e),this.classList.add("clickable"),UI.ARIAUtils.markAsButton(this),this.tabIndex=0,this.addEventListener("keydown",(e=>{"Enter"!==e.code&&"Space"!==e.code||(this.click(),o||e.stopPropagation())}))}render(){render(html`
      <style>
        :host {
          display: inline-flex;
        }

        :host(.hidden) {
          display: none;
        }

        :host(.clickable) {
          cursor: pointer;
        }

        slot {
          display: inline-flex;
          box-sizing: border-box;
          height: 13px;
          line-height: 13px;
          padding: 0 6px;
          font-size: 8.5px;
          color: var(--override-adorner-text-color, var(--color-text-primary));
          background-color: var(--override-adorner-background-color, var(--color-background-elevation-1));
          border: 1px solid var(--override-adorner-border-color, var(--color-details-hairline));
          border-radius: 10px;
        }

        :host(:focus) slot {
          border-color: var(--override-adorner-focus-border-color, var(--color-primary));
        }

        :host([aria-pressed=true]) slot {
          color: var(--override-adorner-active-text-color, var(--color-background));
          background-color: var(--override-adorner-active-background-color, var(--color-primary));
        }

        ::slotted(*) {
          height: 10px;
        }
      </style>

      <slot name="content"></slot>
    `,this.shadow,{eventContext:this})}}customElements.get("devtools-adorner")||customElements.define("devtools-adorner",Adorner);