@bug-on/md3-tokens 3.0.0 → 3.0.3

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/motion.ts"],"sourcesContent":["/**\n * MD3 Expressive Motion Tokens\n * Framework-agnostic JS objects.\n */\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\nexport const easing = {\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n} as const;\n\nexport const spring = {\n\tdefault: { type: \"spring\" as const, stiffness: 500, damping: 30, mass: 0.8 },\n\tsnappy: { type: \"spring\" as const, stiffness: 600, damping: 25 },\n\tgentle: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n\tbouncy: { type: \"spring\" as const, stiffness: 400, damping: 15 },\n} as const;\n\nexport const motionTokens = { duration, easing, spring };\n"],"mappings":";AAKO,IAAM,WAAW;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACb;AAEO,IAAM,SAAS;AAAA,EACrB,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACvB,oBAAoB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACjC,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/B,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,sBAAsB,CAAC,KAAK,GAAG,KAAK,IAAI;AAAA,EACxC,sBAAsB,CAAC,MAAM,KAAK,KAAK,CAAG;AAM3C;AAEO,IAAM,SAAS;AAAA,EACrB,SAAS,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,IAAI,MAAM,IAAI;AAAA,EAC3E,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAChE;AAEO,IAAM,eAAe,EAAE,UAAU,QAAQ,OAAO;","names":[]}
+{"version":3,"sources":["../src/motion.ts","../src/shape.ts"],"sourcesContent":["/**\n * MD3 Expressive Motion Tokens\n *\n * Source of truth for all motion in the design system. Two layers:\n *\n * 1. **Physics-based system** (May 2025, primary) — Spring tokens per the MD3\n *    motion physics system. Use these for Framer Motion / JS animations.\n * 2. **Legacy easing + duration** (still valid for CSS transitions) — Original\n *    MD3 cubic-bezier tokens kept as a fallback.\n *\n * @see https://m3.material.io/styles/motion/overview/how-it-works\n * @see https://m3.material.io/styles/motion/overview/specs\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** Motion scheme — controls whether springs bounce (expressive) or not (standard). */\nexport type MotionScheme = \"expressive\" | \"standard\";\n\n/** Spring speed tier. */\nexport type SpringSpeed = \"fast\" | \"default\" | \"slow\";\n\n/** Spring type — spatial (position/size/shape) or effects (color/opacity). */\nexport type SpringType = \"spatial\" | \"effects\";\n\n/** Raw MD3 spring token — damping ratio + stiffness as specified in the design token. */\nexport interface MD3SpringToken {\n\t/** Damping ratio: 0 = no damping, 1 = critically damped (no bounce). */\n\tdampingRatio: number;\n\t/** Spring stiffness. Higher = faster animation. */\n\tstiffness: number;\n}\n\n/** A pre-converted spring ready for Framer Motion `Transition`. */\nexport interface FramerSpring {\n\ttype: \"spring\";\n\t/** Absolute damping coefficient (converted from dampingRatio). */\n\tdamping: number;\n\tstiffness: number;\n}\n\n/** Web CSS curve equivalent for a spring token (for CSS transitions). */\nexport interface WebCurveToken {\n\t/** CSS cubic-bezier(...) string. */\n\tcurve: string;\n\t/** Duration in milliseconds. */\n\tdurationMs: number;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// MD3 Expressive Spring Tokens (raw: dampingRatio + stiffness)\n// Source: md.sys.motion.spring.{speed}.{type}\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Raw MD3 spring tokens per the official specification.\n * Values are identical for both \"expressive\" and \"standard\" schemes —\n * the scheme is applied at the product level, not the token level.\n *\n * @see https://m3.material.io/styles/motion/easing-and-duration/tokens-specs\n */\nexport const md3SpringTokens = {\n\tfast: {\n\t\tspatial: { dampingRatio: 0.6, stiffness: 800 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 3800 } satisfies MD3SpringToken,\n\t},\n\tdefault: {\n\t\tspatial: { dampingRatio: 0.8, stiffness: 380 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 1600 } satisfies MD3SpringToken,\n\t},\n\tslow: {\n\t\tspatial: { dampingRatio: 0.8, stiffness: 200 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 800 } satisfies MD3SpringToken,\n\t},\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Framer Motion Spring Presets\n// damping = 2 * dampingRatio * sqrt(stiffness * mass),  mass = 1 (default)\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction toFramerSpring(token: MD3SpringToken): FramerSpring {\n\tconst damping = 2 * token.dampingRatio * Math.sqrt(token.stiffness);\n\treturn { type: \"spring\", stiffness: token.stiffness, damping };\n}\n\n/**\n * Ready-to-use Framer Motion spring configs, derived from MD3 spring tokens.\n *\n * Use **spatial** springs for: position, size, border-radius, rotation, scale.\n * Use **effects** springs for: color, opacity (no overshoot).\n *\n * @example\n * ```tsx\n * import { framerSprings } from \"@md3-expressive/tokens\";\n * <m.div transition={framerSprings.fast.spatial} />\n * ```\n */\nexport const framerSprings = {\n\tfast: {\n\t\tspatial: toFramerSpring(md3SpringTokens.fast.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.fast.effects),\n\t},\n\tdefault: {\n\t\tspatial: toFramerSpring(md3SpringTokens.default.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.default.effects),\n\t},\n\tslow: {\n\t\tspatial: toFramerSpring(md3SpringTokens.slow.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.slow.effects),\n\t},\n} as const;\n\n// Convenient named aliases (mirror menu-animations.ts naming convention)\nexport const FAST_SPATIAL_SPRING = framerSprings.fast.spatial;\nexport const FAST_EFFECTS_SPRING = framerSprings.fast.effects;\nexport const DEFAULT_SPATIAL_SPRING = framerSprings.default.spatial;\nexport const DEFAULT_EFFECTS_SPRING = framerSprings.default.effects;\nexport const SLOW_SPATIAL_SPRING = framerSprings.slow.spatial;\nexport const SLOW_EFFECTS_SPRING = framerSprings.slow.effects;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Web CSS Curve Conversions\n// Use these when Framer Motion is not available (pure CSS transitions).\n// Source: https://m3.material.io/styles/motion/overview/specs#web-convert\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * CSS cubic-bezier + duration equivalents of MD3 spring tokens.\n * For non-interruptible CSS transitions when JS springs are unavailable.\n *\n * @see https://m3.material.io/styles/motion/overview/specs\n */\nexport const webCurves = {\n\texpressive: {\n\t\tfast: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.42, 1.67, 0.21, 0.90)\",\n\t\t\t\tdurationMs: 350,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.31, 0.94, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 150,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tdefault: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.38, 1.21, 0.22, 1.00)\",\n\t\t\t\tdurationMs: 500,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.80, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 200,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tslow: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.39, 1.29, 0.35, 0.98)\",\n\t\t\t\tdurationMs: 650,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.88, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 300,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t},\n\tstandard: {\n\t\tfast: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 350,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.31, 0.94, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 150,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tdefault: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 500,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.80, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 200,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tslow: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 750,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.88, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 300,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t},\n} as const;\n\n/**\n * Get a Framer Motion spring config for the given scheme, speed, and type.\n *\n * @example\n * ```tsx\n * transition={getSpring(\"expressive\", \"fast\", \"spatial\")}\n * ```\n */\nexport function getSpring(\n\t_scheme: MotionScheme,\n\tspeed: SpringSpeed,\n\ttype: SpringType,\n): FramerSpring {\n\t// Spring token values are scheme-agnostic; scheme is applied at product level.\n\treturn framerSprings[speed][type];\n}\n\n/**\n * Get a CSS transition string for the given scheme, speed, and type.\n *\n * @example\n * ```ts\n * element.style.transition = `transform ${getCSSTransition(\"expressive\", \"fast\", \"spatial\")}`;\n * ```\n */\nexport function getCSSTransition(\n\tscheme: MotionScheme,\n\tspeed: SpringSpeed,\n\ttype: SpringType,\n): string {\n\tconst { curve, durationMs } = webCurves[scheme][speed][type];\n\treturn `${durationMs}ms ${curve}`;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Legacy: Duration tokens (ms) — md.sys.motion.duration.*\n// Still valid; used as CSS fallback and for easing-based animations.\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Legacy: Easing tokens — md.sys.motion.easing.*\n// Cubic-bezier control points [x1, y1, x2, y2].\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const easing = {\n\t// Emphasized set — most common for M3 Expressive transitions\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n\n\t// Standard set — for simple/utility transitions and CSS fallback\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\n\t// Legacy set (M2 compat)\n\tlegacy: [0.4, 0, 0.2, 1] as [number, number, number, number],\n\tlegacyAccelerate: [0.4, 0, 1, 1] as [number, number, number, number],\n\tlegacyDecelerate: [0, 0, 0.2, 1] as [number, number, number, number],\n\n\t// Linear\n\tlinear: [0, 0, 1, 1] as [number, number, number, number],\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// @deprecated Legacy spring presets — kept for backward compat only.\n// Migrate to framerSprings.* or the named FAST_SPATIAL_SPRING etc. exports.\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** @deprecated Use `framerSprings.default.spatial` or `DEFAULT_SPATIAL_SPRING` instead. */\nexport const spring = {\n\tdefault: framerSprings.default.spatial,\n\tsnappy: framerSprings.fast.spatial,\n\tgentle: framerSprings.slow.spatial,\n\tbouncy: {\n\t\t...framerSprings.fast.spatial,\n\t\tdamping: framerSprings.fast.spatial.damping * 0.5,\n\t},\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Aggregate export\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const motionTokens = {\n\tduration,\n\teasing,\n\tspring: md3SpringTokens,\n\tframerSprings,\n\twebCurves,\n} as const;\n","/**\n * MD3 Expressive Shape Tokens\n *\n * TypeScript counterpart to `shape.css`. Provides numeric corner radius values,\n * CSS custom property names, and asymmetric corner helpers.\n *\n * Updated for M3 Expressive (May 2025): 10-level corner radius scale.\n *\n * @see https://m3.material.io/styles/shape/corner-radius-scale\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Corner radius scale — numeric values in pixels\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Numeric corner radius values (px) for all 10 shape scale levels.\n * Map directly to `--md-sys-shape-corner-*` CSS custom properties.\n *\n * @example\n * ```ts\n * element.style.borderRadius = `${cornerRadius.medium}px`; // 12px\n * ```\n */\nexport const cornerRadius = {\n\tnone: 0,\n\textraSmall: 4,\n\tsmall: 8,\n\tmedium: 12,\n\tlarge: 16,\n\t/** New in M3 Expressive (May 2025) */\n\tlargeIncreased: 20,\n\textraLarge: 28,\n\t/** New in M3 Expressive (May 2025) */\n\textraLargeIncreased: 32,\n\t/** New in M3 Expressive (May 2025) */\n\textraExtraLarge: 48,\n\tfull: 9999,\n} as const;\n\nexport type CornerRadiusKey = keyof typeof cornerRadius;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// CSS custom property names\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Maps each corner radius key to its CSS custom property name.\n *\n * @example\n * ```ts\n * const cssVar = cornerCssVar.medium; // \"--md-sys-shape-corner-medium\"\n * element.style.borderRadius = `var(${cssVar})`;\n * ```\n */\nexport const cornerCssVar: Record<CornerRadiusKey, string> = {\n\tnone: \"--md-sys-shape-corner-none\",\n\textraSmall: \"--md-sys-shape-corner-extra-small\",\n\tsmall: \"--md-sys-shape-corner-small\",\n\tmedium: \"--md-sys-shape-corner-medium\",\n\tlarge: \"--md-sys-shape-corner-large\",\n\tlargeIncreased: \"--md-sys-shape-corner-large-increased\",\n\textraLarge: \"--md-sys-shape-corner-extra-large\",\n\textraLargeIncreased: \"--md-sys-shape-corner-extra-large-increased\",\n\textraExtraLarge: \"--md-sys-shape-corner-extra-extra-large\",\n\tfull: \"--md-sys-shape-corner-full\",\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Asymmetric corner helpers\n// Used for inner-corner components (menus, split buttons, grouped items).\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Describes per-corner rounding for asymmetric shapes.\n * Follows CSS `border-radius` shorthand order:\n * top-left, top-right, bottom-right, bottom-left.\n */\nexport interface AsymmetricCorners {\n\ttopLeft: number;\n\ttopRight: number;\n\tbottomRight: number;\n\tbottomLeft: number;\n}\n\n/** Shorthand presets for common asymmetric corner patterns. */\nexport const asymmetricCorners = {\n\t/** Fully rounded top, square bottom — e.g. menu at top of screen. */\n\ttopFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({\n\t\ttopLeft: r,\n\t\ttopRight: r,\n\t\tbottomRight: 0,\n\t\tbottomLeft: 0,\n\t}),\n\t/** Square top, fully rounded bottom — e.g. menu at bottom of screen. */\n\tbottomFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({\n\t\ttopLeft: 0,\n\t\ttopRight: 0,\n\t\tbottomRight: r,\n\t\tbottomLeft: r,\n\t}),\n\t/** Rounded start edge only — e.g. left item in a grouped set. */\n\tstartFull: (r = cornerRadius.full): AsymmetricCorners => ({\n\t\ttopLeft: r,\n\t\ttopRight: 0,\n\t\tbottomRight: 0,\n\t\tbottomLeft: r,\n\t}),\n\t/** Rounded end edge only — e.g. right item in a grouped set. */\n\tendFull: (r = cornerRadius.full): AsymmetricCorners => ({\n\t\ttopLeft: 0,\n\t\ttopRight: r,\n\t\tbottomRight: r,\n\t\tbottomLeft: 0,\n\t}),\n} as const;\n\n/**\n * Converts an `AsymmetricCorners` object to a CSS `border-radius` string.\n *\n * @example\n * ```ts\n * element.style.borderRadius = toCSS(asymmetricCorners.topFull());\n * // \"28px 28px 0px 0px\"\n * ```\n */\nexport function asymmetricCornersToCSS(corners: AsymmetricCorners): string {\n\treturn `${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px`;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Optical roundness helper\n// When nesting rounded objects: inner radius = outer radius - padding\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Calculates the inner border-radius that maintains optical roundness\n * when nesting one rounded container inside another.\n *\n * Formula: `inner = outer - padding`\n *\n * @see https://m3.material.io/styles/shape/corner-radius-scale#adjust-for-optical-roundness\n *\n * @example\n * ```ts\n * // Container has extraExtraLarge (48px), padding is 14px\n * const inner = opticalRadius(cornerRadius.extraExtraLarge, 14); // 34\n * ```\n */\nexport function opticalRadius(outerRadius: number, padding: number): number {\n\treturn Math.max(0, outerRadius - padding);\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Aggregate export\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const shapeTokens = {\n\tcornerRadius,\n\tcornerCssVar,\n\tasymmetricCorners,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+DO,IAAM,kBAAkB;AAAA,EAC9B,MAAM;AAAA,IACL,SAAS,EAAE,cAAc,KAAK,WAAW,IAAI;AAAA,IAC7C,SAAS,EAAE,cAAc,GAAK,WAAW,KAAK;AAAA,EAC/C;AAAA,EACA,SAAS;AAAA,IACR,SAAS,EAAE,cAAc,KAAK,WAAW,IAAI;AAAA,IAC7C,SAAS,EAAE,cAAc,GAAK,WAAW,KAAK;AAAA,EAC/C;AAAA,EACA,MAAM;AAAA,IACL,SAAS,EAAE,cAAc,KAAK,WAAW,IAAI;AAAA,IAC7C,SAAS,EAAE,cAAc,GAAK,WAAW,IAAI;AAAA,EAC9C;AACD;AAOA,SAAS,eAAe,OAAqC;AAC5D,QAAM,UAAU,IAAI,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAClE,SAAO,EAAE,MAAM,UAAU,WAAW,MAAM,WAAW,QAAQ;AAC9D;AAcO,IAAM,gBAAgB;AAAA,EAC5B,MAAM;AAAA,IACL,SAAS,eAAe,gBAAgB,KAAK,OAAO;AAAA,IACpD,SAAS,eAAe,gBAAgB,KAAK,OAAO;AAAA,EACrD;AAAA,EACA,SAAS;AAAA,IACR,SAAS,eAAe,gBAAgB,QAAQ,OAAO;AAAA,IACvD,SAAS,eAAe,gBAAgB,QAAQ,OAAO;AAAA,EACxD;AAAA,EACA,MAAM;AAAA,IACL,SAAS,eAAe,gBAAgB,KAAK,OAAO;AAAA,IACpD,SAAS,eAAe,gBAAgB,KAAK,OAAO;AAAA,EACrD;AACD;AAGO,IAAM,sBAAsB,cAAc,KAAK;AAC/C,IAAM,sBAAsB,cAAc,KAAK;AAC/C,IAAM,yBAAyB,cAAc,QAAQ;AACrD,IAAM,yBAAyB,cAAc,QAAQ;AACrD,IAAM,sBAAsB,cAAc,KAAK;AAC/C,IAAM,sBAAsB,cAAc,KAAK;AAc/C,IAAM,YAAY;AAAA,EACxB,YAAY;AAAA,IACX,MAAM;AAAA,MACL,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,IACA,SAAS;AAAA,MACR,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,IACA,MAAM;AAAA,MACL,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,IACA,SAAS;AAAA,MACR,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,IACA,MAAM;AAAA,MACL,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACb;AAAA,IACD;AAAA,EACD;AACD;AAUO,SAAS,UACf,SACA,OACA,MACe;AAEf,SAAO,cAAc,KAAK,EAAE,IAAI;AACjC;AAUO,SAAS,iBACf,QACA,OACA,MACS;AACT,QAAM,EAAE,OAAO,WAAW,IAAI,UAAU,MAAM,EAAE,KAAK,EAAE,IAAI;AAC3D,SAAO,GAAG,UAAU,MAAM,KAAK;AAChC;AAOO,IAAM,WAAW;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACb;AAOO,IAAM,SAAS;AAAA;AAAA,EAErB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,sBAAsB,CAAC,KAAK,GAAG,KAAK,IAAI;AAAA,EACxC,sBAAsB,CAAC,MAAM,KAAK,KAAK,CAAG;AAAA;AAAA,EAQ1C,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACvB,oBAAoB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACjC,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA;AAAA,EAG/B,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;AAAA,EACvB,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EAC/B,kBAAkB,CAAC,GAAG,GAAG,KAAK,CAAC;AAAA;AAAA,EAG/B,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;AACpB;AAQO,IAAM,SAAS;AAAA,EACrB,SAAS,cAAc,QAAQ;AAAA,EAC/B,QAAQ,cAAc,KAAK;AAAA,EAC3B,QAAQ,cAAc,KAAK;AAAA,EAC3B,QAAQ,iCACJ,cAAc,KAAK,UADf;AAAA,IAEP,SAAS,cAAc,KAAK,QAAQ,UAAU;AAAA,EAC/C;AACD;AAMO,IAAM,eAAe;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACD;;;ACpSO,IAAM,eAAe;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA;AAAA,EAEP,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,qBAAqB;AAAA;AAAA,EAErB,iBAAiB;AAAA,EACjB,MAAM;AACP;AAiBO,IAAM,eAAgD;AAAA,EAC5D,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,MAAM;AACP;AAoBO,IAAM,oBAAoB;AAAA;AAAA,EAEhC,SAAS,CAAC,IAAI,aAAa,gBAAmC;AAAA,IAC7D,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,IACb,YAAY;AAAA,EACb;AAAA;AAAA,EAEA,YAAY,CAAC,IAAI,aAAa,gBAAmC;AAAA,IAChE,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,IACb,YAAY;AAAA,EACb;AAAA;AAAA,EAEA,WAAW,CAAC,IAAI,aAAa,UAA6B;AAAA,IACzD,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,IACb,YAAY;AAAA,EACb;AAAA;AAAA,EAEA,SAAS,CAAC,IAAI,aAAa,UAA6B;AAAA,IACvD,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,IACb,YAAY;AAAA,EACb;AACD;AAWO,SAAS,uBAAuB,SAAoC;AAC1E,SAAO,GAAG,QAAQ,OAAO,MAAM,QAAQ,QAAQ,MAAM,QAAQ,WAAW,MAAM,QAAQ,UAAU;AACjG;AAqBO,SAAS,cAAc,aAAqB,SAAyB;AAC3E,SAAO,KAAK,IAAI,GAAG,cAAc,OAAO;AACzC;AAMO,IAAM,cAAc;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACD;","names":[]}

package/dist/shape.css

@@ -1,9 +1,18 @@
 :root {
+	/* ── MD3 Expressive Corner Radius Scale (10 levels) ─────────────────────── */
+	/* Source: https://m3.material.io/styles/shape/corner-radius-scale           */
+
 	--md-sys-shape-corner-none: 0px;
 	--md-sys-shape-corner-extra-small: 4px;
 	--md-sys-shape-corner-small: 8px;
 	--md-sys-shape-corner-medium: 12px;
 	--md-sys-shape-corner-large: 16px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-large-increased: 20px;
 	--md-sys-shape-corner-extra-large: 28px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-large-increased: 32px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-extra-large: 48px;
 	--md-sys-shape-corner-full: 9999px;
 }

package/dist/shape.css.d.ts

@@ -0,0 +1,2 @@
+// CSS module — no runtime types
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/md3-tokens",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "description": "Material Design 3 Expressive design tokens",
   "author": "Bug Ổn",
   "license": "MIT",
@@ -23,9 +23,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
     "./colors.css": {
       "types": "./dist/colors.css.d.ts",
@@ -36,20 +41,19 @@
       "default": "./dist/shape.css"
     }
   },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
+  "peerDependencies": {},
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.4.0",
     "typescript": "5.8.3"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsup && node scripts/copy-css.js",
+    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.js\"",
     "clean": "rm -rf dist"
   }
 }

package/scripts/copy-css.js

@@ -12,7 +12,7 @@ if (!fs.existsSync(distDir)) {
 console.log("Copying CSS assets to dist...");
 
 // CSS files to copy from src/ to dist/ (only files that exist in src/)
-const cssFiles = ["colors.css", "shape.css", "index.css"];
+const cssFiles = ["colors.css", "shape.css"];
 
 for (const file of cssFiles) {
 	const srcPath = path.join(srcDir, file);

package/src/index.ts

@@ -1 +1,47 @@
-export { duration, easing, motionTokens, spring } from "./motion";
+// Motion tokens — MD3 Expressive physics-based system + legacy easing/duration
+export {
+	DEFAULT_EFFECTS_SPRING,
+	DEFAULT_SPATIAL_SPRING,
+	// Legacy duration + easing (still valid, kept as fallback)
+	duration,
+	easing,
+	FAST_EFFECTS_SPRING,
+	FAST_SPATIAL_SPRING,
+	type FramerSpring,
+	// Framer Motion ready presets
+	framerSprings,
+	getCSSTransition,
+	// Helpers
+	getSpring,
+	type MD3SpringToken,
+	// Types
+	type MotionScheme,
+	// Raw MD3 spring tokens (dampingRatio + stiffness)
+	md3SpringTokens,
+	// Aggregate
+	motionTokens,
+	SLOW_EFFECTS_SPRING,
+	SLOW_SPATIAL_SPRING,
+	type SpringSpeed,
+	type SpringType,
+	// @deprecated legacy spring presets
+	spring,
+	type WebCurveToken,
+	// Web CSS curve equivalents
+	webCurves,
+} from "./motion";
+
+// Shape tokens — MD3 Expressive 10-level corner radius scale + helpers
+export {
+	type AsymmetricCorners,
+	asymmetricCorners,
+	asymmetricCornersToCSS,
+	// Types
+	type CornerRadiusKey,
+	cornerCssVar,
+	// Corner radius values
+	cornerRadius,
+	opticalRadius,
+	// Aggregate
+	shapeTokens,
+} from "./shape";

package/src/motion.ts

@@ -1,8 +1,244 @@
 /**
  * MD3 Expressive Motion Tokens
- * Framework-agnostic JS objects.
+ *
+ * Source of truth for all motion in the design system. Two layers:
+ *
+ * 1. **Physics-based system** (May 2025, primary) — Spring tokens per the MD3
+ *    motion physics system. Use these for Framer Motion / JS animations.
+ * 2. **Legacy easing + duration** (still valid for CSS transitions) — Original
+ *    MD3 cubic-bezier tokens kept as a fallback.
+ *
+ * @see https://m3.material.io/styles/motion/overview/how-it-works
+ * @see https://m3.material.io/styles/motion/overview/specs
  */
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Motion scheme — controls whether springs bounce (expressive) or not (standard). */
+export type MotionScheme = "expressive" | "standard";
+
+/** Spring speed tier. */
+export type SpringSpeed = "fast" | "default" | "slow";
+
+/** Spring type — spatial (position/size/shape) or effects (color/opacity). */
+export type SpringType = "spatial" | "effects";
+
+/** Raw MD3 spring token — damping ratio + stiffness as specified in the design token. */
+export interface MD3SpringToken {
+	/** Damping ratio: 0 = no damping, 1 = critically damped (no bounce). */
+	dampingRatio: number;
+	/** Spring stiffness. Higher = faster animation. */
+	stiffness: number;
+}
+
+/** A pre-converted spring ready for Framer Motion `Transition`. */
+export interface FramerSpring {
+	type: "spring";
+	/** Absolute damping coefficient (converted from dampingRatio). */
+	damping: number;
+	stiffness: number;
+}
+
+/** Web CSS curve equivalent for a spring token (for CSS transitions). */
+export interface WebCurveToken {
+	/** CSS cubic-bezier(...) string. */
+	curve: string;
+	/** Duration in milliseconds. */
+	durationMs: number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// MD3 Expressive Spring Tokens (raw: dampingRatio + stiffness)
+// Source: md.sys.motion.spring.{speed}.{type}
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Raw MD3 spring tokens per the official specification.
+ * Values are identical for both "expressive" and "standard" schemes —
+ * the scheme is applied at the product level, not the token level.
+ *
+ * @see https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
+ */
+export const md3SpringTokens = {
+	fast: {
+		spatial: { dampingRatio: 0.6, stiffness: 800 } satisfies MD3SpringToken,
+		effects: { dampingRatio: 1.0, stiffness: 3800 } satisfies MD3SpringToken,
+	},
+	default: {
+		spatial: { dampingRatio: 0.8, stiffness: 380 } satisfies MD3SpringToken,
+		effects: { dampingRatio: 1.0, stiffness: 1600 } satisfies MD3SpringToken,
+	},
+	slow: {
+		spatial: { dampingRatio: 0.8, stiffness: 200 } satisfies MD3SpringToken,
+		effects: { dampingRatio: 1.0, stiffness: 800 } satisfies MD3SpringToken,
+	},
+} as const;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Framer Motion Spring Presets
+// damping = 2 * dampingRatio * sqrt(stiffness * mass),  mass = 1 (default)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function toFramerSpring(token: MD3SpringToken): FramerSpring {
+	const damping = 2 * token.dampingRatio * Math.sqrt(token.stiffness);
+	return { type: "spring", stiffness: token.stiffness, damping };
+}
+
+/**
+ * Ready-to-use Framer Motion spring configs, derived from MD3 spring tokens.
+ *
+ * Use **spatial** springs for: position, size, border-radius, rotation, scale.
+ * Use **effects** springs for: color, opacity (no overshoot).
+ *
+ * @example
+ * ```tsx
+ * import { framerSprings } from "@md3-expressive/tokens";
+ * <m.div transition={framerSprings.fast.spatial} />
+ * ```
+ */
+export const framerSprings = {
+	fast: {
+		spatial: toFramerSpring(md3SpringTokens.fast.spatial),
+		effects: toFramerSpring(md3SpringTokens.fast.effects),
+	},
+	default: {
+		spatial: toFramerSpring(md3SpringTokens.default.spatial),
+		effects: toFramerSpring(md3SpringTokens.default.effects),
+	},
+	slow: {
+		spatial: toFramerSpring(md3SpringTokens.slow.spatial),
+		effects: toFramerSpring(md3SpringTokens.slow.effects),
+	},
+} as const;
+
+// Convenient named aliases (mirror menu-animations.ts naming convention)
+export const FAST_SPATIAL_SPRING = framerSprings.fast.spatial;
+export const FAST_EFFECTS_SPRING = framerSprings.fast.effects;
+export const DEFAULT_SPATIAL_SPRING = framerSprings.default.spatial;
+export const DEFAULT_EFFECTS_SPRING = framerSprings.default.effects;
+export const SLOW_SPATIAL_SPRING = framerSprings.slow.spatial;
+export const SLOW_EFFECTS_SPRING = framerSprings.slow.effects;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Web CSS Curve Conversions
+// Use these when Framer Motion is not available (pure CSS transitions).
+// Source: https://m3.material.io/styles/motion/overview/specs#web-convert
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * CSS cubic-bezier + duration equivalents of MD3 spring tokens.
+ * For non-interruptible CSS transitions when JS springs are unavailable.
+ *
+ * @see https://m3.material.io/styles/motion/overview/specs
+ */
+export const webCurves = {
+	expressive: {
+		fast: {
+			spatial: {
+				curve: "cubic-bezier(0.42, 1.67, 0.21, 0.90)",
+				durationMs: 350,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+				durationMs: 150,
+			} satisfies WebCurveToken,
+		},
+		default: {
+			spatial: {
+				curve: "cubic-bezier(0.38, 1.21, 0.22, 1.00)",
+				durationMs: 500,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+				durationMs: 200,
+			} satisfies WebCurveToken,
+		},
+		slow: {
+			spatial: {
+				curve: "cubic-bezier(0.39, 1.29, 0.35, 0.98)",
+				durationMs: 650,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+				durationMs: 300,
+			} satisfies WebCurveToken,
+		},
+	},
+	standard: {
+		fast: {
+			spatial: {
+				curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+				durationMs: 350,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+				durationMs: 150,
+			} satisfies WebCurveToken,
+		},
+		default: {
+			spatial: {
+				curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+				durationMs: 500,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+				durationMs: 200,
+			} satisfies WebCurveToken,
+		},
+		slow: {
+			spatial: {
+				curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+				durationMs: 750,
+			} satisfies WebCurveToken,
+			effects: {
+				curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+				durationMs: 300,
+			} satisfies WebCurveToken,
+		},
+	},
+} as const;
+
+/**
+ * Get a Framer Motion spring config for the given scheme, speed, and type.
+ *
+ * @example
+ * ```tsx
+ * transition={getSpring("expressive", "fast", "spatial")}
+ * ```
+ */
+export function getSpring(
+	_scheme: MotionScheme,
+	speed: SpringSpeed,
+	type: SpringType,
+): FramerSpring {
+	// Spring token values are scheme-agnostic; scheme is applied at product level.
+	return framerSprings[speed][type];
+}
+
+/**
+ * Get a CSS transition string for the given scheme, speed, and type.
+ *
+ * @example
+ * ```ts
+ * element.style.transition = `transform ${getCSSTransition("expressive", "fast", "spatial")}`;
+ * ```
+ */
+export function getCSSTransition(
+	scheme: MotionScheme,
+	speed: SpringSpeed,
+	type: SpringType,
+): string {
+	const { curve, durationMs } = webCurves[scheme][speed][type];
+	return `${durationMs}ms ${curve}`;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Legacy: Duration tokens (ms) — md.sys.motion.duration.*
+// Still valid; used as CSS fallback and for easing-based animations.
+// ─────────────────────────────────────────────────────────────────────────────
+
 export const duration = {
 	short1: 50,
 	short2: 100,
@@ -22,10 +258,13 @@ export const duration = {
 	extraLong4: 1000,
 } as const;
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Legacy: Easing tokens — md.sys.motion.easing.*
+// Cubic-bezier control points [x1, y1, x2, y2].
+// ─────────────────────────────────────────────────────────────────────────────
+
 export const easing = {
-	standard: [0.2, 0, 0, 1] as [number, number, number, number],
-	standardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],
-	standardDecelerate: [0, 0, 0, 1] as [number, number, number, number],
+	// Emphasized set — most common for M3 Expressive transitions
 	emphasized: [0.2, 0, 0, 1] as [number, number, number, number],
 	emphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],
 	emphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [
@@ -34,13 +273,45 @@ export const easing = {
 		number,
 		number,
 	],
+
+	// Standard set — for simple/utility transitions and CSS fallback
+	standard: [0.2, 0, 0, 1] as [number, number, number, number],
+	standardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],
+	standardDecelerate: [0, 0, 0, 1] as [number, number, number, number],
+
+	// Legacy set (M2 compat)
+	legacy: [0.4, 0, 0.2, 1] as [number, number, number, number],
+	legacyAccelerate: [0.4, 0, 1, 1] as [number, number, number, number],
+	legacyDecelerate: [0, 0, 0.2, 1] as [number, number, number, number],
+
+	// Linear
+	linear: [0, 0, 1, 1] as [number, number, number, number],
 } as const;
 
+// ─────────────────────────────────────────────────────────────────────────────
+// @deprecated Legacy spring presets — kept for backward compat only.
+// Migrate to framerSprings.* or the named FAST_SPATIAL_SPRING etc. exports.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** @deprecated Use `framerSprings.default.spatial` or `DEFAULT_SPATIAL_SPRING` instead. */
 export const spring = {
-	default: { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.8 },
-	snappy: { type: "spring" as const, stiffness: 600, damping: 25 },
-	gentle: { type: "spring" as const, stiffness: 300, damping: 20 },
-	bouncy: { type: "spring" as const, stiffness: 400, damping: 15 },
+	default: framerSprings.default.spatial,
+	snappy: framerSprings.fast.spatial,
+	gentle: framerSprings.slow.spatial,
+	bouncy: {
+		...framerSprings.fast.spatial,
+		damping: framerSprings.fast.spatial.damping * 0.5,
+	},
 } as const;
 
-export const motionTokens = { duration, easing, spring };
+// ─────────────────────────────────────────────────────────────────────────────
+// Aggregate export
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const motionTokens = {
+	duration,
+	easing,
+	spring: md3SpringTokens,
+	framerSprings,
+	webCurves,
+} as const;

package/src/shape.css

@@ -1,9 +1,18 @@
 :root {
+	/* ── MD3 Expressive Corner Radius Scale (10 levels) ─────────────────────── */
+	/* Source: https://m3.material.io/styles/shape/corner-radius-scale           */
+
 	--md-sys-shape-corner-none: 0px;
 	--md-sys-shape-corner-extra-small: 4px;
 	--md-sys-shape-corner-small: 8px;
 	--md-sys-shape-corner-medium: 12px;
 	--md-sys-shape-corner-large: 16px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-large-increased: 20px;
 	--md-sys-shape-corner-extra-large: 28px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-large-increased: 32px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-extra-large: 48px;
 	--md-sys-shape-corner-full: 9999px;
 }