<div id="root"></div>
import { html, render } from 'https://unpkg.com/lit-html@1.0.0/lit-html.js';

const root = document.querySelector('#root');

const updateData = 
  evt => render(markup(evt.detail.active), root);

const markup = (active = 0) => html`
  <p>Selected tab is ${active}</p>
  <amber-tabs
    @change=${evt => updateData(evt)}
    active=${active}
    labels="One, Two"
  ></amber-tabs>
`;

render(markup(0), root);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@amber-ds/components@1.0.0/tabs.js