A set of mixins to be implemented in various controls reacting to user input

Usage no npm install needed!

<script type="module">
  import anypointWebComponentsAnypointControlMixins from 'https://cdn.skypack.dev/@anypoint-web-components/anypoint-control-mixins';


Anypoint control state mixins for web components

A set of components that reflect control state to properties and / or attributes. It can be used to control behavior of a control depending on user input.

Included controls:

  • hoverable-mixin.js - A mixin reflecting mouse over state on hovered property reflected to an attribute.
  • button-state-mixin.js - A mixin reflecting button state like active, pressed, pointerDown, or receivedFocusFromKeyboard.
  • control-state-mixin.js - A mixin reflecting focused state and handing disabled state of the control.

They are designed to handle aria attributes and state management in various state combinations. Useful for designing custom buttons and other form elements that accept user input.

Published on NPM




npm install @anypoint-web-components/anypoint-control-mixins --save

In a LitElement

import { LitElement, html } from 'lit-element';
import { ButtonStateMixin, ControlStateMixin } from '@anypoint-web-components/anypoint-control-mixins';

class SimpleButton extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  static get styles() {
    return css`
    :host {
      display: inline-block;
      background-color: #4285F4;
      color: #fff;
      min-height: 8px;
      min-width: 8px;
      padding: 16px;
      text-transform: uppercase;
      border-radius: 3px;
      user-select: none;
      cursor: pointer;

    :host([disabled]) {
      opacity: 0.3;
      pointer-events: none;

    :host([pressed]) {
      background-color: #3367D6;
      box-shadow: inset 0 3px 5px rgba(0,0,0,.2);

    :host([focused]) {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
                  0  8px 10px -5px rgba(0, 0, 0, 0.4);

  render() {
    return html`<slot></slot>`;
window.customElements.define('simple-button', SimpleButton);


git clone https://github.com/anypoint-web-components/anypoint-control-mixins
cd anypoint-control-mixins
npm install

Running the demo locally

npm start

Running the tests

npm test