@carbon/motion 11.49.0 → 11.50.0

package/js/generated/tokens.js

@@ -0,0 +1,65 @@
+// 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 const durationFast01 = '70ms';
+/** Micro-interactions such as fade in. Subtle entrance or exit of small UI elements. */
+export const durationFast02 = '110ms';
+/** Micro-interactions, small expansion, short distance movements. Default transition speed. */
+export const durationModerate01 = '150ms';
+/** Expansion, system communication, toast. Slightly longer interactions with more visual weight. */
+export const durationModerate02 = '240ms';
+/** Large expansion, important system notifications. Deliberate, prominent transitions. */
+export const durationSlow01 = '400ms';
+/** Background dimming, large hero transitions. Slow, immersive motion for maximum emphasis. */
+export const durationSlow02 = '700ms';
+
+// Duration tokens (V10 — deprecated aliases)
+/** @deprecated Use `durationFast01` instead */
+export const fast01 = durationFast01;
+/** @deprecated Use `durationFast02` instead */
+export const fast02 = durationFast02;
+/** @deprecated Use `durationModerate01` instead */
+export const moderate01 = durationModerate01;
+/** @deprecated Use `durationModerate02` instead */
+export const moderate02 = durationModerate02;
+/** @deprecated Use `durationSlow01` instead */
+export const slow01 = durationSlow01;
+/** @deprecated Use `durationSlow02` instead */
+export const slow02 = durationSlow02;
+
+// Easing tokens
+export 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)',
+  },
+};
+
+export const unstable_tokens = [
+  'durationFast01',
+  'durationFast02',
+  'durationModerate01',
+  'durationModerate02',
+  'durationSlow01',
+  'durationSlow02',
+  'fast01',
+  'fast02',
+  'moderate01',
+  'moderate02',
+  'slow01',
+  'slow02',
+];

package/lib/index.js

@@ -1,37 +1,65 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#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,
@@ -84,24 +112,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];
 };
@@ -116,86 +129,76 @@ 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
 exports.durationFast01 = durationFast01;
 exports.durationFast02 = durationFast02;

package/lib/surfaces.d.ts

@@ -4,13 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { DurationName, EasingMode, EasingName } from './tokens';
+export { surfaces, getMotionSurface } from '../js/generated/surfaces.js';
+import type { DurationName, EasingName, EasingMode } from './tokens';
 type MotionEasing = readonly [EasingName, EasingMode];
-/**
- * from/to styles for reveal surface - plain CSS property/value pairs
- * keep values engine-neutral so CSS, WAAPI, and Motion can all consume
- * them
- */
 type RevealKeyframe = Record<string, string | number>;
 interface MotionSurfaceBase {
     duration: DurationName;
@@ -29,137 +25,4 @@ interface SharedElementSurface extends MotionSurfaceBase {
     origin?: 'trigger';
 }
 export type MotionSurfaceDefinition = SharedElementSurface | RevealSurface;
-/**
- * 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
- */
-export declare const surfaces: {
-    readonly disclosure: {
-        readonly kind: "reveal";
-        readonly duration: "moderate-01";
-        readonly enter: {
-            readonly blockSize: "auto";
-            readonly opacity: 1;
-        };
-        readonly exit: {
-            readonly blockSize: 0;
-            readonly opacity: 0;
-        };
-        readonly enterEasing: readonly ["entrance", "productive"];
-        readonly exitEasing: readonly ["exit", "productive"];
-    };
-    readonly contextual: {
-        readonly kind: "reveal";
-        readonly duration: "fast-02";
-        readonly enter: {
-            readonly opacity: 1;
-            readonly transform: "scale(1)";
-        };
-        readonly exit: {
-            readonly opacity: 0;
-            readonly transform: "scale(0.96)";
-        };
-        readonly enterEasing: readonly ["entrance", "expressive"];
-        readonly exitEasing: readonly ["exit", "expressive"];
-    };
-    readonly stretch: {
-        readonly kind: "reveal";
-        readonly duration: "slow-01";
-        readonly enter: {
-            readonly opacity: 1;
-            readonly clipPath: "inset(0 0 0 0)";
-        };
-        readonly exit: {
-            readonly opacity: 0;
-            readonly clipPath: "inset(50% 0 50% 0)";
-        };
-        readonly enterEasing: readonly ["entrance", "expressive"];
-        readonly exitEasing: readonly ["exit", "expressive"];
-    };
-    readonly expand: {
-        readonly kind: "shared-element";
-        readonly duration: "moderate-02";
-        readonly enter: {
-            readonly opacity: 1;
-            readonly transform: "scale(1)";
-        };
-        readonly exit: {
-            readonly opacity: 0;
-            readonly transform: "scale(0.96)";
-        };
-        readonly enterEasing: readonly ["standard", "productive"];
-        readonly exitEasing: readonly ["standard", "productive"];
-    };
-    readonly invoke: {
-        readonly kind: "shared-element";
-        readonly origin: "trigger";
-        readonly duration: "moderate-02";
-        readonly enterEasing: readonly ["standard", "expressive"];
-        readonly exitEasing: readonly ["standard", "expressive"];
-    };
-};
-export type MotionSurfaceName = keyof typeof surfaces;
-export declare const getMotionSurface: (name: MotionSurfaceName) => {
-    readonly kind: "reveal";
-    readonly duration: "moderate-01";
-    readonly enter: {
-        readonly blockSize: "auto";
-        readonly opacity: 1;
-    };
-    readonly exit: {
-        readonly blockSize: 0;
-        readonly opacity: 0;
-    };
-    readonly enterEasing: readonly ["entrance", "productive"];
-    readonly exitEasing: readonly ["exit", "productive"];
-} | {
-    readonly kind: "reveal";
-    readonly duration: "fast-02";
-    readonly enter: {
-        readonly opacity: 1;
-        readonly transform: "scale(1)";
-    };
-    readonly exit: {
-        readonly opacity: 0;
-        readonly transform: "scale(0.96)";
-    };
-    readonly enterEasing: readonly ["entrance", "expressive"];
-    readonly exitEasing: readonly ["exit", "expressive"];
-} | {
-    readonly kind: "reveal";
-    readonly duration: "slow-01";
-    readonly enter: {
-        readonly opacity: 1;
-        readonly clipPath: "inset(0 0 0 0)";
-    };
-    readonly exit: {
-        readonly opacity: 0;
-        readonly clipPath: "inset(50% 0 50% 0)";
-    };
-    readonly enterEasing: readonly ["entrance", "expressive"];
-    readonly exitEasing: readonly ["exit", "expressive"];
-} | {
-    readonly kind: "shared-element";
-    readonly duration: "moderate-02";
-    readonly enter: {
-        readonly opacity: 1;
-        readonly transform: "scale(1)";
-    };
-    readonly exit: {
-        readonly opacity: 0;
-        readonly transform: "scale(0.96)";
-    };
-    readonly enterEasing: readonly ["standard", "productive"];
-    readonly exitEasing: readonly ["standard", "productive"];
-} | {
-    readonly kind: "shared-element";
-    readonly origin: "trigger";
-    readonly duration: "moderate-02";
-    readonly enterEasing: readonly ["standard", "expressive"];
-    readonly exitEasing: readonly ["standard", "expressive"];
-};
-export {};
+export type MotionSurfaceName = 'disclosure' | 'contextual' | 'stretch' | 'expand' | 'invoke';

package/lib/tokens.d.ts

@@ -4,25 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare const fast01 = "70ms";
-export declare const fast02 = "110ms";
-export declare const moderate01 = "150ms";
-export declare const moderate02 = "240ms";
-export declare const slow01 = "400ms";
-export declare const slow02 = "700ms";
-export declare const durationFast01 = "70ms";
-export declare const durationFast02 = "110ms";
-export declare const durationModerate01 = "150ms";
-export declare const durationModerate02 = "240ms";
-export declare const durationSlow01 = "400ms";
-export declare const durationSlow02 = "700ms";
-export declare const unstable_tokens: readonly ["fast01", "fast02", "moderate01", "moderate02", "slow01", "slow02", "durationFast01", "durationFast02", "durationModerate01", "durationModerate02", "durationSlow01", "durationSlow02"];
+export { durationFast01, durationFast02, durationModerate01, durationModerate02, durationSlow01, durationSlow02, fast01, fast02, moderate01, moderate02, slow01, slow02, easings, unstable_tokens, } from '../js/generated/tokens.js';
 export type DurationName = 'fast-01' | 'fast-02' | 'moderate-01' | 'moderate-02' | 'slow-01' | 'slow-02';
 export type EasingName = 'standard' | 'entrance' | 'exit';
 export type EasingMode = 'productive' | 'expressive';
 export type CubicBezier = readonly [number, number, number, number];
 export type EasingMap = Record<EasingName, Record<EasingMode, string>>;
-export declare const easings: EasingMap;
 export declare const motion: (name: EasingName, mode: EasingMode) => string;
 export declare const resolveEasing: (name: EasingName, mode: EasingMode) => CubicBezier;
 export declare const resolveDuration: (name: DurationName) => string;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@carbon/motion",
   "description": "Motion helpers for digital and software products using the Carbon Design System",
-  "version": "11.49.0",
+  "version": "11.50.0",
   "license": "Apache-2.0",
+  "sideEffects": [
+    "index.scss",
+    "scss/**/*.scss"
+  ],
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
@@ -27,13 +31,14 @@
     "provenance": true
   },
   "scripts": {
+    "build:tokens": "node tasks/build.js",
     "build:types": "tsc -p tsconfig.types.json",
-    "build": "yarn clean && carbon-cli bundle src/index.ts --name CarbonMotion && node tasks/build.mjs && yarn build:types",
-    "clean": "rimraf es lib umd scss/generated",
+    "build": "yarn clean && yarn build:tokens && carbon-cli bundle src/index.ts --name CarbonMotion && yarn build:types",
+    "clean": "rimraf es lib umd js/generated scss/generated",
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.47.0",
+    "@carbon/cli": "^11.48.0",
     "rimraf": "^6.0.1",
     "typescript": "^6.0.3",
     "typescript-config-carbon": "^0.11.0"
@@ -41,5 +46,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0"
   },
-  "gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
+  "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
 }

package/scss/generated/_surfaces.scss

@@ -1,6 +1,6 @@
 // Code generated by @carbon/motion. DO NOT EDIT.
 //
-// Copyright IBM Corp. 2026
+// 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.
@@ -18,14 +18,8 @@ $surfaces: (
       block-size: 0,
       opacity: 0,
     ),
-    enter-easing: (
-      'entrance',
-      'productive',
-    ),
-    exit-easing: (
-      'exit',
-      'productive',
-    ),
+    enter-easing: ('entrance', 'productive'),
+    exit-easing: ('exit', 'productive'),
   ),
   contextual: (
     kind: 'reveal',
@@ -38,14 +32,8 @@ $surfaces: (
       opacity: 0,
       transform: 'scale(0.96)',
     ),
-    enter-easing: (
-      'entrance',
-      'expressive',
-    ),
-    exit-easing: (
-      'exit',
-      'expressive',
-    ),
+    enter-easing: ('entrance', 'expressive'),
+    exit-easing: ('exit', 'expressive'),
   ),
   stretch: (
     kind: 'reveal',
@@ -58,14 +46,8 @@ $surfaces: (
       opacity: 0,
       clip-path: 'inset(50% 0 50% 0)',
     ),
-    enter-easing: (
-      'entrance',
-      'expressive',
-    ),
-    exit-easing: (
-      'exit',
-      'expressive',
-    ),
+    enter-easing: ('entrance', 'expressive'),
+    exit-easing: ('exit', 'expressive'),
   ),
   expand: (
     kind: 'shared-element',
@@ -78,26 +60,14 @@ $surfaces: (
       opacity: 0,
       transform: 'scale(0.96)',
     ),
-    enter-easing: (
-      'standard',
-      'productive',
-    ),
-    exit-easing: (
-      'standard',
-      'productive',
-    ),
+    enter-easing: ('standard', 'productive'),
+    exit-easing: ('standard', 'productive'),
   ),
   invoke: (
     kind: 'shared-element',
     origin: 'trigger',
     duration: 'moderate-02',
-    enter-easing: (
-      'standard',
-      'expressive',
-    ),
-    exit-easing: (
-      'standard',
-      'expressive',
-    ),
+    enter-easing: ('standard', 'expressive'),
+    exit-easing: ('standard', 'expressive'),
   ),
 );