import{i as u,A as v,b as l,a as p,n as t}from"./property-ChPqBGW_.js";import{t as d}from"./custom-element-C-crYl4r.js";import{b as m}from"./tokens-BNnjLb74.js";var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,i=(r,e,s,n)=>{for(var a=n>1?void 0:n?g(e,s):e,c=r.length-1,b;c>=0;c--)(b=r[c])&&(a=(n?b(e,s,a):b(a))||a);return n&&a&&h(e,s,a),a};let o=class extends u{constructor(){super(...arguments),this.size="md",this.variant="default",this.disabled=!1,this.active=!1,this.showIndicator=!1,this.ariaLabel=null}handleClick(r){if(this.disabled){r.preventDefault(),r.stopPropagation();return}this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,detail:{active:this.active}}))}render(){return l`
      <div class="tooltip-wrapper">
        <button
          ?disabled=${this.disabled}
          aria-label=${this.ariaLabel||this.tooltip||"Icon button"}
          aria-pressed=${this.active?"true":"false"}
          @click=${this.handleClick}
        >
          <span class="icon-slot">
            <slot></slot>
          </span>
          ${this.showIndicator?l`<span class="indicator"></span>`:v}
        </button>
        ${this.tooltip?l`<span class="tooltip">${this.tooltip}</span>`:v}
      </div>
    `}};o.styles=[m,p`
      :host {
        --_size: var(--monibuca-icon-btn-size, var(--monibuca-icon-btn-size-md));
        --_bg: var(--monibuca-icon-btn-bg, rgba(255, 255, 255, 0.1));
        --_color: var(--monibuca-icon-btn-color, var(--monibuca-color-text-inverse));
        --_hover-bg: var(--monibuca-icon-btn-hover-bg, rgba(255, 255, 255, 0.2));
        --_active-bg: var(--monibuca-icon-btn-active-bg, rgba(255, 255, 255, 0.3));
        --_radius: var(--monibuca-icon-btn-radius, var(--monibuca-radius-full));
        --_icon-size: var(--monibuca-icon-btn-icon-size, var(--monibuca-icon-md));
        
        display: inline-flex;
      }

      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--_size);
        height: var(--_size);
        padding: 0;
        border: none;
        border-radius: var(--_radius);
        background: var(--_bg);
        color: var(--_color);
        font-size: var(--_icon-size);
        cursor: pointer;
        transition: 
          background var(--monibuca-duration-fast) var(--monibuca-easing-default),
          transform var(--monibuca-duration-fast) var(--monibuca-easing-default),
          opacity var(--monibuca-duration-fast) var(--monibuca-easing-default);
        user-select: none;
        outline: none;
        position: relative;
      }

      button:hover:not(:disabled) {
        background: var(--_hover-bg);
      }

      button:active:not(:disabled) {
        background: var(--_active-bg);
        transform: scale(0.95);
      }

      button:focus-visible {
        box-shadow: 0 0 0 2px var(--monibuca-color-primary);
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Size variants */
      :host([size="sm"]) {
        --_size: var(--monibuca-icon-btn-size-sm);
        --_icon-size: var(--monibuca-icon-sm);
      }

      :host([size="lg"]) {
        --_size: var(--monibuca-icon-btn-size-lg);
        --_icon-size: var(--monibuca-icon-lg);
      }

      /* Variant styles */
      :host([variant="primary"]) {
        --_bg: var(--monibuca-color-primary);
        --_hover-bg: var(--monibuca-color-primary-hover);
        --_active-bg: var(--monibuca-color-primary-active);
        --_color: white;
      }

      :host([variant="success"]) {
        --_bg: var(--monibuca-color-success);
        --_hover-bg: var(--monibuca-color-success-hover);
        --_active-bg: var(--monibuca-color-success-active);
        --_color: white;
      }

      :host([variant="warning"]) {
        --_bg: var(--monibuca-color-warning);
        --_hover-bg: var(--monibuca-color-warning-hover);
        --_active-bg: var(--monibuca-color-warning-active);
        --_color: white;
      }

      :host([variant="danger"]) {
        --_bg: var(--monibuca-color-error);
        --_hover-bg: var(--monibuca-color-error-hover);
        --_active-bg: var(--monibuca-color-error-active);
        --_color: white;
      }

      :host([variant="ghost"]) {
        --_bg: transparent;
        --_hover-bg: rgba(255, 255, 255, 0.1);
        --_active-bg: rgba(255, 255, 255, 0.2);
      }

      /* Active state (toggle) */
      :host([active]) button {
        background: var(--monibuca-color-primary);
        color: white;
      }

      :host([active]) button:hover:not(:disabled) {
        background: var(--monibuca-color-primary-hover);
      }

      /* Icon slot */
      .icon-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--_icon-size);
        height: var(--_icon-size);
      }

      ::slotted(svg) {
        width: 100%;
        height: 100%;
      }

      /* Badge/indicator */
      .indicator {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--monibuca-color-error);
      }

      /* Tooltip */
      .tooltip-wrapper {
        position: relative;
      }

      .tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: var(--monibuca-spacing-xxs) var(--monibuca-spacing-xs);
        background: var(--monibuca-color-bg-dark);
        color: var(--monibuca-color-text-inverse);
        font-size: var(--monibuca-font-size-xs);
        border-radius: var(--monibuca-radius-sm);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--monibuca-duration-fast), visibility var(--monibuca-duration-fast);
        pointer-events: none;
        z-index: var(--monibuca-z-index-tooltip);
      }

      .tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: var(--monibuca-color-bg-dark);
      }

      button:hover + .tooltip,
      button:focus-visible + .tooltip {
        opacity: 1;
        visibility: visible;
      }
    `];i([t({type:String,reflect:!0})],o.prototype,"size",2);i([t({type:String,reflect:!0})],o.prototype,"variant",2);i([t({type:Boolean})],o.prototype,"disabled",2);i([t({type:Boolean,reflect:!0})],o.prototype,"active",2);i([t({type:Boolean,attribute:"show-indicator"})],o.prototype,"showIndicator",2);i([t({type:String})],o.prototype,"tooltip",2);i([t({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",2);o=i([d("mb-icon-button")],o);export{o as MbIconButton};
