@carbon/motion 11.49.0 → 11.50.0

package/README.md

@@ -50,6 +50,10 @@ do the following in your project:
 Both the `motion` function and mixin support passing in the name of the motion
 curve and the mode you want to work in.
 
+> **Build note:** Token values are generated at build time from
+> `src/dtcg/motion.json`. Run `yarn build` (or `npm run build`) once after
+> cloning so that `js/generated/` and `scss/generated/` are present.
+
 ### JavaScript
 
 If you're using `@carbon/motion` as a JavaScript dependency, we export our

package/es/index.js

@@ -1,36 +1,64 @@
-//#region src/tokens.ts
-/**
-* Copyright IBM Corp. 2018, 2026
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-const fast01 = "70ms";
-const fast02 = "110ms";
-const moderate01 = "150ms";
-const moderate02 = "240ms";
-const slow01 = "400ms";
-const slow02 = "700ms";
-const durationFast01 = fast01;
-const durationFast02 = fast02;
-const durationModerate01 = moderate01;
-const durationModerate02 = moderate02;
-const durationSlow01 = slow01;
-const durationSlow02 = slow02;
+//#region js/generated/tokens.js
+/** Micro-interactions such as button and toggle. Instant response to user action. */
+const durationFast01 = "70ms";
+/** Micro-interactions such as fade in. Subtle entrance or exit of small UI elements. */
+const durationFast02 = "110ms";
+/** Micro-interactions, small expansion, short distance movements. Default transition speed. */
+const durationModerate01 = "150ms";
+/** Expansion, system communication, toast. Slightly longer interactions with more visual weight. */
+const durationModerate02 = "240ms";
+/** Large expansion, important system notifications. Deliberate, prominent transitions. */
+const durationSlow01 = "400ms";
+/** Background dimming, large hero transitions. Slow, immersive motion for maximum emphasis. */
+const durationSlow02 = "700ms";
+/** @deprecated Use `durationFast01` instead */
+const fast01 = durationFast01;
+/** @deprecated Use `durationFast02` instead */
+const fast02 = durationFast02;
+/** @deprecated Use `durationModerate01` instead */
+const moderate01 = durationModerate01;
+/** @deprecated Use `durationModerate02` instead */
+const moderate02 = durationModerate02;
+/** @deprecated Use `durationSlow01` instead */
+const slow01 = durationSlow01;
+/** @deprecated Use `durationSlow02` instead */
+const slow02 = durationSlow02;
+const easings = {
+	standard: {
+		productive: "cubic-bezier(0.2, 0, 0.38, 0.9)",
+		expressive: "cubic-bezier(0.4, 0.14, 0.3, 1)"
+	},
+	entrance: {
+		productive: "cubic-bezier(0, 0, 0.38, 0.9)",
+		expressive: "cubic-bezier(0, 0, 0.3, 1)"
+	},
+	exit: {
+		productive: "cubic-bezier(0.2, 0, 1, 0.9)",
+		expressive: "cubic-bezier(0.4, 0.14, 1, 1)"
+	}
+};
 const unstable_tokens = [
-	"fast01",
-	"fast02",
-	"moderate01",
-	"moderate02",
-	"slow01",
-	"slow02",
 	"durationFast01",
 	"durationFast02",
 	"durationModerate01",
 	"durationModerate02",
 	"durationSlow01",
-	"durationSlow02"
+	"durationSlow02",
+	"fast01",
+	"fast02",
+	"moderate01",
+	"moderate02",
+	"slow01",
+	"slow02"
 ];
+//#endregion
+//#region src/tokens.ts
+/**
+* Copyright IBM Corp. 2018, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 const durations = {
 	"fast-01": durationFast01,
 	"fast-02": durationFast02,
@@ -83,24 +111,9 @@ const easingCurves = {
 		]
 	}
 };
-const formatEasing = (curve) => `cubic-bezier(${curve.join(", ")})`;
-const easings = {
-	standard: {
-		productive: formatEasing(easingCurves.standard.productive),
-		expressive: formatEasing(easingCurves.standard.expressive)
-	},
-	entrance: {
-		productive: formatEasing(easingCurves.entrance.productive),
-		expressive: formatEasing(easingCurves.entrance.expressive)
-	},
-	exit: {
-		productive: formatEasing(easingCurves.exit.productive),
-		expressive: formatEasing(easingCurves.exit.expressive)
-	}
-};
 const motion = (name, mode) => {
-	if (!easings[name]) throw new Error(`Unable to find easing \`${name}\` in our supported easings. Expected one of: ${Object.keys(easings).join(", ")}`);
 	const easing = easings[name];
+	if (!easing) throw new Error(`Unable to find easing \`${name}\` in our supported easings. Expected one of: ${Object.keys(easings).join(", ")}`);
 	if (!easing[mode]) throw new Error(`Unable to find a mode for the easing \`${name}\` called: \`${mode}\`. Expected one of: ${Object.keys(easing).join(", ")}`);
 	return easing[mode];
 };
@@ -115,85 +128,75 @@ const resolveDuration = (name) => {
 	if (!duration) throw new Error(`Unable to find duration \`${name}\` in our supported durations. Expected one of: ${Object.keys(durations).join(", ")}`);
 	return duration;
 };
-//#endregion
-//#region src/surfaces.ts
-/**
-* Named motion intents. These definitions are engine and framework agnostic.
-*
-* `prefers-reduced-motion` is intentionally not represented here: surfaces
-* never animate when the users request reduced motion. Framework adapters
-* bail before running, and the Sass output is wrapped in a
-* `prefers-reduced-motion: no-preference` media query
-*/
 const surfaces = {
 	disclosure: {
-		kind: "reveal",
-		duration: "moderate-01",
-		enter: {
-			blockSize: "auto",
-			opacity: 1
+		"kind": "reveal",
+		"duration": "moderate-01",
+		"enter": {
+			"blockSize": "auto",
+			"opacity": 1
 		},
-		exit: {
-			blockSize: 0,
-			opacity: 0
+		"exit": {
+			"blockSize": 0,
+			"opacity": 0
 		},
-		enterEasing: ["entrance", "productive"],
-		exitEasing: ["exit", "productive"]
+		"enterEasing": ["entrance", "productive"],
+		"exitEasing": ["exit", "productive"]
 	},
 	contextual: {
-		kind: "reveal",
-		duration: "fast-02",
-		enter: {
-			opacity: 1,
-			transform: "scale(1)"
+		"kind": "reveal",
+		"duration": "fast-02",
+		"enter": {
+			"opacity": 1,
+			"transform": "scale(1)"
 		},
-		exit: {
-			opacity: 0,
-			transform: "scale(0.96)"
+		"exit": {
+			"opacity": 0,
+			"transform": "scale(0.96)"
 		},
-		enterEasing: ["entrance", "expressive"],
-		exitEasing: ["exit", "expressive"]
+		"enterEasing": ["entrance", "expressive"],
+		"exitEasing": ["exit", "expressive"]
 	},
 	stretch: {
-		kind: "reveal",
-		duration: "slow-01",
-		enter: {
-			opacity: 1,
-			clipPath: "inset(0 0 0 0)"
+		"kind": "reveal",
+		"duration": "slow-01",
+		"enter": {
+			"opacity": 1,
+			"clipPath": "inset(0 0 0 0)"
 		},
-		exit: {
-			opacity: 0,
-			clipPath: "inset(50% 0 50% 0)"
+		"exit": {
+			"opacity": 0,
+			"clipPath": "inset(50% 0 50% 0)"
 		},
-		enterEasing: ["entrance", "expressive"],
-		exitEasing: ["exit", "expressive"]
+		"enterEasing": ["entrance", "expressive"],
+		"exitEasing": ["exit", "expressive"]
 	},
 	expand: {
-		kind: "shared-element",
-		duration: "moderate-02",
-		enter: {
-			opacity: 1,
-			transform: "scale(1)"
+		"kind": "shared-element",
+		"duration": "moderate-02",
+		"enter": {
+			"opacity": 1,
+			"transform": "scale(1)"
 		},
-		exit: {
-			opacity: 0,
-			transform: "scale(0.96)"
+		"exit": {
+			"opacity": 0,
+			"transform": "scale(0.96)"
 		},
-		enterEasing: ["standard", "productive"],
-		exitEasing: ["standard", "productive"]
+		"enterEasing": ["standard", "productive"],
+		"exitEasing": ["standard", "productive"]
 	},
 	invoke: {
-		kind: "shared-element",
-		origin: "trigger",
-		duration: "moderate-02",
-		enterEasing: ["standard", "expressive"],
-		exitEasing: ["standard", "expressive"]
+		"kind": "shared-element",
+		"origin": "trigger",
+		"duration": "moderate-02",
+		"enterEasing": ["standard", "expressive"],
+		"exitEasing": ["standard", "expressive"]
 	}
 };
-const getMotionSurface = (name) => {
+function getMotionSurface(name) {
 	const surface = surfaces[name];
-	if (!surface) throw new Error(`Unable to find motion surface \`${name}\`. Expected one of: ` + Object.keys(surfaces).join(", "));
+	if (!surface) throw new Error(`Unable to find motion surface \`${name}\`. Expected one of: ${Object.keys(surfaces).join(", ")}`);
 	return surface;
-};
+}
 //#endregion
 export { durationFast01, durationFast02, durationModerate01, durationModerate02, durationSlow01, durationSlow02, easings, fast01, fast02, getMotionSurface, moderate01, moderate02, motion, resolveDuration, resolveEasing, slow01, slow02, surfaces, unstable_tokens };

package/index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,31 +7,36 @@
 
 @use 'sass:list';
 @use 'sass:map';
+@use './scss/generated/tokens' as tokens;
 @use 'scss/generated/surfaces' as generated;
 
-/// Common component easings
-/// @type Map
-/// @access public
-/// @group @carbon/motion
-$easings: (
-  standard: (
-    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
-  ),
-  entrance: (
-    productive: cubic-bezier(0, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0, 0, 0.3, 1),
-  ),
-  exit: (
-    productive: cubic-bezier(0.2, 0, 1, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 1, 1),
-  ),
-);
+// Re-forward all generated token variables as public API
+$easings: tokens.$easings !default;
+$duration-fast-01: tokens.$duration-fast-01 !default;
+$duration-fast-02: tokens.$duration-fast-02 !default;
+$duration-moderate-01: tokens.$duration-moderate-01 !default;
+$duration-moderate-02: tokens.$duration-moderate-02 !default;
+$duration-slow-01: tokens.$duration-slow-01 !default;
+$duration-slow-02: tokens.$duration-slow-02 !default;
+
+/// V10 backwards compatibility tokens
+/// @deprecated
+$fast-01: tokens.$fast-01 !default;
+/// @deprecated
+$fast-02: tokens.$fast-02 !default;
+/// @deprecated
+$moderate-01: tokens.$moderate-01 !default;
+/// @deprecated
+$moderate-02: tokens.$moderate-02 !default;
+/// @deprecated
+$slow-01: tokens.$slow-01 !default;
+/// @deprecated
+$slow-02: tokens.$slow-02 !default;
 
 /// Get the transition-timing-function for a given easing and motion mode
 /// @param {String} $name - Can be `standard`, `entrance`, or `exit`
 /// @param {String} $mode [productive] - Can be `productive` or `expressive`
-/// @param {Map} $easings [$carbon--easings] - Easings map
+/// @param {Map} $easings [$easings] - Easings map
 /// @access public
 /// @group @carbon/motion
 /// @return {Function} CSS `cubic-bezier()` function
@@ -57,73 +62,6 @@ $easings: (
   transition-timing-function: motion($name, $mode);
 }
 
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-fast-01: 70ms;
-
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-fast-02: 110ms;
-
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-moderate-01: 150ms;
-
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-moderate-02: 240ms;
-
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-slow-01: 400ms;
-
-/// @access public
-/// @type Duration
-/// @group @carbon/motion
-$duration-slow-02: 700ms;
-
-/// V10 backwards compatibility tokens
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$fast-01: $duration-fast-01;
-
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$fast-02: $duration-fast-02;
-
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$moderate-01: $duration-moderate-01;
-
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$moderate-02: $duration-moderate-02;
-
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$slow-01: $duration-slow-01;
-
-/// @access public
-/// @deprecated
-/// @type Duration
-/// @group @carbon/motion
-$slow-02: $duration-slow-02;
-
 /// Named motion intents shared across Carbon implementations
 /// @type Map
 /// @access public

package/js/generated/surfaces.d.ts

@@ -0,0 +1,119 @@
+// Code generated by @carbon/motion. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+/** Accordion, table-row expand — reveal in place. */
+export declare const disclosure: {
+  kind: "reveal",
+  duration: "moderate-01",
+  enter: {
+    blockSize: "auto",
+    opacity: 1
+  },
+  exit: {
+    blockSize: 0,
+    opacity: 0
+  },
+  enterEasing: [
+    "entrance",
+    "productive"
+  ],
+  exitEasing: [
+    "exit",
+    "productive"
+  ]
+};
+
+/** Icon → tooltip/popover — fade and scale reveal. */
+export declare const contextual: {
+  kind: "reveal",
+  duration: "fast-02",
+  enter: {
+    opacity: 1,
+    transform: "scale(1)"
+  },
+  exit: {
+    opacity: 0,
+    transform: "scale(0.96)"
+  },
+  enterEasing: [
+    "entrance",
+    "expressive"
+  ],
+  exitEasing: [
+    "exit",
+    "expressive"
+  ]
+};
+
+/** Component reveal stretching from the vertical axis. */
+export declare const stretch: {
+  kind: "reveal",
+  duration: "slow-01",
+  enter: {
+    opacity: 1,
+    clipPath: "inset(0 0 0 0)"
+  },
+  exit: {
+    opacity: 0,
+    clipPath: "inset(50% 0 50% 0)"
+  },
+  enterEasing: [
+    "entrance",
+    "expressive"
+  ],
+  exitEasing: [
+    "exit",
+    "expressive"
+  ]
+};
+
+/** Card/tile → side-panel/tearsheet — shared-element morph. */
+export declare const expand: {
+  kind: "shared-element",
+  duration: "moderate-02",
+  enter: {
+    opacity: 1,
+    transform: "scale(1)"
+  },
+  exit: {
+    opacity: 0,
+    transform: "scale(0.96)"
+  },
+  enterEasing: [
+    "standard",
+    "productive"
+  ],
+  exitEasing: [
+    "standard",
+    "productive"
+  ]
+};
+
+/** Button → modal/menu/popover — shared-element morph from the trigger. */
+export declare const invoke: {
+  kind: "shared-element",
+  origin: "trigger",
+  duration: "moderate-02",
+  enterEasing: [
+    "standard",
+    "expressive"
+  ],
+  exitEasing: [
+    "standard",
+    "expressive"
+  ]
+};
+
+export declare const surfaces: {
+  disclosure: typeof disclosure;
+  contextual: typeof contextual;
+  stretch: typeof stretch;
+  expand: typeof expand;
+  invoke: typeof invoke;
+};
+
+export declare function getMotionSurface(name: 'disclosure' | 'contextual' | 'stretch' | 'expand' | 'invoke'): (typeof surfaces)[typeof name];

package/js/generated/surfaces.js

@@ -0,0 +1,127 @@
+// Code generated by @carbon/motion. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+/** Accordion, table-row expand — reveal in place. */
+export const disclosure = {
+  "kind": "reveal",
+  "duration": "moderate-01",
+  "enter": {
+    "blockSize": "auto",
+    "opacity": 1
+  },
+  "exit": {
+    "blockSize": 0,
+    "opacity": 0
+  },
+  "enterEasing": [
+    "entrance",
+    "productive"
+  ],
+  "exitEasing": [
+    "exit",
+    "productive"
+  ]
+};
+
+/** Icon → tooltip/popover — fade and scale reveal. */
+export const contextual = {
+  "kind": "reveal",
+  "duration": "fast-02",
+  "enter": {
+    "opacity": 1,
+    "transform": "scale(1)"
+  },
+  "exit": {
+    "opacity": 0,
+    "transform": "scale(0.96)"
+  },
+  "enterEasing": [
+    "entrance",
+    "expressive"
+  ],
+  "exitEasing": [
+    "exit",
+    "expressive"
+  ]
+};
+
+/** Component reveal stretching from the vertical axis. */
+export const stretch = {
+  "kind": "reveal",
+  "duration": "slow-01",
+  "enter": {
+    "opacity": 1,
+    "clipPath": "inset(0 0 0 0)"
+  },
+  "exit": {
+    "opacity": 0,
+    "clipPath": "inset(50% 0 50% 0)"
+  },
+  "enterEasing": [
+    "entrance",
+    "expressive"
+  ],
+  "exitEasing": [
+    "exit",
+    "expressive"
+  ]
+};
+
+/** Card/tile → side-panel/tearsheet — shared-element morph. */
+export const expand = {
+  "kind": "shared-element",
+  "duration": "moderate-02",
+  "enter": {
+    "opacity": 1,
+    "transform": "scale(1)"
+  },
+  "exit": {
+    "opacity": 0,
+    "transform": "scale(0.96)"
+  },
+  "enterEasing": [
+    "standard",
+    "productive"
+  ],
+  "exitEasing": [
+    "standard",
+    "productive"
+  ]
+};
+
+/** Button → modal/menu/popover — shared-element morph from the trigger. */
+export const invoke = {
+  "kind": "shared-element",
+  "origin": "trigger",
+  "duration": "moderate-02",
+  "enterEasing": [
+    "standard",
+    "expressive"
+  ],
+  "exitEasing": [
+    "standard",
+    "expressive"
+  ]
+};
+
+export const surfaces = {
+  disclosure,
+  contextual,
+  stretch,
+  expand,
+  invoke,
+};
+
+export function getMotionSurface(name) {
+  const surface = surfaces[name];
+  if (!surface) {
+    throw new Error(
+      `Unable to find motion surface \`${name}\`. Expected one of: ${Object.keys(surfaces).join(', ')}`
+    );
+  }
+  return surface;
+}

package/js/generated/tokens.d.ts

@@ -0,0 +1,39 @@
+// Code generated by @carbon/motion. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+// Duration tokens (V11)
+/** Micro-interactions such as button and toggle. Instant response to user action. */
+export declare const durationFast01: string;
+/** Micro-interactions such as fade in. Subtle entrance or exit of small UI elements. */
+export declare const durationFast02: string;
+/** Micro-interactions, small expansion, short distance movements. Default transition speed. */
+export declare const durationModerate01: string;
+/** Expansion, system communication, toast. Slightly longer interactions with more visual weight. */
+export declare const durationModerate02: string;
+/** Large expansion, important system notifications. Deliberate, prominent transitions. */
+export declare const durationSlow01: string;
+/** Background dimming, large hero transitions. Slow, immersive motion for maximum emphasis. */
+export declare const durationSlow02: string;
+
+// Duration tokens (V10 — deprecated aliases)
+/** @deprecated Use `durationFast01` instead */
+export declare const fast01: string;
+/** @deprecated Use `durationFast02` instead */
+export declare const fast02: string;
+/** @deprecated Use `durationModerate01` instead */
+export declare const moderate01: string;
+/** @deprecated Use `durationModerate02` instead */
+export declare const moderate02: string;
+/** @deprecated Use `durationSlow01` instead */
+export declare const slow01: string;
+/** @deprecated Use `durationSlow02` instead */
+export declare const slow02: string;
+
+// Easing tokens
+export declare const easings: Record<'standard' | 'entrance' | 'exit', Record<'productive' | 'expressive', string>>;
+
+export declare const unstable_tokens: readonly string[];