var k=Object.defineProperty;var d=(r,t)=>{for(var o in t)k(r,o,{get:t[o],enumerable:!0})};var g={};d(g,{Button:()=>l});import"./../../kit/kit.js";import*as s from"./../../lit/lit.js";import*as u from"./../../visual_logging/visual_logging.js";var h=`*{margin:0;padding:0;box-sizing:border-box}*:focus,
*:focus-visible,
:host(:focus),
:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:row;align-items:center;width:fit-content}button{--hover-layer-color:var(--sys-color-state-hover-on-subtle);--active-layer-color:var(--sys-color-state-ripple-neutral-on-subtle);--button-border-size:1px;--button-height:var(--sys-size-11);--button-width:fit-content;align-items:center;background:transparent;border-radius:var(--sys-shape-corner-full);cursor:inherit;display:inline-flex;position:relative;font-family:var(--default-font-family);font-size:var(--sys-typescale-body4-size);font-weight:var(--ref-typeface-weight-medium);line-height:var(--sys-typescale-body4-line-height);height:var(--button-height);justify-content:center;padding:0 var(--sys-size-6);white-space:nowrap;width:var(--button-width);&.primary-toggle{--toggle-color:var(--sys-color-primary-bright)}&.red-toggle{--toggle-color:var(--sys-color-error-bright)}&.inverse{--hover-layer-color:var(--sys-color-state-hover-on-prominent);--active-layer-color:var(--sys-color-state-ripple-neutral-on-prominent)}devtools-icon{width:var(--icon-size);height:var(--icon-size)}&.toolbar,
  &.icon,
  &.only-icon{--button-height:26px;--button-width:26px;--icon-size:var(--sys-size-9);padding:0;border:none;overflow:hidden;devtools-icon{color:var(--override-button-icon-color,var(--icon-default))}&.small{--button-height:var(--sys-size-9);--button-width:var(--sys-size-9);--icon-size:var(--sys-size-8)}&.micro{--button-height:var(--sys-size-8);--button-width:var(--sys-size-8);--icon-size:var(--sys-size-8);border-radius:var(--sys-shape-corner-extra-small)}&.inverse devtools-icon{color:var(--sys-color-inverse-on-surface)}&.toggled devtools-icon{color:var(--toggle-color);&.long-click{color:var(--icon-default)}}&.checked devtools-icon{color:var(--toggle-color);&::after{content:"";width:var(--sys-size-3);height:var(--sys-size-3);border-radius:var(--sys-shape-corner-full);background-color:var(--sys-color-primary-bright);position:absolute;top:var(--dot-toggle-top);left:var(--dot-toggle-left)}}devtools-icon.long-click{position:absolute;top:2px;left:3px}devtools-icon[name='cross-circle-filled']{color:var(--icon-default)}}&.primary{--hover-layer-color:var(--sys-color-state-hover-on-prominent);--active-layer-color:var(--sys-color-state-ripple-primary);border:var(--button-border-size) solid var(--sys-color-primary);background:var(--sys-color-primary);color:var(--sys-color-on-primary);devtools-icon{color:var(--sys-color-on-primary)}}&.tonal{border:none;background:var(--sys-color-tonal-container);color:var(--sys-color-on-tonal-container);devtools-icon{color:var(--sys-color-on-tonal-container)}}&.primary-toolbar{devtools-icon{color:var(--icon-primary)}}&.text{border:none;color:var(--sys-color-primary);&.inverse{color:var(--sys-color-inverse-primary)}devtools-icon{color:var(--icon-primary)}}&.text-with-icon{padding-left:var(--sys-size-4);devtools-icon{width:var(--sys-size-8);height:var(--sys-size-8);margin-right:var(--sys-size-2)}}&.outlined{border:var(--button-border-size) solid var(--sys-color-tonal-outline);background:transparent;color:var(--sys-color-primary);&.micro{--button-height:var(--sys-size-8)}devtools-icon{color:var(--icon-primary)}}&:disabled{pointer-events:none;color:var(--sys-color-state-disabled);&.primary{border:var(--button-border-size) solid var(--sys-color-state-disabled-container);background:var(--sys-color-state-disabled-container)}&.tonal{border:var(--button-border-size) solid var(--sys-color-state-disabled-container);background:var(--sys-color-state-disabled-container)}&.outlined{border:var(--button-border-size) solid var(--sys-color-state-disabled-container)}&.toolbar,
    &.icon{background:transparent}devtools-icon{color:var(--icon-disabled)}}&:not(.icon, .toolbar).only-icon{width:100%;padding:0;&.small{width:var(--button-height)}}&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:var(--sys-size-2);z-index:1;&.toolbar,
    &.icon,
    &.reduced-focus-ring{outline-offset:calc(-1 * var(--sys-size-2))}&.only-icon{outline:none;devtools-icon{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:var(--sys-size-1);border-radius:inherit}&.micro devtools-icon{outline-offset:calc(-1 * var(--sys-size-2))}&.small devtools-icon{outline-offset:0}}}&:has(.spinner){padding-left:var(--sys-size-4)}&:hover::after{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0;background-color:var(--hover-layer-color);&.primary{border:var(--button-border-size) solid color-mix(in srgb,var(--sys-color-primary),var(--sys-color-state-hover-on-prominent) 6%)}&.tonal{background:color-mix(in srgb,var(--sys-color-tonal-container),var(--sys-color-state-hover-on-subtle))}&.toobar{devtools-icon{color:var(--icon-default-hover)}}}&:active::before,
  &.active::before{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0;background-color:var(--active-layer-color);&.primary{border:var(--button-border-size) solid color-mix(in srgb,var(--sys-color-primary),var(--sys-color-state-ripple-primary) 32%)}&.tonal{background:color-mix(in srgb,var(--sys-color-tonal-container),var(--sys-color-state-ripple-primary) 50%)}&.toolbar{devtools-icon{color:var(--icon-toggled)}}}}.spinner{display:block;width:12px;height:12px;border-radius:6px;border:2px solid var(--sys-color-cdt-base-container);animation:spinner-animation 1s linear infinite;border-right-color:transparent;margin-right:4px;&.outlined{border:2px solid var(--sys-color-primary);border-right-color:transparent}&.disabled{border:2px solid var(--sys-color-state-disabled);border-right-color:transparent}}@keyframes spinner-animation{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/*# sourceURL=${import.meta.resolve("./button.css")} */`;var{html:a,Directives:{ifDefined:i,ref:w,classMap:b}}=s,l=class extends HTMLElement{static formAssociated=!0;#i=this.attachShadow({mode:"open",delegatesFocus:!0});#r=this.#l.bind(this);#t={size:"REGULAR",variant:"primary",toggleOnClick:!0,disabled:!1,active:!1,spinner:!1,type:"button",longClickable:!1};#e=this.attachInternals();#s=s.Directives.createRef();constructor(){super(),this.setAttribute("role","presentation"),this.addEventListener("click",this.#r,!0)}cloneNode(t){let o=document.importNode(this,t);return Object.assign(o.#t,this.#t),o.#o(),o}set data(t){this.#t.variant=t.variant,this.#t.iconName=t.iconName,this.#t.toggledIconName=t.toggledIconName,this.#t.toggleOnClick=t.toggleOnClick!==void 0?t.toggleOnClick:!0,this.#t.size="REGULAR","size"in t&&t.size&&(this.#t.size=t.size),this.#t.active=!!t.active,this.#t.spinner=!!("spinner"in t&&t.spinner),this.#t.type="button","type"in t&&t.type&&(this.#t.type=t.type),this.#t.toggled=t.toggled,this.#t.toggleType=t.toggleType,this.#t.checked=t.checked,this.#t.disabled=!!t.disabled,t.title&&(this.title=t.title),t.accessibleLabel&&(this.accessibleLabel=t.accessibleLabel),this.#t.jslogContext=t.jslogContext,this.#t.longClickable=t.longClickable,this.#t.inverseColorTheme=t.inverseColorTheme,this.#o()}set iconName(t){this.#t.iconName=t,this.#o()}set toggledIconName(t){this.#t.toggledIconName=t,this.#o()}set toggleType(t){this.#t.toggleType=t,this.#o()}set variant(t){this.#t.variant=t,this.#o()}set size(t){this.#t.size=t,this.#o()}set accessibleLabel(t){t?this.setAttribute("accessibleLabel",t):this.removeAttribute("accessibleLabel"),this.#o()}get accessibleLabel(){return this.getAttribute("accessibleLabel")||void 0}set reducedFocusRing(t){this.#t.reducedFocusRing=t,this.#o()}set type(t){this.#t.type=t,this.#o()}get title(){return super.title}set title(t){super.title=t,this.#o()}get disabled(){return this.#t.disabled}set disabled(t){this.#a(t),this.#o()}set toggleOnClick(t){this.#t.toggleOnClick=t,this.#o()}set toggled(t){this.#t.toggled=t,this.#o()}get toggled(){return!!this.#t.toggled}set checked(t){this.#t.checked=t,this.#o()}set active(t){this.#t.active=t,this.#o()}get active(){return this.#t.active}set spinner(t){this.#t.spinner=t,this.#o()}get jslogContext(){return this.#t.jslogContext}set jslogContext(t){this.#t.jslogContext=t,this.#o()}set longClickable(t){this.#t.longClickable=t,this.#o()}set inverseColorTheme(t){this.#t.inverseColorTheme=t,this.#o()}#a(t){this.#t.disabled=t,this.#o()}connectedCallback(){this.#o()}#l(t){if(this.#t.disabled){t.stopPropagation(),t.preventDefault();return}this.form&&this.#t.type==="submit"&&(t.preventDefault(),this.form.dispatchEvent(new SubmitEvent("submit",{submitter:this}))),this.form&&this.#t.type==="reset"&&(t.preventDefault(),this.form.reset()),this.#t.toggleOnClick&&this.#t.variant==="icon_toggle"&&this.#t.iconName&&(this.toggled=!this.#t.toggled)}#n(){return this.#t.variant==="toolbar"||this.#t.variant==="primary_toolbar"}#o(){let o=!this.#s.value?.assignedNodes()?.length;if(!this.#t.variant)throw new Error("Button requires a variant to be defined");if(this.#n()){if(!this.#t.iconName)throw new Error("Toolbar button requires an icon");if(!o)throw new Error("Toolbar button does not accept children")}if(this.#t.variant==="icon"){if(!this.#t.iconName)throw new Error("Icon button requires an icon");if(!o)throw new Error("Icon button does not accept children")}let e=!!this.#t.iconName,m={primary:this.#t.variant==="primary",tonal:this.#t.variant==="tonal",outlined:this.#t.variant==="outlined",text:this.#t.variant==="text",toolbar:this.#n(),"primary-toolbar":this.#t.variant==="primary_toolbar",icon:this.#t.variant==="icon"||this.#t.variant==="icon_toggle"||this.#t.variant==="adorner_icon","primary-toggle":this.#t.toggleType==="primary-toggle","red-toggle":this.#t.toggleType==="red-toggle",toggled:!!this.#t.toggled,checked:!!this.#t.checked,"text-with-icon":e&&!o,"only-icon":e&&o,micro:this.#t.size==="MICRO",small:this.#t.size==="SMALL","reduced-focus-ring":!!this.#t.reducedFocusRing,active:this.#t.active,inverse:!!this.#t.inverseColorTheme},f={primary:this.#t.variant==="primary",outlined:this.#t.variant==="outlined",disabled:this.#t.disabled,spinner:!0},x=this.#t.jslogContext&&u.action().track({click:!0}).context(this.#t.jslogContext);s.render(a`
        <style>${h}</style>
        <button title=${i(this.title||void 0)}
                ?disabled=${this.#t.disabled}
                class=${b(m)}
                aria-pressed=${i(this.#t.toggled)}
                aria-label=${i(this.accessibleLabel||this.title||void 0)}
                jslog=${i(x)}>
          ${e?a`
            <devtools-icon name=${i(this.#t.toggled?this.#t.toggledIconName:this.#t.iconName)}>
            </devtools-icon>`:""}
          ${this.#t.longClickable?a`
              <devtools-icon name="triangle-bottom-right" class="long-click">
              </devtools-icon>`:""}
          ${this.#t.spinner?a`<span class=${b(f)}></span>`:""}
          <slot @slotchange=${this.#o} ${w(this.#s)}></slot>
        </button>
      `,this.#i,{host:this})}get value(){return this.#t.value||""}set value(t){this.#t.value=t}get form(){return this.#e.form}get name(){return this.getAttribute("name")}get type(){return this.#t.type}get validity(){return this.#e.validity}get validationMessage(){return this.#e.validationMessage}get willValidate(){return this.#e.willValidate}checkValidity(){return this.#e.checkValidity()}reportValidity(){return this.#e.reportValidity()}};customElements.define("devtools-button",l);var y={};d(y,{FloatingButton:()=>n,create:()=>j});import"./../../kit/kit.js";import*as p from"./../../visual_logging/visual_logging.js";import*as c from"./../../lit/lit.js";var v=`:host{width:fit-content;height:fit-content}button{padding:0;margin:0;background:0;border:0;position:relative;width:var(--sys-size-8);height:var(--sys-size-8);box-shadow:var(--sys-elevation-level2);border-radius:var(--sys-shape-corner-extra-small);display:flex;justify-content:center;align-items:center;:host-context(:not(.theme-with-dark-background)) &{background-color:var(--sys-color-tonal-container)}:host-context(.theme-with-dark-background) &:not(:disabled){background-color:var(--sys-color-primary)}& > devtools-icon{width:var(--sys-size-7);height:var(--sys-size-7)}:host-context(:not(.theme-with-dark-background)) &:not(:disabled) > devtools-icon{color:var(--sys-color-on-tonal-container)}:host-context(.theme-with-dark-background) &:not(:disabled) > devtools-icon{color:var(--sys-color-on-primary)}&:not(:disabled):hover::after,
  &:not(:disabled):hover::before{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0}&:not(:disabled):hover::after{background-color:var(--sys-color-state-hover-on-subtle)}&:not(:disabled):active::before{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:focus-visible{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:2px}&:disabled > devtools-icon{color:var(--sys-color-state-disabled)}}.gemini{display:flex;justify-content:center;align-items:center;width:var(--sys-size-9);height:var(--sys-size-9);border-radius:var(--sys-shape-corner-full);background-image:var(--app-gradient-google-ai);font:var(--sys-typescale-body4-medium);color:var(--ref-palette-neutral100);transition:width 1s,padding 1s;margin-left:auto;overflow:hidden;position:relative;border:0;&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}&:hover::after,
  &:active::after{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0}&:hover::after{background-color:var(--sys-color-state-hover-on-prominent)}&:active::after{background-color:var(--sys-color-state-ripple-primary)}devtools-icon{color:var(--ref-palette-neutral100)!important}}
/*# sourceURL=${import.meta.resolve("./floatingButton.css")} */`;var{html:z,Directives:{classMap:C}}=c,n=class extends HTMLElement{static observedAttributes=["icon-name","jslogcontext","disabled"];#i=this.attachShadow({mode:"open"});constructor(){super(),this.role="presentation",this.#r()}get iconName(){return this.getAttribute("icon-name")}set iconName(t){t===null?this.removeAttribute("icon-name"):this.setAttribute("icon-name",t)}get jslogContext(){return this.getAttribute("jslogcontext")}set jslogContext(t){t===null?this.removeAttribute("jslogcontext"):this.setAttribute("jslogcontext",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}attributeChangedCallback(t,o,e){o!==e&&(t==="icon-name"&&this.#r(),t==="jslogcontext"&&this.#t(),t==="disabled"&&this.#r())}#r(){let t=C({gemini:this.iconName==="spark"});c.render(z`
        <style>${v}</style>
        <button class=${t} ?disabled=${this.disabled}><devtools-icon .name=${this.iconName}></devtools-icon></button>`,this.#i,{host:this})}#t(){this.jslogContext?this.setAttribute("jslog",`${p.action().track({click:!0}).context(this.jslogContext)}`):this.removeAttribute("jslog")}},j=(r,t,o)=>{let e=new n;return e.iconName=r,e.title=t,o&&(e.jslogContext=o),e};customElements.define("devtools-floating-button",n);var L=`.text-button{margin:2px;height:24px;font-size:12px;font-family:var(--default-font-family);border:1px solid var(--sys-color-tonal-outline);border-radius:12px;padding:0 12px;font-weight:500;color:var(--sys-color-primary);background-color:var(--sys-color-cdt-base-container);flex:none;white-space:nowrap}.text-button:disabled{opacity:38%}.text-button:not(:disabled):focus,
.text-button:not(:disabled):hover,
.text-button:not(:disabled):active{background-color:var(--sys-color-state-hover-on-subtle)}.text-button:not(:disabled, .primary-button):focus-visible{outline:2px solid var(--sys-color-state-focus-ring);color:var(--sys-color-on-primary);background-color:var(--sys-color-cdt-base-container)}.text-button:not(:disabled, .running):focus,
.text-button:not(:disabled, .running):hover,
.text-button:not(:disabled, .running):active{color:var(--sys-color-primary)}.text-button.link-style,
.text-button.link-style:hover,
.text-button.link-style:active{background:none;border:none;outline:none;border-radius:2px;margin:0;padding:0!important;font:inherit;cursor:pointer;height:unset}.text-button.primary-button,
.text-button.primary-button:not(:disabled):focus{background-color:var(--sys-color-primary);border:none;color:var(--sys-color-on-primary)}.text-button.primary-button:not(:disabled):active{background-color:color-mix(in srgb,var(--sys-color-primary),var(--sys-color-state-ripple-primary) 32%);color:var(--sys-color-on-primary)}.text-button.primary-button:not(:disabled):hover{background-color:color-mix(in srgb,var(--sys-color-primary),var(--sys-color-state-hover-on-prominent) 6%);color:var(--sys-color-on-primary)}.text-button.primary-button:not(:disabled):focus-visible{background-color:var(--sys-color-primary);outline-offset:2px;outline:2px solid var(--sys-color-state-focus-ring);color:var(--sys-color-on-primary)}@media (forced-colors: active){.text-button{background-color:ButtonFace;color:ButtonText;border-color:ButtonText}.text-button:disabled{forced-color-adjust:none;opacity:100%;background:ButtonFace;border-color:GrayText;color:GrayText}.text-button:not(:disabled):focus-visible{forced-color-adjust:none;background-color:ButtonFace;color:Highlight!important;border-color:Highlight;outline:2px solid ButtonText;box-shadow:var(--legacy-focus-ring-active-shadow)}.text-button:not(:disabled):hover,
  .text-button:not(:disabled):active{forced-color-adjust:none;background-color:Highlight;color:HighlightText!important;box-shadow:var(--sys-color-primary)}.text-button.primary-button{forced-color-adjust:none;background-color:Highlight;color:HighlightText;border:1px solid Highlight}.text-button.primary-button:not(:disabled):focus-visible{background-color:Highlight;color:HighlightText!important;border-color:ButtonText}.text-button.primary-button:not(:disabled):hover,
  .text-button.primary-button:not(:disabled):active{background-color:HighlightText;color:Highlight!important;border-color:Highlight}}
/*# sourceURL=${import.meta.resolve("./textButton.css")} */`;export{g as Button,y as FloatingButton,L as textButtonStyles};
//# sourceMappingURL=buttons.js.map
