<pin-button>

A two-state pinned/unpinned button — specification-driven web component built on @scalable.software/component.

repo ↗ · spec ↗ · round 1 ↗

1. Declarative usage

Drop the element into HTML. The status attribute is compulsory and always present in the DOM — set it to "pinned" to start pinned.

default <pin-button></pin-button>
preset to pinned <pin-button status="pinned"></pin-button>

2. Imperative API

Three public operations: pin(), unpin(), toggle(). The status property is also settable directly.

status: unpinned

3. Event subscription

The onpin and onunpin setters wire up a single handler each. Payload arrives on event.detail.

click to fire an event
  1. no events yet — click the button
const pin = document.querySelector('pin-button');

pin.onpin   = (e) => console.log('pinned',   e.detail);
pin.onunpin = (e) => console.log('unpinned', e.detail);

pin.toggle();   // → fires onpin   { status: "pinned"   }
pin.toggle();   // → fires onunpin { status: "unpinned" }

4. Gestures

One behavioural gesture (click) that triggers toggle, plus two visual gestures (hover, focus) realised entirely in CSS. Try Tab to the button to see the focus ring.

hover & focus me