component Button {
  outputs {
    click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
label: string = "Button"
    loadingLabel: string = "Loading…"
    description: string = ""
    as: string = ""
    href: string = ""
    target: string = ""
    rel: string = ""
    type: string = "button"
    variant: string = "default"
    color: string = "primary"
    size: string = "default"
    disabled: boolean = false
    loading: boolean = false
    pill: boolean = false
    fullWidth: boolean = false
    icon: string = ""
    iconPosition: string = "start"
    ariaLabel: string = ""
    ariaPressed: string = ""
    ariaExpanded: string = ""
    ariaControls: string = ""
    title: string = ""
    autofocus: boolean = false
    controlClass: string = ""
    class: string = ""
  }

  view {
    <span
      class="wire-action {fullWidth ? 'w-full' : ''} {class}"
    >
      {#if as === "a" || (as === "" && href)}
        <a
          {...attrs}
          href="{disabled || loading ? '' : href}"
          target="{target}"
          rel="{rel}"
          title="{title}"
          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
          aria-disabled="{disabled || loading}"
          aria-busy="{loading}"
          aria-pressed="{ariaPressed}"
          aria-expanded="{ariaExpanded}"
          aria-controls="{ariaControls}"
          tabindex="{disabled || loading ? '-1' : '0'}"
          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
        >
          {#if loading}
            <span
              class="wire-spinner wire-spinner--inline"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if icon && !loading && iconPosition === "start"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          <span
            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
          >
            <span
              class="wire-btn__label"
            >
              <slot>{loading ? loadingLabel : label}</slot>
            </span>
            {#if description && !loading}
              <span
                class="wire-btn__description"
              >
                {description}
              </span>
            {/if}
          </span>
          {#if icon && !loading && iconPosition === "end"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
            <span
              class="wire-btn__tooltip"
              role="tooltip"
              aria-hidden="true"
            >
              {ariaLabel || label}
            </span>
          {/if}
        </a>
      {:else}
        <button
          {...attrs}
          type="{type}"
          title="{title}"
          autofocus="{autofocus}"
          disabled="{disabled || loading}"
          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
          aria-busy="{loading}"
          aria-pressed="{ariaPressed}"
          aria-expanded="{ariaExpanded}"
          aria-controls="{ariaControls}"
          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
        >
          {#if loading}
            <span
              class="wire-spinner wire-spinner--inline"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if icon && !loading && iconPosition === "start"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          <span
            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
          >
            <span
              class="wire-btn__label"
            >
              <slot>{loading ? loadingLabel : label}</slot>
            </span>
            {#if description && !loading}
              <span
                class="wire-btn__description"
              >
                {description}
              </span>
            {/if}
          </span>
          {#if icon && !loading && iconPosition === "end"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
            <span
              class="wire-btn__tooltip"
              role="tooltip"
              aria-hidden="true"
            >
              {ariaLabel || label}
            </span>
          {/if}
        </button>
      {/if}
    </span>
  }

  style {
    .wire-spinner {
      display: inline-block;
      width: 1.15rem;
      height: 1.15rem;
      border: 2px solid var(--wire-color-border);
      border-top-color: var(--wire-color-primary);
      border-radius: 999px;
      animation: wire-spin 0.7s linear infinite;
    }

    .wire-spinner--inline {
      width: 1rem;
      height: 1rem;
    }

    @keyframes wire-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* --- Button --------------------------------------------------------------- */
    .wire-btn {
      position: relative;
      --wire-btn-color: var(--wire-color-primary);
      --wire-btn-contrast: var(--wire-color-primary-contrast);

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1;
      border: 1px solid transparent;
      border-radius: var(--wire-radius-sm);
      padding: 0 0.75rem;
      cursor: pointer;
      text-decoration: none;
      min-height: 2rem;
      transition:
        color var(--wire-motion-base) var(--wire-ease-standard),
        border-color var(--wire-motion-base) var(--wire-ease-standard),
        background var(--wire-motion-base) var(--wire-ease-standard),
        box-shadow var(--wire-motion-base) var(--wire-ease-standard),
        transform var(--wire-motion-base) var(--wire-ease-emphasized);
    }
    .wire-btn:active {
      transform: scale(0.98);
    }
    .wire-btn:focus-visible {
      outline: 2px solid var(--wire-color-primary);
      outline-offset: 2px;
    }
    .wire-btn--color-primary {
      --wire-btn-color: var(--wire-color-primary);
      --wire-btn-contrast: var(--wire-color-primary-contrast);
    }
    .wire-btn--color-secondary {
      --wire-btn-color: var(--wire-color-muted);
      --wire-btn-contrast: var(--wire-color-bg);
    }
    .wire-btn--color-success {
      --wire-btn-color: var(--wire-color-success);
      --wire-btn-contrast: var(--wire-color-primary-contrast);
    }
    .wire-btn--color-warning {
      --wire-btn-color: var(--wire-color-warning);
      --wire-btn-contrast: var(--wire-color-bg);
    }
    .wire-btn--color-danger {
      --wire-btn-color: var(--wire-color-danger);
      --wire-btn-contrast: var(--wire-color-primary-contrast);
    }
    .wire-btn--color-info {
      --wire-btn-color: var(--wire-color-info);
      --wire-btn-contrast: var(--wire-color-primary-contrast);
    }
    .wire-btn--variant-default,
    .wire-btn--variant-solid,
    .wire-btn--default,
    .wire-btn--solid,
    .wire-btn--primary {
      color: var(--wire-btn-contrast);
      background: var(--wire-btn-color);
      box-shadow:
        0 1px 2px color-mix(in srgb, black 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 72%, transparent);
    }
    .wire-btn--variant-default:hover,
    .wire-btn--variant-solid:hover,
    .wire-btn--default:hover,
    .wire-btn--solid:hover,
    .wire-btn--primary:hover {
      background: color-mix(in srgb, var(--wire-btn-color) 84%, black);
      transform: translateY(-1px);
      box-shadow:
        0 0.35rem 0.9rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 82%, transparent);
    }
    .wire-btn--variant-outline,
    .wire-btn--outline {
      color: var(--wire-btn-color);
      background: transparent;
      border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
    }
    .wire-btn--variant-outline:hover,
    .wire-btn--outline:hover {
      background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
      border-color: var(--wire-btn-color);
    }
    .wire-btn--variant-destructive,
    .wire-btn--danger,
    .wire-btn--destructive {
      color: var(--wire-btn-color);
      background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent);
      border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent);
    }
    .wire-btn--danger,
    .wire-btn--destructive {
      --wire-btn-color: var(--wire-color-danger);
    }
    .wire-btn--variant-destructive:hover,
    .wire-btn--danger:hover,
    .wire-btn--destructive:hover {
      background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
    }
    .wire-btn--variant-ghost,
    .wire-btn--ghost {
      background: transparent;
      color: var(--wire-btn-color);
    }
    .wire-btn--variant-ghost:hover,
    .wire-btn--ghost:hover {
      background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
    }
    .wire-btn--variant-secondary,
    .wire-btn--secondary {
      color: var(--wire-color-text);
      background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface));
      border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border));
      box-shadow: var(--wire-shadow-1);
    }
    .wire-btn--variant-secondary:hover,
    .wire-btn--secondary:hover {
      color: var(--wire-btn-color);
      border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
      background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface));
      transform: translateY(-2px);
    }
    .wire-btn--variant-link,
    .wire-btn--link {
      min-height: auto;
      padding: 0;
      color: var(--wire-btn-color);
      background: transparent;
      border-color: transparent;
      border-radius: 0;
      text-underline-offset: 0.22em;
    }
    .wire-btn--variant-link:hover,
    .wire-btn--link:hover {
      text-decoration: underline;
    }
    .wire-btn:disabled,
    .wire-btn[aria-busy="true"] {
      cursor: not-allowed;
      opacity: 0.58;
      transform: none;
      box-shadow: none;
    }
    .wire-btn--size-xs,
    .wire-btn--xs {
      min-height: 1.5rem;
      padding-inline: 0.5rem;
      gap: 0.25rem;
      font-size: 0.75rem;
    }
    .wire-btn--size-sm,
    .wire-btn--sm {
      min-height: 2.125rem;
      padding-inline: 0.625rem;
      gap: 0.25rem;
      font-size: 0.8rem;
    }
    .wire-btn--size-default,
    .wire-btn--md {
      min-height: 2.5rem;
      padding-inline: 0.75rem;
      font-size: 0.875rem;
    }
    .wire-btn--size-lg,
    .wire-btn--lg {
      min-height: 2.75rem;
      padding-inline: 0.875rem;
      font-size: 0.925rem;
    }
    .wire-btn--size-icon,
    .wire-btn--size-icon-xs,
    .wire-btn--size-icon-sm,
    .wire-btn--size-icon-lg,
    .wire-btn--icon,
    .wire-btn--icon-xs,
    .wire-btn--icon-sm,
    .wire-btn--icon-lg {
      flex: none;
      padding: 0;
    }
    .wire-btn--size-icon,
    .wire-btn--icon {
      width: 2rem;
      height: 2rem;
    }
    .wire-btn--size-icon-xs,
    .wire-btn--icon-xs {
      width: 1.5rem;
      min-height: 1.5rem;
    }
    .wire-btn--size-icon-sm,
    .wire-btn--icon-sm {
      width: 1.75rem;
      min-height: 1.75rem;
    }
    .wire-btn--size-icon-lg,
    .wire-btn--icon-lg {
      width: 2.25rem;
      min-height: 2.25rem;
    }
    .wire-btn__icon {
      width: 1rem;
      height: 1rem;
      flex: none;
    }
    .wire-btn__label {
      font-weight: 650;
    }
    .wire-btn:hover > .wire-btn__tooltip,
    .wire-btn:focus-visible > .wire-btn__tooltip {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .wire-action {
      position: relative;
      display: inline-flex;
    }

    .wire-btn--pill {
      border-radius: 999px;
    }

    .wire-btn--with-description {
      min-height: 3.5rem;
      justify-content: flex-start;
      padding: 0.6rem 0.875rem;
      text-align: left;
    }

    .wire-btn__copy {
      display: grid;
      min-width: 0;
      gap: 0.15rem;
    }

    .wire-btn__description {
      color: currentColor;
      font-size: 0.75rem;
      font-weight: 450;
      line-height: 1.35;
      opacity: 0.74;
    }

    .wire-btn__tooltip {
      position: absolute;
      z-index: 80;
      inset-block-end: calc(100% + 0.5rem);
      inset-inline-start: 50%;
      width: max-content;
      max-width: min(16rem, calc(100vw - 2rem));
      padding: 0.4rem 0.6rem;
      color: var(--wire-color-bg);
      background: var(--wire-color-text);
      border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border));
      border-radius: var(--wire-radius-sm);
      box-shadow: var(--wire-shadow-2);
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 0.25rem);
      transition:
        opacity var(--wire-motion-fast) var(--wire-ease-standard),
        transform var(--wire-motion-fast) var(--wire-ease-standard);
    }
  }
}