class UiSpinner extends HTMLElement {
  connectedCallback() {
    const size = this.getAttribute('size') || 'md';
    const px = { sm: '16px', md: '24px', lg: '40px' }[size] || '24px';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: inline-flex; align-items: center; justify-content: center; }
        .ring {
          width: ${px}; height: ${px};
          border: 2px solid var(--border);
          border-top-color: var(--teal);
          border-radius: 50%;
          animation: spin .6s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
      </style>
      <div class="ring"></div>`;
  }
}
customElements.define('ui-spinner', UiSpinner);