States
Data Attribute Example
data-state="active"
data-disabled
Variants
Class Example
.mdst-tabs
.mdst-tabs--pills
.mdst-tabs--compact
.mdst-tabs--vertical
.mdst-tabs--pills .mdst-tabs--compact
Interactive Demo

This demo uses vanilla JS to toggle data-state attributes. The JavaScript below is not part of modest-ui — it’s here to show how the CSS responds to state changes. Bring whatever JS you want.

This is the overview panel. Click the tabs above to switch content.

Here are the features. Notice how the active underline and panel switch together.

Pricing information goes here. The JS is just toggling data attributes.

Demo source 
const tabs = document.querySelector("#demo-tabs");
const buttons = tabs.querySelectorAll(".mdst-tab");
const panels = tabs.querySelectorAll(".mdst-tabs-panel");

buttons.forEach((btn, i) => {
  btn.addEventListener("click", () => {
    if (btn.hasAttribute("data-disabled")) return;
    buttons.forEach(b => b.dataset.state = "inactive");
    panels.forEach(p => p.dataset.state = "inactive");
    btn.dataset.state = "active";
    panels[i].dataset.state = "active";
  });
});
Data Attribute Contract
<!-- On .mdst-tab (tab buttons) -->
data-state="active"          Tab is selected
data-state="inactive"        Tab is not selected
data-disabled                Tab cannot be selected (boolean attribute)
data-disabled="true"         Same as above (explicit value)

<!-- On .mdst-tabs-panel (content panels) -->
data-state="active"          Panel is visible
data-state="inactive"        Panel is hidden (display: none)

<!-- Your JS toggles these attributes to switch tabs.
     modest-ui provides all the visual states. -->
Usage
<div class="mdst-tabs">
  <div class="mdst-tabs-list" role="tablist">
    <button class="mdst-tab" role="tab" data-state="active">Tab 1</button>
    <button class="mdst-tab" role="tab" data-state="inactive">Tab 2</button>
    <button class="mdst-tab" role="tab" data-state="inactive" data-disabled>Disabled</button>
  </div>
  <div class="mdst-tabs-panel" role="tabpanel" data-state="active">
    <p>Tab 1 content</p>
  </div>
  <div class="mdst-tabs-panel" role="tabpanel" data-state="inactive">
    <p>Tab 2 content</p>
  </div>
</div>

<!-- Pills variant -->
<div class="mdst-tabs mdst-tabs--pills">...</div>

<!-- Vertical variant -->
<div class="mdst-tabs mdst-tabs--vertical">...</div>

<!-- Compact variant -->
<div class="mdst-tabs mdst-tabs--compact">...</div>