State-first interaction primitive

Interactive Surface CSS

Inspect native controls as their pressed, selected, busy, current, and disabled states change in real time.

One system, clear boundaries

Ecosystem ownership

Each package remains useful on its own while owning one distinct part of the interface contract.

Layout Style CSS

structure and geometry

Responsive composition, spacing relationships, and page-level layout.

UI Style Kit CSS

visual paint and themes

Color, typography, borders, elevation, and theme expression.

Interactive Surface CSS

interaction states

Focus, hover, active, pressed, selected, busy, and disabled behavior.

Live semantic proof

Interaction state lab

Use the controls, then inspect their native attributes. No pseudo-class is faked.

Action

<button>

Toggle

aria-pressed

Current

State lab aria-current="page"

Selected

Resting view

Loading

aria-busy

Disabled

disabled

Variant

.variant-primary

Level

data-surface-level="2"

Icon

aria-label + icon-only

Built on browser semantics

Accessibility guidance

Start with native controls

Use buttons for actions and anchors for navigation so keyboard and assistive technology behavior is preserved.

Expose persistent state

Pair visual treatment with aria-pressed, aria-selected, aria-current, or aria-busy.

Keep focus reliable

Disabled controls stay non-interactive, modal focus stays contained, and closing restores the initiating control.

Choose the right ownership boundary

Entry points

Standalone preset

Complete paint, geometry, and interaction behavior for a framework-agnostic page.

@import "interactive-surface-css/standalone-preset.css";

State core

Interaction mechanics only when a host design system already owns presentation.

@import "interactive-surface-css/state-core.css";

Compatibility bundle

The established package entry point for current consumers.

@import "interactive-surface-css/interactive-surface.css";

Advanced configuration

Token tools

Edit a value, import a small CSS override, or export the current overrides for further testing.

Surface background

--interactive-surface-bg

rgb(255 255 255)

Focus ring

--interactive-surface-focus-ring-color

rgb(30 91 240)

Import token CSS

Reference

README reference

The repository README renders here with an embedded fallback for local and offline use.

Preparing the embedded README reference…