customElements.define('cat-control-group', class extends HTMLElement {
  static get observedAttributes() { return ['label', 'closed']; }

  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'label') {
      this.label = newValue;
    } else if (attr == 'closed') {
      this.closed = newValue === null ? true : false;
    }
  }
  set label(val) { this.caption.setAttribute('label', val); }
  get label() { return this.caption.getAttribute('label'); }
  set closed(val) { if (val) this.showContent(); else this.hideContent(); }
  get closed() { return this.box.style.display === 'none' ? true : false }

  connectedCallback() {
    while (this.firstChild) this.box.appendChild(this.firstChild);

    this.appendChild(this.caption); 
    this.appendChild(this.box);
  }

  constructor() {
    super();

    this.box = document.createElement('cat-box');

    this.caption = document.createElement('cat-caption');
      this.checkbox = document.createElement('cat-checkbox');
      this.caption.appendChild(this.checkbox);
      this.caption.addEventListener('click', e => { 
        if (this.hasAttribute('closed')) {
          this.removeAttribute('closed');
        } else {
          this.setAttribute('closed', '');
        }
      });
  }

  hideContent() {
    this.box.style.display = 'none';
    this.checkbox.setAttribute('checked', true);
  }
  showContent() {
    this.box.style.display = '';
    this.checkbox.setAttribute('checked', false);
  }
});