Missing.js

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

Contents:

§ 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.2.0/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

Info: For dynamically inserted content, initialize it as such:

Example: Initializing a missing.js behavior on newly inserted content

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

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.2.0/dist/js/menu.js>

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

The menu behavior emits these custom events:

menu:close on a menu after it closes
- detail.opener: the aria-haspopup=menu element used to close the menu
menu:open on a menu after it opens
- detail.opener: the aria-haspopup=menu element used to open the menu

All notes above about initializing dynamic content apply here.

§ Feed

See ARIA § feed

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

import { feed } from "https://unpkg.com/missing.css@1.2.0/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.2.0/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.

Example: Collapsing navbar markup

<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