Button Spinner

npm install @vikast908/loaders@0.1.1 @vikast908/core@0.1.1

import '@vikast908/loaders/button-spinner';

<orbux-button-spinner state="thinking"></orbux-button-spinner>

<script type="module" src="http://localhost:4321/orbux/button-spinner.js"></script>

<orbux-button-spinner state="thinking"></orbux-button-spinner>

import { OrbuxElement } from '@vikast908/core';

const STYLES = /* css */ `
:host{inline-size:var(--orbux-width,var(--orbux-size,20px));block-size:var(--orbux-height,var(--orbux-size,20px));color:var(--orbux-color,currentColor)}
.spinner{position:relative;inline-size:100%;block-size:100%;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-block-start-color:currentColor;border-radius:50%;animation:orbux-button-spin calc(.72s * var(--orbux-speed-scale)) linear infinite}
@keyframes orbux-button-spin{to{transform:rotate(1turn)}}
:host([data-state="idle"]) .spinner{animation:none;opacity:.42}
:host([data-state="waiting"]) .spinner{animation:none;opacity:.72;border-style:dashed}
:host([data-state="streaming"]) .spinner{animation-duration:calc(.48s * var(--orbux-speed-scale))}
:host([data-state="tool-calling"]) .spinner{border-radius:28%;animation-timing-function:steps(4,end)}
:host([data-state="done"]) .spinner,:host([data-state="error"]) .spinner{border:0;animation:none}
:host([data-state="done"]) .spinner::after{content:"";position:absolute;inset:18% 8% 28% 18%;border-inline-end:2px solid var(--orbux-color-success,#22c55e);border-block-end:2px solid var(--orbux-color-success,#22c55e);transform:rotate(42deg);animation:orbux-button-pop 200ms ease-out 1}
:host([data-state="error"]) .spinner::before,:host([data-state="error"]) .spinner::after{content:"";position:absolute;inset-inline-start:48%;inset-block:10%;inline-size:2px;background:var(--orbux-color-error,#ef4444);border-radius:2px;animation:orbux-button-pop 180ms ease-out 1}
:host([data-state="error"]) .spinner::before{transform:rotate(45deg)}
:host([data-state="error"]) .spinner::after{transform:rotate(-45deg)}
@keyframes orbux-button-pop{from{opacity:0;scale:.72}}
:host([data-settled="true"]) .spinner::before,:host([data-settled="true"]) .spinner::after{animation:none}
:host([data-paused="true"]) .spinner{animation-play-state:paused}
:host([data-reduced-motion="true"]) .spinner{animation:none}
:host([data-reduced-motion="true"][data-state="streaming"]) .spinner{border-width:3px}
:host([data-reduced-motion="true"][data-state="thinking"]) .spinner{opacity:.78}
`;

export class OrbuxButtonSpinner extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const spinner = document.createElement('span');
    spinner.className = 'spinner';
    spinner.setAttribute('part', 'spinner');
    this.root.append(style, spinner);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-button-spinner')) {
  customElements.define('orbux-button-spinner', OrbuxButtonSpinner);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-button-spinner': OrbuxButtonSpinner;
  }
}