import { r as registerInstance, h, d as getElement, H as Host } from './index-24b18689.js';

const tabsCss = ".Tabs,.Tabs-tab{display:block}.Tabs-tab:not([selected]){display:none}.Tabs-header{border-bottom:solid 1px rgba(0, 32, 88, 0.1);white-space:nowrap}.Tabs-button{--bg-alpha:0;appearance:none;background-color:rgba(0, 0, 0, var(--bg-alpha));border:none;color:var(--text-color--light);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:1rem;text-transform:uppercase;transform:translateY(1px)}.Tabs-button:first-child{border-top-left-radius:6px}.Tabs-button:last-child{border-top-right-radius:6px}.Tabs-button:focus{outline:none}.Tabs-button:focus{--bg-alpha:0.015}@media (hover: hover){.Tabs-button:hover{--bg-alpha:0.015}}.Tabs-button:active{--bg-alpha:0.03}.Tabs-button.is-selected{border-bottom:solid 1px currentColor;color:var(--accent-color)}.Tabs-tab sparkle-code pre{margin-top:0}";

const SparkleTabs = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selected = null;
    this.tabs = [];
    this.toTabButton = (tab) => {
      const label = tab.getAttribute('tab');
      const isSelected = this.selected === tab;
      const buttonClass = {
        'Tabs-button': true,
        'is-selected': isSelected
      };
      return (h("button", { role: "tab", "aria-selected": isSelected ? 'true' : 'false', onClick: () => this.select(tab), class: buttonClass }, label));
    };
  }
  // if an event with a name that matches the 'listenFor' property is heard,
  // check the tabs to see if the event has a value that matches a tab title
  // The original purpose for this is the Framework Selection dropdown
  listenForFrameworkSelection(event) {
    if (typeof this.listenFor !== 'undefined' && event.detail.key === this.listenFor) {
      this.tabs.forEach(tab => {
        if (tab.tab.toLowerCase() === event.detail.value.toLowerCase()) {
          this.select(tab);
        }
      });
    }
  }
  componentDidLoad() {
    this.tabs = Array.from(this.el.querySelectorAll('sparkle-tab'));
    this.select(this.tabs.find(t => t.hasAttribute('selected')) || this.tabs[0]);
  }
  select(tab) {
    if (this.selected !== null) {
      this.selected.removeAttribute('selected');
    }
    this.selected = tab;
    this.selected.setAttribute('selected', '');
  }
  hostData() {
    return {
      role: 'tablist',
      class: {
        'Tabs': true
      }
    };
  }
  __stencil_render() {
    return [
      h("header", { class: "Tabs-header" }, this.tabs.map(this.toTabButton)),
      h("slot", null)
    ];
  }
  get el() { return getElement(this); }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
SparkleTabs.style = tabsCss;

export { SparkleTabs as sparkle_tabs };
