Protean Elements

This is a collection of web components built using StencilJS.

Get Started

To use the elements in your workflow, follow the steps in the getting started docs.

Accessibility (a11y)

Everything here is built with accessibility in mind. We use as many native HTML elements as possible; when we must diverge, we adhere to the WAI-ARIA Authoring Practices and all relevant WCAG recommendations.

Read more about our approach on accessibility in the design system guidelines.

CSS Variables

All elements are styled using CSS variables (custom properties). The configurable style properties are listed for each element in the design system documentation.

Testing

All elements are tested thoroughly when changes are made and before releases.

• Unit tests are used to cover logical assertions and branches. Coverage here sits at 100% of all lines of code and over 99% of branches; the last 1% is made of minor dictionary variations effectively test by other means.
• End-to-End (E2E) tests are used to mimic user interactions. This serves as a layer of redundancy and as a mechanism to validate the design intent of an element.
• Manual testing is used to test any additional permutations and to verify functionality when an assistive technology is being used.