feat: hover, focus, etc states as component props

[kylemcd]

What changed?

Adds automatic pseudo-class support (hover, focus, active, focusWithin, disabled) to the style engine using object syntax. Any style property automatically gets pseudo-class variants with zero configuration.

• getStyleProp now parses pseudo-class objects and generates prefixed CSS vars (e.g., --hover-background-color). Added WithPseudo<Props> type, PSEUDO_STATES, and PseudoState exports.
• New @telegraph interactive(<selector>) PostCSS directive auto-generates pseudo-class CSS rules at build time with cascade fallbacks.
• Migrated components using old hover_ pattern to utilize new pattern.
• Updated layout and style-engine READMEs.

Before / After

// before
<Box hover_backgroundColor="gray-3" hover_shadow="1" focus_borderColor="blue-8" />
// after
<Box _hover={{ bg: "gray-3", shadow: "1" }} _focus={{ borderColor: "blue-8" }} />

// before — button color maps
const BUTTON_COLOR_MAP = {
  hover_backgroundColor: "accent-4",
  hover_borderColor: "accent-6",
}
// after
const BUTTON_COLOR_MAP = {
  _hover: { backgroundColor: "accent-4", borderColor: "accent-6" },
}

/* before — ~150 lines of manual pseudo-class CSS */
.tgph-box--interactive:hover {
  --background-color: var(--hover--background-color);
  --box-shadow: var(--hover--box-shadow);
  /* ... repeated for every property and pseudo state */
}
/* after — single directive */
@telegraph interactive(.tgph-box);

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
telegraph-storybook	Ready	Preview, Comment	Mar 9, 2026 6:06pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 939b970

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 25 packages

Name	Type
@telegraph/postcss-config	Minor
@telegraph/style-engine	Minor
@telegraph/textarea	Minor
@telegraph/button	Minor
@telegraph/layout	Minor
@telegraph/input	Minor
@telegraph/combobox	Patch
@telegraph/data-list	Patch
@telegraph/filter	Patch
@telegraph/icon	Patch
@telegraph/kbd	Patch
@telegraph/link	Patch
@telegraph/menu	Patch
@telegraph/modal	Patch
@telegraph/popover	Patch
@telegraph/radio	Patch
@telegraph/segmented-control	Patch
@telegraph/select	Patch
@telegraph/tabs	Patch
@telegraph/tag	Patch
@telegraph/toggle	Patch
@telegraph/tooltip	Patch
@telegraph/truncate	Patch
@telegraph/typography	Patch
@telegraph/style-engine-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kylemcd]

• feat: hover, focus, etc states as component props #714 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[knock-eng-bot]

Package size differences

No package size differences greater than 20 KB 🚀

All package size differences

• @telegraph/appearance: 0.00 KB
• @telegraph/button: +12.39 KB
• @telegraph/combobox: 0.00 KB
• @telegraph/compose-refs: 0.00 KB
• @telegraph/data-list: 0.00 KB
• @telegraph/filter: +6.10 KB
• @telegraph/helpers: 0.00 KB
• @telegraph/icon: 0.00 KB
• @telegraph/input: +1.01 KB
• @telegraph/kbd: 0.00 KB
• @telegraph/layout: -1.16 KB
• @telegraph/link: 0.00 KB
• @telegraph/menu: 0.00 KB
• @telegraph/modal: 0.00 KB
• @telegraph/nextjs: 0.00 KB
• @telegraph/popover: 0.00 KB
• @telegraph/postcss-config: +7.86 KB
• @telegraph/prettier-config: 0.00 KB
• @telegraph/radio: 0.00 KB
• @telegraph/segmented-control: 0.00 KB
• @telegraph/select: 0.00 KB
• @telegraph/style-engine: +13.27 KB
• @telegraph/tabs: 0.00 KB
• @telegraph/tag: +5.59 KB
• @telegraph/textarea: -1.72 KB
• @telegraph/toggle: 0.00 KB
• @telegraph/tokens: 0.00 KB
• @telegraph/tooltip: 0.00 KB
• @telegraph/truncate: 0.00 KB
• @telegraph/typography: 0.00 KB
• @telegraph/vite-config: 0.00 KB

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}