import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const scSpinnerCss = ":host{--track-color:#0d131e20;--indicator-color:var(--sc-color-primary-500);--stroke-width:2px;--spinner-size:1em;display:inline-block}.spinner{display:inline-block;width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";

const ScSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
  }
  static get style() { return scSpinnerCss; }
}, [1, "sc-spinner"]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-spinner"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScSpinner);
      }
      break;
  } });
}
defineCustomElement();

export { ScSpinner as S, defineCustomElement as d };
