-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Interactive Surface CSS is a framework-agnostic interaction-state layer for buttons, links, toggles, tabs, cards, icon controls, and similar interactive hosts. It provides consistent focus, hover, press, current, selected, loading, disabled, reduced-motion, and forced-colors treatment without requiring a component runtime.
Version 1.5.0 is a release candidate until it is published. It preserves every established 1.x import and selector while adding a public transition tuple and deterministic state precedence to the focused state-core.css and complete standalone-preset.css entry points.
| Library | Responsibility |
|---|---|
interactive-surface-css |
Interaction states, focus visibility, state precedence, and interaction motion |
ui-style-kit-css |
Theme paint, modes, component appearance, and visual tokens |
layout-style-css |
Page structure, layout recipes, and geometry |
Use one library, use two compatible libraries, or use all three. None of the packages is a prerequisite for another.
-
interactive-surface-css/standalone-preset.css: complete state behavior plus neutral standalone paint and geometry. -
interactive-surface-css/state-core.css: state behavior and the public interaction token contract without theme paint or consumer-facing layout. -
interactive-surface-css/interactive-surface.css: preserved complete 1.x compatibility stylesheet. -
interactive-surface-css: preserved JavaScript entry that imports the compatibility stylesheet.
npm install interactive-surface-cssimport "interactive-surface-css/standalone-preset.css";<button class="interactive-surface variant-primary" type="button">Save</button>- Standalone state lab
- Interface Systems Lab — the canonical integration with all three libraries
- npm package
- GitHub repository
- Getting Started
- Installation and Usage
- API Reference
- Token Reference
- Accessibility
- Testing and Quality
- Publishing and Releases
- Contributing
- FAQ
- Roadmap
The package styles state. It does not render components, manage application state, create page layouts, or supply an application-wide theme. Applications remain responsible for semantic HTML, state updates, keyboard behavior, and suppressing activation on custom disabled controls.