Basic-web-components Packages

Mixins for creating web components in plain JavaScript.

A single-selection list box that supports selection highlighting (using the system highlight color) and keyboard navigation.

Slideshow with animated transitions

Auxiliary component to advance a selection with a timer

Lets the user slide laterally through a sequence of child elements.

Presents list items in a viewport such that only a single item is visible at a time. Navigating between items will be represented with a horizontal visual sliding effect.

Spreads out a set of items horizontally so they take equal space.

A strip of tabs for selecting one of the component's children.

A set of pages with a tab strip governing which page is shown.

Wraps a standard HTML element so that the standard behavior can then be extended.

Lets the user navigate laterally through a sequence of child elements.

A panel which can be collapsed/expanded with an animated transition.

An anchor (link) that highlights itself when its destination matches the current location.

A sample general-purpose base class for defining custom elements that mixes in some common features: template stamping into a shadow root, automatic node finding, and marshalling between attributes and properties.

Fades out content that overflows so the user knows there's more.

Shows exactly one child element at a time.

Presents a set of small dots to show list item count and select list items. There will be one dot for each item, and the dot for the currently selected item will be shown selected.

Controls for managing playback of a slideshow, audio playlist, etc.

A panel that shows animated transitions between selection states.

Mixin used to add prominent left and right arrow buttons to a wrapped child. Clicking the left/right buttons selects the previous/next item.