text: /**
   * H×C Spinner
   * Copyright (c) pinkhominid <pinkhominid@birdbomb.com>
   * MIT license
   */
  
  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      :host {
        display: inline-block;
      }
      :host([hidden]) {
        display: none;
      }
      *, *::after, *::before {
        box-sizing: border-box;
      }
      :host > div {
        margin: 0 auto;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top: 4px solid #555;
        /* easeInOutCirc */
        animation: rotating .75s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }
      @keyframes rotating {
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
    <div></div>
    <slot></slot>
  `;
  
  export class HxcSpinner extends HTMLElement {
    constructor() {
      super();
  
      this._root = template.content.cloneNode(true);
  
      this.attachShadow({ mode: 'open' });
    }
  
    connectedCallback() {
      if (!this._initialized) this._init();
      else this._update();
    }
  
    _init() {
      this._initialized = true;
  
      this.shadowRoot.appendChild(this._update());
      // once appended document fragment children are moved to shadowRoot
      this._root = this.shadowRoot;
  
      // set default attributes on host if not already set
      if (!this.hasAttribute('role')) {
        this.setAttribute('role', 'img');
      }
      if (!this.hasAttribute('aria-label')) {
        this.setAttribute('aria-label', this.textContent || 'Loading');
      }
    }
  
    _update() {
      return this._root;
    }
  };
  
  customElements.define('hxc-spinner', HxcSpinner);
  