Missing.js

Missing.js is a JavaScript library implementing common UI patterns.

§ Tabs

Add tabs.js as a module script to your page and mark up your tabs with the appropriate ARIA roles. Behavior will be added automatically.

<script type="module" src="https://unpkg.com/missing.css@1.1.3/dist/js/tabs.js"></script>

The tabs behavior emits these custom events:

missing-switch-away on a tab after switching away from it.
- detail.to: the newly active tab
missing-switch-to on a tab when switching to it
- detail.from: the previously active tab
missing-change on the tablist element when changing tabs
- detail.to, detail.from

§ Initializing dynamic content

For dynamically inserted content: initialize it as such:

import tabs from "https://unpkg.com/missing.css@1.1.3/dist/js/tabs.js";
// ... insert some content ...
tabs(theContentIJustInserted);

Initializing a missing.js behavior on newly inserted content

Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.

All of our components will find elements that need initialization within the subtree you pass in --- you could pass the whole document every time if you wanted to.

See ARIA § menu

<script type="module" src="https://unpkg.com/missing.css@1.1.3/dist/js/menu.js">

import { menu, menuButton } from "https://unpkg.com/missing.css@1.1.3/dist/js/menu.js";

All notes above about initializing dynamic content apply here.

§ Feed

See ARIA § feed

<script type="module" src="https://unpkg.com/missing.css@1.1.3/dist/js/feed.js">

import { feed } from "https://unpkg.com/missing.css@1.1.3/dist/js/feed.js";

All notes above about initializing dynamic content apply here.

See Components § Navbar

<script type="module" src="https://unpkg.com/missing.css@1.1.3/dist/js/overflow-nav.js">

Make sure to add:

the data-overflow-nav attribute to your navbar.
inside that navbar, a button with a data-nav-expander attribute.

<header class="navbar" data-overflow-nav>
  <button class="iconbutton" data-nav-expander aria-hidden>
    &#x2630; <!-- trigram for heaven -->
  </button>
  <!-- rest of navbar... -->
</header>

The navbar will remain horizontally scrollable.

All notes above about initializing dynamic content apply here (for all those times you dynamically add navbars to your page).

Missing.js

§ Tabs

§ Initializing dynamic content

§ Menu

§ Feed

§ Expand/collapse navbar