@primer/primitives 11.7.1 → 11.8.0-rc.9152e7a0

package/DESIGN_TOKENS_GUIDE.md

@@ -65,18 +65,26 @@
 
 ### Motion
 
-| Keyword | Rule                                                           |
-| ------- | -------------------------------------------------------------- |
-| MUST    | Use motion for interactive state changes (hover, focus, press) |
-| MUST    | Keep animations ≤300ms for UI interactions                     |
-| MUST    | Respect `prefers-reduced-motion` media query                   |
-| MUST    | Provide instant alternatives when motion is reduced            |
-| SHOULD  | Use 100-200ms for micro-interactions                           |
-| SHOULD  | Use 200-300ms for state changes                                |
-| NEVER   | Exceed 500ms for UI interactions                               |
-| NEVER   | Use motion purely for decoration                               |
-| NEVER   | Create indefinitely looping motion without user control        |
-| NEVER   | Rely solely on motion to convey information                    |
+```
+--motion-[property]-[semantic]
+  ├── property: duration | easing | transition
+  └── semantic: micro | short | medium | long       (duration)
+                hover | enter | exit | move | linear (easing)
+                hover | stateChange | enter | exit   (transition)
+```
+
+| Keyword | Rule                                                                       |
+| ------- | -------------------------------------------------------------------------- |
+| MUST    | Use `motion.transition.*` tokens for interactive state changes             |
+| MUST    | Keep animations ≤`motion.duration.medium` (300ms) for UI interactions      |
+| MUST    | Respect `prefers-reduced-motion` media query                               |
+| MUST    | Provide instant alternatives when motion is reduced                        |
+| SHOULD  | Use `motion.duration.micro` (100ms) for hover and focus micro-interactions |
+| SHOULD  | Use `motion.duration.short` (200ms) for state changes                      |
+| NEVER   | Exceed `motion.duration.long` (500ms) for UI interactions                  |
+| NEVER   | Use motion purely for decoration                                           |
+| NEVER   | Create indefinitely looping motion without user control                    |
+| NEVER   | Rely solely on motion to convey information                                |
 
 ### Typography
 
@@ -126,10 +134,10 @@
 
 ## Decision Tree: Easing Selection
 
-1. Is element entering/exiting viewport? → ease-out (default)
-2. Is element moving/morphing on screen? → ease-in-out
-3. Is this a hover state change? → ease
-4. Is this constant motion (loaders)? → linear
+1. Is element entering/exiting viewport? → `motion.easing.enter` / `motion.easing.exit`
+2. Is element moving/morphing on screen? → `motion.easing.move`
+3. Is this a hover state change? → `motion.easing.hover`
+4. Is this constant motion (loaders)? → `motion.easing.linear`
 
 ---
 
@@ -148,11 +156,11 @@
   font: var(--text-body-shorthand-medium);
   cursor: pointer;
 
-  /* Motion: MUST be <300ms */
+  /* Motion: Use functional motion tokens */
   transition:
-    background-color 150ms ease,
-    box-shadow 150ms ease,
-    transform 100ms ease;
+    background-color var(--motion-transition-hover),
+    box-shadow var(--motion-transition-hover),
+    transform var(--motion-transition-hover);
 }
 
 /* State: Hover */

package/DESIGN_TOKENS_SPEC.md

@@ -429,6 +429,73 @@ Display font stack for headings and titles. Same as sansSerif but semantically d
 **U:** display-text, heading, title
 **R:** Use for headings and display text. Prefer over sansSerif for titles.
 
+## Motion
+
+### motion-duration-long
+Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.
+**U:** complex-animation, layout-shift, multi-step
+**R:** Use sparingly for complex animations. NEVER use for simple UI interactions.
+
+### motion-duration-medium
+Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.
+**U:** dropdown-appear, modal-open, tooltip-show
+**R:** Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions.
+
+### motion-duration-micro
+Fast micro-interactions like hover, focus ring, and color shifts.
+**U:** color-shift, focus-ring, hover-transition
+**R:** Use for instantaneous feedback on hover and focus states.
+
+### motion-duration-short
+Quick transitions for state changes like expand/collapse, toggles, and visibility changes.
+**U:** expand-collapse, toggle, visibility-change
+**R:** Use for interactive state changes that need to feel responsive.
+
+### motion-easing-enter
+Decelerating easing for elements entering the viewport or appearing on screen.
+**U:** element-appearing, enter-animation, modal-open
+**R:** RECOMMENDED default for enter animations. Element decelerates into its final position.
+
+### motion-easing-exit
+Accelerating easing for elements exiting the viewport or leaving the screen.
+**U:** element-leaving, exit-animation, modal-close
+**R:** Use for elements leaving the viewport. Element accelerates away.
+
+### motion-easing-hover
+Easing for hover state changes and micro-interactions.
+**U:** button-hover, hover-state, micro-interaction
+**R:** Use for hover state changes.
+
+### motion-easing-linear
+Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.
+**U:** continuous-animation, loader, progress-bar
+**R:** Use only for constant, uninterrupted motion.
+
+### motion-easing-move
+Smooth easing for elements moving or morphing within the viewport.
+**U:** morph-animation, position-change, size-change
+**R:** Use for elements that move or change shape on screen.
+
+### motion-transition-enter
+Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.
+**U:** dropdown-appear, modal-open, tooltip-show
+**R:** Use for elements appearing on screen. Element decelerates into final position.
+
+### motion-transition-exit
+Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.
+**U:** dropdown-dismiss, modal-close, tooltip-hide
+**R:** Use for elements leaving the screen. Shorter than enter to feel snappy.
+
+### motion-transition-hover
+Transition for hover state changes on interactive elements like buttons and links.
+**U:** button-hover, interactive-hover, link-hover
+**R:** Use for all hover state transitions. Keeps interactions feeling instantaneous.
+
+### motion-transition-stateChange
+Transition for state changes like toggles, expand/collapse, and visibility changes.
+**U:** accordion, expand-collapse, toggle
+**R:** Use for interactive elements that change between states.
+
 ## Overlay
 
 Tokens for modals, dialogs, popovers, and dropdown menus.

package/dist/build/transformers/transitionToCss.js

@@ -22,6 +22,10 @@ export const transitionToCss = {
         }
         // check required properties
         checkRequiredTokenProperties(value, ['duration', 'timingFunction']);
-        return `${value.duration} ${cubicBezierArrayToCss(value.timingFunction, token.path)} ${value.delay ? value.delay : ''}`.trim();
+        // timingFunction may already be a CSS string if resolved from a cubicBezier reference
+        const timing = typeof value.timingFunction === 'string'
+            ? value.timingFunction
+            : cubicBezierArrayToCss(value.timingFunction, token.path);
+        return `${value.duration} ${timing} ${value.delay ? value.delay : ''}`.trim();
     },
 };

package/dist/css/functional/motion/motion.css

@@ -0,0 +1,15 @@
+:root {
+  --motion-duration-long: var(--base-duration-500); /** Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly. */
+  --motion-duration-medium: var(--base-duration-300); /** Standard duration for elements entering or exiting the viewport, such as modals and dropdowns. */
+  --motion-duration-micro: var(--base-duration-100); /** Fast micro-interactions like hover, focus ring, and color shifts. */
+  --motion-duration-short: var(--base-duration-200); /** Quick transitions for state changes like expand/collapse, toggles, and visibility changes. */
+  --motion-easing-enter: var(--base-easing-easeOut); /** Decelerating easing for elements entering the viewport or appearing on screen. */
+  --motion-easing-exit: var(--base-easing-easeIn); /** Accelerating easing for elements exiting the viewport or leaving the screen. */
+  --motion-easing-hover: var(--base-easing-ease); /** Easing for hover state changes and micro-interactions. */
+  --motion-easing-linear: var(--base-easing-linear); /** Constant motion with no acceleration. Use for continuous animations like progress bars or loaders. */
+  --motion-easing-move: var(--base-easing-easeInOut); /** Smooth easing for elements moving or morphing within the viewport. */
+  --motion-transition-enter: var(--motion-duration-medium) var(--motion-easing-enter); /** Transition for elements entering the viewport, such as modals, dropdowns, and tooltips. */
+  --motion-transition-exit: var(--motion-duration-short) var(--motion-easing-exit); /** Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns. */
+  --motion-transition-hover: var(--motion-duration-micro) var(--motion-easing-hover); /** Transition for hover state changes on interactive elements like buttons and links. */
+  --motion-transition-stateChange: var(--motion-duration-short) var(--motion-easing-move); /** Transition for state changes like toggles, expand/collapse, and visibility changes. */
+}

package/dist/css/primitives.css

@@ -6,6 +6,7 @@
 @import './base/size/size.css';
 @import './base/size/z-index.css';
 @import './base/typography/typography.css';
+@import './functional/motion/motion.css';
 @import './functional/size/border.css';
 @import './functional/size/breakpoints.css';
 @import './functional/size/radius.css';

package/dist/docs/functional/motion/motion.json

@@ -0,0 +1,427 @@
+{
+  "motion-duration-long": {
+    "key": "{motion.duration.long}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["complex-animation", "multi-step", "layout-shift", "page-transition"],
+        "rules": "Use sparingly for complex animations. NEVER use for simple UI interactions."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.500}",
+      "$type": "duration",
+      "$description": "Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["complex-animation", "multi-step", "layout-shift", "page-transition"],
+          "rules": "Use sparingly for complex animations. NEVER use for simple UI interactions."
+        }
+      },
+      "key": "{motion.duration.long}"
+    },
+    "name": "motion-duration-long",
+    "attributes": {},
+    "path": ["motion", "duration", "long"],
+    "value": {
+      "value": 500,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly."
+  },
+  "motion-duration-medium": {
+    "key": "{motion.duration.medium}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-open", "dropdown-appear", "tooltip-show", "enter-exit-viewport"],
+        "rules": "Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.300}",
+      "$type": "duration",
+      "$description": "Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-open", "dropdown-appear", "tooltip-show", "enter-exit-viewport"],
+          "rules": "Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions."
+        }
+      },
+      "key": "{motion.duration.medium}"
+    },
+    "name": "motion-duration-medium",
+    "attributes": {},
+    "path": ["motion", "duration", "medium"],
+    "value": {
+      "value": 300,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Standard duration for elements entering or exiting the viewport, such as modals and dropdowns."
+  },
+  "motion-duration-micro": {
+    "key": "{motion.duration.micro}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["hover-transition", "focus-ring", "color-shift", "opacity-change"],
+        "rules": "Use for instantaneous feedback on hover and focus states."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.100}",
+      "$type": "duration",
+      "$description": "Fast micro-interactions like hover, focus ring, and color shifts.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["hover-transition", "focus-ring", "color-shift", "opacity-change"],
+          "rules": "Use for instantaneous feedback on hover and focus states."
+        }
+      },
+      "key": "{motion.duration.micro}"
+    },
+    "name": "motion-duration-micro",
+    "attributes": {},
+    "path": ["motion", "duration", "micro"],
+    "value": {
+      "value": 100,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Fast micro-interactions like hover, focus ring, and color shifts."
+  },
+  "motion-duration-short": {
+    "key": "{motion.duration.short}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["expand-collapse", "toggle", "visibility-change", "state-transition"],
+        "rules": "Use for interactive state changes that need to feel responsive."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.200}",
+      "$type": "duration",
+      "$description": "Quick transitions for state changes like expand/collapse, toggles, and visibility changes.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["expand-collapse", "toggle", "visibility-change", "state-transition"],
+          "rules": "Use for interactive state changes that need to feel responsive."
+        }
+      },
+      "key": "{motion.duration.short}"
+    },
+    "name": "motion-duration-short",
+    "attributes": {},
+    "path": ["motion", "duration", "short"],
+    "value": {
+      "value": 200,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Quick transitions for state changes like expand/collapse, toggles, and visibility changes."
+  },
+  "motion-easing-enter": {
+    "key": "{motion.easing.enter}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
+        "rules": "RECOMMENDED default for enter animations. Element decelerates into its final position."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeOut}",
+      "$type": "cubicBezier",
+      "$description": "Decelerating easing for elements entering the viewport or appearing on screen.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
+          "rules": "RECOMMENDED default for enter animations. Element decelerates into its final position."
+        }
+      },
+      "key": "{motion.easing.enter}"
+    },
+    "name": "motion-easing-enter",
+    "attributes": {},
+    "path": ["motion", "easing", "enter"],
+    "value": [0.3, 0.8, 0.6, 1],
+    "type": "cubicBezier",
+    "description": "Decelerating easing for elements entering the viewport or appearing on screen."
+  },
+  "motion-easing-exit": {
+    "key": "{motion.easing.exit}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["exit-animation", "element-leaving", "modal-close", "dismiss"],
+        "rules": "Use for elements leaving the viewport. Element accelerates away."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeIn}",
+      "$type": "cubicBezier",
+      "$description": "Accelerating easing for elements exiting the viewport or leaving the screen.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["exit-animation", "element-leaving", "modal-close", "dismiss"],
+          "rules": "Use for elements leaving the viewport. Element accelerates away."
+        }
+      },
+      "key": "{motion.easing.exit}"
+    },
+    "name": "motion-easing-exit",
+    "attributes": {},
+    "path": ["motion", "easing", "exit"],
+    "value": [0.7, 0.1, 0.75, 0.9],
+    "type": "cubicBezier",
+    "description": "Accelerating easing for elements exiting the viewport or leaving the screen."
+  },
+  "motion-easing-hover": {
+    "key": "{motion.easing.hover}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
+        "rules": "Use for hover state changes."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.ease}",
+      "$type": "cubicBezier",
+      "$description": "Easing for hover state changes and micro-interactions.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
+          "rules": "Use for hover state changes."
+        }
+      },
+      "key": "{motion.easing.hover}"
+    },
+    "name": "motion-easing-hover",
+    "attributes": {},
+    "path": ["motion", "easing", "hover"],
+    "value": [0.25, 0.1, 0.25, 1],
+    "type": "cubicBezier",
+    "description": "Easing for hover state changes and micro-interactions."
+  },
+  "motion-easing-linear": {
+    "key": "{motion.easing.linear}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
+        "rules": "Use only for constant, uninterrupted motion."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.linear}",
+      "$type": "cubicBezier",
+      "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
+          "rules": "Use only for constant, uninterrupted motion."
+        }
+      },
+      "key": "{motion.easing.linear}"
+    },
+    "name": "motion-easing-linear",
+    "attributes": {},
+    "path": ["motion", "easing", "linear"],
+    "value": [0, 0, 1, 1],
+    "type": "cubicBezier",
+    "description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders."
+  },
+  "motion-easing-move": {
+    "key": "{motion.easing.move}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
+        "rules": "Use for elements that move or change shape on screen."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeInOut}",
+      "$type": "cubicBezier",
+      "$description": "Smooth easing for elements moving or morphing within the viewport.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
+          "rules": "Use for elements that move or change shape on screen."
+        }
+      },
+      "key": "{motion.easing.move}"
+    },
+    "name": "motion-easing-move",
+    "attributes": {},
+    "path": ["motion", "easing", "move"],
+    "value": [0.6, 0, 0.2, 1],
+    "type": "cubicBezier",
+    "description": "Smooth easing for elements moving or morphing within the viewport."
+  },
+  "motion-transition-enter": {
+    "key": "{motion.transition.enter}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-open", "dropdown-appear", "tooltip-show", "popover-enter", "overlay-appear"],
+        "rules": "Use for elements appearing on screen. Element decelerates into final position."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.medium}",
+        "timingFunction": "{motion.easing.enter}"
+      },
+      "$type": "transition",
+      "$description": "Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-open", "dropdown-appear", "tooltip-show", "popover-enter", "overlay-appear"],
+          "rules": "Use for elements appearing on screen. Element decelerates into final position."
+        }
+      },
+      "key": "{motion.transition.enter}"
+    },
+    "name": "motion-transition-enter",
+    "attributes": {},
+    "path": ["motion", "transition", "enter"],
+    "value": {
+      "duration": {
+        "value": 300,
+        "unit": "ms"
+      },
+      "timingFunction": [0.3, 0.8, 0.6, 1]
+    },
+    "type": "transition",
+    "description": "Transition for elements entering the viewport, such as modals, dropdowns, and tooltips."
+  },
+  "motion-transition-exit": {
+    "key": "{motion.transition.exit}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-close", "dropdown-dismiss", "tooltip-hide", "popover-exit", "overlay-dismiss"],
+        "rules": "Use for elements leaving the screen. Shorter than enter to feel snappy."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.short}",
+        "timingFunction": "{motion.easing.exit}"
+      },
+      "$type": "transition",
+      "$description": "Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-close", "dropdown-dismiss", "tooltip-hide", "popover-exit", "overlay-dismiss"],
+          "rules": "Use for elements leaving the screen. Shorter than enter to feel snappy."
+        }
+      },
+      "key": "{motion.transition.exit}"
+    },
+    "name": "motion-transition-exit",
+    "attributes": {},
+    "path": ["motion", "transition", "exit"],
+    "value": {
+      "duration": {
+        "value": 200,
+        "unit": "ms"
+      },
+      "timingFunction": [0.7, 0.1, 0.75, 0.9]
+    },
+    "type": "transition",
+    "description": "Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns."
+  },
+  "motion-transition-hover": {
+    "key": "{motion.transition.hover}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["button-hover", "link-hover", "interactive-hover", "color-transition"],
+        "rules": "Use for all hover state transitions. Keeps interactions feeling instantaneous."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.micro}",
+        "timingFunction": "{motion.easing.hover}"
+      },
+      "$type": "transition",
+      "$description": "Transition for hover state changes on interactive elements like buttons and links.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["button-hover", "link-hover", "interactive-hover", "color-transition"],
+          "rules": "Use for all hover state transitions. Keeps interactions feeling instantaneous."
+        }
+      },
+      "key": "{motion.transition.hover}"
+    },
+    "name": "motion-transition-hover",
+    "attributes": {},
+    "path": ["motion", "transition", "hover"],
+    "value": {
+      "duration": {
+        "value": 100,
+        "unit": "ms"
+      },
+      "timingFunction": [0.25, 0.1, 0.25, 1]
+    },
+    "type": "transition",
+    "description": "Transition for hover state changes on interactive elements like buttons and links."
+  },
+  "motion-transition-stateChange": {
+    "key": "{motion.transition.stateChange}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["toggle", "expand-collapse", "accordion", "tab-switch", "visibility-change"],
+        "rules": "Use for interactive elements that change between states."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.short}",
+        "timingFunction": "{motion.easing.move}"
+      },
+      "$type": "transition",
+      "$description": "Transition for state changes like toggles, expand/collapse, and visibility changes.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["toggle", "expand-collapse", "accordion", "tab-switch", "visibility-change"],
+          "rules": "Use for interactive elements that change between states."
+        }
+      },
+      "key": "{motion.transition.stateChange}"
+    },
+    "name": "motion-transition-stateChange",
+    "attributes": {},
+    "path": ["motion", "transition", "stateChange"],
+    "value": {
+      "duration": {
+        "value": 200,
+        "unit": "ms"
+      },
+      "timingFunction": [0.6, 0, 0.2, 1]
+    },
+    "type": "transition",
+    "description": "Transition for state changes like toggles, expand/collapse, and visibility changes."
+  }
+}

package/dist/fallbacks/functional/motion/motion.json

@@ -0,0 +1,51 @@
+{
+  "--motion-duration-micro": {
+    "value": 100,
+    "unit": "ms"
+  },
+  "--motion-duration-short": {
+    "value": 200,
+    "unit": "ms"
+  },
+  "--motion-duration-medium": {
+    "value": 300,
+    "unit": "ms"
+  },
+  "--motion-duration-long": {
+    "value": 500,
+    "unit": "ms"
+  },
+  "--motion-easing-hover": [0.25, 0.1, 0.25, 1],
+  "--motion-easing-enter": [0.3, 0.8, 0.6, 1],
+  "--motion-easing-exit": [0.7, 0.1, 0.75, 0.9],
+  "--motion-easing-move": [0.6, 0, 0.2, 1],
+  "--motion-easing-linear": [0, 0, 1, 1],
+  "--motion-transition-hover": {
+    "duration": {
+      "value": 100,
+      "unit": "ms"
+    },
+    "timingFunction": [0.25, 0.1, 0.25, 1]
+  },
+  "--motion-transition-stateChange": {
+    "duration": {
+      "value": 200,
+      "unit": "ms"
+    },
+    "timingFunction": [0.6, 0, 0.2, 1]
+  },
+  "--motion-transition-enter": {
+    "duration": {
+      "value": 300,
+      "unit": "ms"
+    },
+    "timingFunction": [0.3, 0.8, 0.6, 1]
+  },
+  "--motion-transition-exit": {
+    "duration": {
+      "value": 200,
+      "unit": "ms"
+    },
+    "timingFunction": [0.7, 0.1, 0.75, 0.9]
+  }
+}