feat(motion): add interactive micro-feedback

2026-03-20 17:44:20 +08:00
parent 142f4a399a
commit 36822f05e0
17 changed files with 144 additions and 62 deletions
@@ -175,8 +175,8 @@ reduced-motion fallback:

 Examples:

- `default`
- `reduced`
+- `interactive`
+- `static`

 ### Layout Pattern

@@ -218,7 +218,7 @@ The existing token groups remain the baseline:
 Add a new root attribute:

 ```html
-<html data-theme="morandi" data-skin="glass" data-motion="default">
+<html data-theme="morandi" data-skin="glass" data-motion="interactive">
 ```

 `data-skin` should be the runtime contract for component appearance.
@@ -422,7 +422,7 @@ Minimum contract:
 ```ts
 type ThemeName = "morandi" | "earth" | "brand";
 type SkinName = "minimal" | "glass" | "pixel";
-type MotionModeName = "default" | "reduced";
+type MotionModeName = "interactive" | "static";
 ```

 Likely helpers:
@@ -437,7 +437,7 @@ Provider shape if needed:
 <StyleProvider
  theme="morandi"
  skin="glass"
-  motionMode="default"
+  motionMode="interactive"
 >
  <App />
 </StyleProvider>
@@ -610,8 +610,8 @@ As of 2026-03-20, the project is at this point:
 - pilot recipe extraction completed for `Button`, `Card`, `Input`, `Dialog`, `Switch`,
  and `Skeleton`
 - screenshot-friendly validation surface added in `Foundation/Style Matrix`
- scoped `data-motion="reduced"` now works for nested docs wrappers
- motion now uses a single `default` mode plus a `reduced` override through `data-motion`
+- scoped `data-motion="static"` now works for nested docs wrappers
+- motion now uses a single `interactive` mode plus a `static` override through `data-motion`
 - shared skin-aware treatment now extends across the broader component library surface,
  including controls, menus, overlays, feedback, and data-heavy patterns
 - package consumers can now import a single combined stylesheet from